svg 圆环进度条50%效果

要创建一个SVG圆环进度条，可以使用<path>元素和stroke-dasharray属性来定义圆弧的虚线样式。以下是一个简单的示例代码，展示了如何创建一个50%的圆环进度条：

<svg width="100" height="100">
  <path d="M 50,50 m -50,0 a 50,50 0 1,0 100,0 a 50,50 0 1,0 -100,0" fill="none" stroke="black" stroke-width="10" stroke-dasharray="157 157" stroke-linecap="round" />
</svg>

在这个示例中，我们使用了两个相同的圆弧路径来创建一个完整的圆环。首先，我们使用圆心为(50,50)、半径为50的圆弧路径来绘制圆环的上半部分。然后，我们再次使用相同的路径来绘制圆环的下半部分，但是需要将圆弧的方向改为逆时针方向。

在路径的d属性中，我们使用了小写字母a来绘制圆弧，同时将起点和终点坐标都设置为(50,50)。这里的圆弧半径也是50，所以路径的长度应该是圆的周长，因此我们需要使用两个圆弧路径来绘制完整的圆环。

接下来，我们使用stroke-dasharray属性来定义虚线样式。这里我们将其设置为"157 157"，表示第一个线段占总路径长度的50%，第二个线段占总路径长度的另外50%。由于圆弧的周长是π×半径×2，所以这里的总路径长度为157（即π×50×2）。

最后，我们使用stroke-linecap属性来定义线段的端点样式，这里我们将其设置为"round"，表示使用圆形端点样式。

上述代码将创建一个50%的圆环进度条，其中圆环的线宽为10px，线段长度为157px，使用圆形端点样式。你可以根据自己的需要来调整这些属性，创建不同样式的圆环进度条。