svg绘制圆环进度条

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

不怕麻烦的鹿丸

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

阅读量700

点赞数

分类专栏： svg 文章标签： svg

本文链接：https://blog.csdn.net/qq_31851435/article/details/125659704

版权

svg 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

思路：使用svg绘制2个圆形，描边，不填充，然后使用stroke-dashoffset和stroke-dasharray，结合svg中的渐变和旋转等知识点，我们可以绘制出各种各样的进度条，如下图：

<div class="svg-box">
     <svg class='svg' width="100%" height="100%" viewBox="0 0 200 200">
        <!-- 外圈圆 -->
        <circle cx="100" cy="100" r="90" stroke="#dcdcdc" stroke-width="10" fill="none" />
        <!-- 内圈圆，虚线用于展示进度 -->
        <circle cx="100" cy="100" r="90" stroke="#ff0000" stroke-width="10" fill="none" :stroke-dasharray="0 +','+ 2*Math.PI*90" :stroke-dashoffset="0" stroke-linecap="round">
        <animate
            attributeName="stroke-dasharray"
            :from="0"
            :to="2*Math.PI*90/3"
            dur="1s"
            begin="0"
            fill="freeze"/>
        </circle>
     </svg>
     <div class="progress-desc">
          <p class="p1">98%</p>
          <p class="p2">相似度</p>
     </div>
</div>

<style>
.svg-box {
    position: relative;
    width: 0.9rem;
    height: 0.9rem;
    .svg {
      display: block;
      width: 100%;
      height: 100%;
      transform: rotate(270deg);
    }
    .progress-desc {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      text-align: center;
      .p1 {
        font-weight: bold;
        font-size: 0.28rem;
      }
      .p2 {
        font-size: 0.14rem;
      }
    }
}
</style>