svg写了一个圆环进度条效果，怎么设置圆角

代码是这样的：

<svg :width="size" :height="size" class="circle">
  <circle
    :r="radius"
    :cx="center"
    :cy="center"
    :stroke="backgroundColor"
    :stroke-width="strokeWidth"
    fill="none"
  ></circle>
  <circle
    :r="radius"
    :cx="center"
    :cy="center"
    :stroke="color"
    :stroke-width="strokeWidth"
    :stroke-dasharray="circumference"
    :stroke-dashoffset="offset"
    fill="none"
  ></circle>
</svg>

现在圆环上的进度条起点和终点是直角边，我想设置成圆角的，具体应该怎么改？麻烦带佬们看一下

svg·html·css
187 views
Comments
登录后评论
Sign In
·

使用SVG创建带有圆角的圆环进度条，您可以使用<circle>元素并设置其stroke相关属性来实现。要使圆环具有圆角效果，可以使用stroke-linecap属性。

xml

<svg width="200" height="200" viewBox="0 0 200 200">

    <!-- 背景圆环 -->

    <circle cx="100" cy="100" r="90" stroke="lightgray" stroke-width="20" fill="none" />

    <!-- 进度条圆环 -->

    <circle cx="100" cy="100" r="90" stroke="blue" stroke-width="20" fill="none" stroke-dasharray="565.5" stroke-dashoffset="424.125" stroke-linecap="round" />

</svg>

以下是一个示例，展示如何使用SVG创建带有圆角的圆环进度条：

解释：

  1. cx 和 cy 设置圆心的位置。
  2. r 设置圆的半径。
  3. stroke-width 设置线宽，这决定了圆环的宽度。
  4. stroke-dasharray 设置虚线模式。值为圆环的周长，即 2 * π * r（其中 r = 90）。
  5. stroke-dashoffset 设置虚线模式的偏移量。调整这个值可以改变进度条的进度。例如，如果圆环的周长为565.5，则偏移424.125表示进度为25%。
  6. stroke-linecap="round" 使进度条的两端变得圆润。

您可以根据需要调整stroke-dashoffset的值来显示不同的进度。

·

OK了，在子元素上加了stroke-linecap="round"就好了 smiley