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

image

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

阅读 376
评论
    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>
      撰写回答

      登录后参与交流、获取后续更新提醒

      相似问题
      推荐文章