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
70 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. cxcy 设置圆心的位置。
  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