svg画个圆形进度条

最新推荐文章于 2024-05-30 20:03:01 发布

arrowhan

最新推荐文章于 2024-05-30 20:03:01 发布

阅读量252

点赞数

分类专栏：前端文章标签： javascript html css 图形渲染 Powered by 金山文档

本文链接：https://blog.csdn.net/arrowhan/article/details/129086179

版权

前端专栏收录该内容

5 篇文章 0 订阅

订阅专栏

好记性不如烂笔头，记录一下~

效果：

代码：

<html>
    <head>
        <meta charset="UTF-8" />
        <title>Test</title>
        <style>
            .box {
                width: 120px;
                height: 120px;
        position: relative;
            }
      /*文本展示在svg外，通过position定位*/
      /* .text{
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
      } */
        </style>
    </head>
    <body>
        <div class="box">
            <!-- 将圆翻转90度，使进度条从顶部开始 -->
            <svg id="cirlceSvg" width="100%" height="100%">
                <circle id="baseCircle" class="circle" cx="50%" cy="50%" fill="none" />
                <circle id="progress" class="circle" cx="50%" cy="50%" fill="none" stroke-linecap="round"
        style="transform-origin: center; transform: rotate(-90deg);animation: circleProgress 1s 1;" />
                <text x="50%" y="60%" style="text-anchor: middle;">
                    <tspan id="text"></tspan>
                    <tspan>%</tspan>
                </text>
            </svg>
      <!-- <div class="text">
        <div>
          <span id="text"></span>%
        </div>
      </div> -->
    </div>
    
        <script>
            var rate = 50;
      var unit = '%';
            var strokeWidth = 10;
            var activeColor = "#3c9cff";
            var inActiveColor = "#eee";
            var svg = document.getElementById("cirlceSvg");
            var width = svg.clientWidth;
            var r = (100 - strokeWidth) / 2; // 计算半径百分比
            var dasharray = r * 2 * Math.PI; // 2πr  周长
            var end = r * 2 * Math.PI * (1 - rate / 100);
            // 底部圆环
            var circle1 = document.getElementById("baseCircle");
            // 设置属性
            circle1.setAttribute("r", r + unit);
            circle1.setAttribute("stroke-width", strokeWidth + unit);
            circle1.setAttribute("stroke", inActiveColor);

            var circle2 = document.getElementById("progress");
            // 设置属性
            circle2.setAttribute("r", r + unit);
            circle2.setAttribute("stroke-width", strokeWidth + unit);
            circle2.setAttribute("stroke", rate > 0 ? activeColor : inActiveColor);
            circle2.setAttribute("stroke-dasharray", dasharray + unit);
            circle2.setAttribute("stroke-dashoffset", end + unit);

            var text = document.getElementById("text");
            text.innerHTML = rate;

      // css动画设置
            document.styleSheets[0].insertRule(
                `
          @-webkit-keyframes circleProgress{ from{ stroke-dashoffset: ${dasharray}${unit}; } to { stroke-dashoffset: ${end}${unit}; }}
        `,
                0
            );
        </script>
    </body>
</html>

思路：大小由外部框子控制，里面全部使用百分比。