SVG怎么制作半圆环形进度条?

陌上人如玉
  • 69

image

image
如图,我只想要上半部分,该怎么改?

回复
阅读 1.9k
1 个回答
<svg width="200" height="200">
    <circle
        cx="100"
        cy="100"
        r="50"
        stroke="#d1d3d7"
        stroke-width="5"
        fill="none"
        stroke-dasharray="158"
        stroke-dashoffset="-158"
        stroke-linecap="round"
    />
    <circle
        cx="100"
        cy="100"
        r="50"
        stroke="#00a5e0"
        stroke-width="5"
        fill="none"
        stroke-dasharray="50 158" #这里比例即为进度条比例
        stroke-dashoffset="-158"
        stroke-linecap="round"
    />
</svg>
宣传栏