如何裁剪SVG的描边？SVG新手技术求助

嘿，作为SVG新手能写出环形图的基础结构已经很棒啦！你说的“裁剪描边”应该是指控制环形分段的显示长度吧？其实SVG的<circle>元素有两个核心属性可以完美实现这个需求：stroke-dasharray和stroke-dashoffset。

核心原理 #

环形的本质是一个圆形的描边，我们可以通过以下两步精准控制它的显示部分：

1. 用stroke-dasharray拆分描边：这个属性接受两个值，第一个是需要显示的描边长度，第二个是需要隐藏的空白长度，两者加起来等于环形的总周长。
2. 用stroke-dashoffset调整起始位置：默认圆形描边从右侧开始，通过偏移值可以把起始点移到顶部（环形图常用的起始位置）。

先帮你算出这个环形的总周长：你的圆形半径r='15.91549430918954'，周长=2×π×r≈100（这个数值刚好方便计算和调整）。

修改后的完整代码 #

.chart-wrapper { 
  max-width: 20rem; 
}
.donut-ring {
  fill: #666ad1;
  stroke-width: 4;
}
.donut-segment {
  fill: transparent;
  stroke: #ff7a5c; /* 给分段设置显眼的区分色 */
  stroke-width: 4;
  /* 总周长≈100，这里设置显示70%的进度，隐藏30% */
  stroke-dasharray: 70 30;
  /* 偏移25（周长的1/4），让起始点从顶部开始 */
  stroke-dashoffset: 25;
  stroke-linecap: round; /* 给分段两端加圆角，视觉更精致 */
}

<div class="chart-wrapper">
  <svg width="100%" height="100%" viewBox="0 0 42 42" class="donut-chart">
    <!-- 背景环形 -->
    <circle class='donut-ring' cx='21' cy='21' r='15.91549430918954'></circle>
    <!-- 进度分段环形 -->
    <circle class='donut-segment' cx='21' cy='21' r='15.91549430918954'></circle>
  </svg>
</div>

关键细节说明 #

• stroke-dasharray数值调整：如果要显示50%的进度，就改成50 50；要显示20%就改成20 80，以此类推，完全可以根据你的需求自定义比例。
• stroke-dashoffset的作用：如果不需要调整起始位置（默认从右侧开始），可以直接去掉这个属性；要是想让起始点在顶部，偏移值固定为总周长的1/4也就是25就好。
• 保持参数一致性：两个圆形的cx、cy、r、stroke-width必须完全相同，这样分段才能完美覆盖在背景环上，不会出现错位。
• 动态调整进阶：如果需要根据数据实时更新进度，还可以用JavaScript修改stroke-dasharray的数值，比如从后端拿到百分比后，计算对应的显示长度赋值给这个属性就行。

内容的提问来源于stack exchange，提问作者John Ohara