svg画圆环

hermanncain 2019-12-24

之前我已经分享了一篇css画圆环,为啥今天还要分享一篇svg画圆环呢?

原因是:css画圆环在部分ipone手机会有bug,最大张角为90°,所以圆环会有白色的间隙。

好了,开始代码展示:

html:

<svg class="c-c-c">     <!-- score为百分比值 -->     <!-- color为圆环的色值 --> 
        <circle cx="48" cy="48" r="40" stroke="#eee" stroke-width="15" fill="none" stroke-dashoffset="<%=80*Math.PI%>px"/>
        <circle cx="48" cy="48" r="40" stroke="<%=color%>"
        stroke-width="15" fill="none" stroke-dasharray="<%=score*8*Math.PI%>px, <%=80*Math.PI%>px" class="blue-circle"/>                                                        <!-- 此处前面值为圆环占的值,后面值为圆环总长度 -->
        <text x="40" y="56" fill="<%=color%>" font-size="25"><%=score %></text>
 </svg>

css:

.c-c-c {
  display: block;
  position: relative;
  margin: 0 auto;
  width: 96px;
  height: 96px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.blue-circle{
    transform: rotateZ(-90deg);
    transform-origin: 50% 50%;
}

ok,这样就完成了,是不是很棒,如果需要js改变动画还可以增加以下样式

transition: stroke-dashoffset 0.6s ease 0s, stroke 0.6s ease 0s;

效果图如下:

svg画圆环

相关推荐