svg畫圓環

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

效果圖如下：