svg画圆环

Posted 2021-03-20 xinsir

之前我已经分享了一篇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;

效果图如下：