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

陌上人如玉
  • 73

image

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

回复
阅读 2.1k
1 个回答
江湖人称007
  • 370
✓ 已被采纳
<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>
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
宣传栏