使用svg和js画一个圆环

Posted 2023-04-08

请教如何使用js和svg画一个四分之一的圆环。

var path = svgdoc.createElement("path");
path.setAttribute("d","M400 400 L400 300 A400 400 90 0 1 500 400 Z");
path.setAttribute("style","fill:none;stroke:#00f;stroke-width:2");

svgdoc.rootElement.appendChild(path);

这个代码是画四分之一个圆，圆环你自己算下坐标，用PATH画，A是画弧线的
path的相关知识，你百度你里面看下，这里就不多说了 参考技术A 好难呢不理解 参考技术B

先看效果

用tweenmax.js 配合DrawSVGPlugin插件就能做了，想画什么都可以TweenMax画圆环演示地址

1.先把圆做好

<svg width="100%" height="300" version="1.1" xmlns="http://www.w3.org/2000/svg">
<circle cx="200" cy="150" r="100" stroke="green" stroke-width="8" fill="none" id="circle"/>
</svg>

2.加载插件

<script src="minified/TweenLite.min.js"></script>
<script src="minified/DrawSVGPlugin.min.js"></script>

3.运行动画

TweenLite.fromTo("#circle", 3, drawSVG:'75% 75%', drawSVG:"75% 100% ");

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;

效果图如下：