如何在SVG中按百分比显示路径的多个指定分段？

核心方案：利用pathLength标准化路径长度 + stroke-dasharray/stroke-dashoffset #

你之前用stroke-dasharray百分比失效，是因为默认百分比基于元素的边界框尺寸，而非路径实际长度。通过pathLength属性将路径长度标准化为固定值（比如100，对应100%），就能用数值精准对应百分比区间。

实现步骤 #

1. 给目标<path>设置pathLength="100"，将整个路径长度映射为100单位（1单位=1%）。
2. 根据需要显示的分段，计算stroke-dasharray和stroke-dashoffset的参数：
   • 假设需要显示的区间是(a,b)和(c,d)，对应的长度分别是b-a、d-c；隐藏的区间是(0,a)、(b,c)，长度分别是a、c-b。
   • stroke-dasharray按「可见段长度 → 隐藏段长度 → 可见段长度 → 隐藏段长度」的顺序排列，即"b-a c-b d-c a"。
   • stroke-dashoffset设置为a，让路径从第一个隐藏段结束的位置开始绘制，跳过开头的隐藏部分。

示例代码 #

比如你需要显示30%-50%、75%-100%的路径段：

<svg viewBox="0 0 200 100" xmlns="http://www.w3.org/2000/svg">
  <path 
    d="M20,50 C40,10 60,90 80,50 C100,10 120,90 140,50 C160,10 180,90 200,50"
    stroke="black" 
    stroke-width="4" 
    fill="none"
    pathLength="100"
    stroke-dasharray="20 25 25 30"  <!-- 20=50-30, 25=75-50,25=100-75,30=30-0 -->
    stroke-dashoffset="30"          <!-- 跳过前30%的隐藏段 -->
  />
</svg>

备选方案：手动拆分路径为子路径（适合固定路径场景） #

如果你的路径是固定的，可以提前将原路径按百分比拆分为多个子路径，然后只保留需要显示的子路径。这种方法无需依赖pathLength，但需要手动计算各分段的路径坐标（可借助SVG编辑器的路径分段工具提前处理）。

示例代码 #

<svg viewBox="0 0 200 100" xmlns="http://www.w3.org/2000/svg">
  <!-- 仅保留30%-50%、75%-100%的子路径 -->
  <path d="M70,50 C80,10 100,90 120,50" stroke="black" stroke-width="4" fill="none"/>
  <path d="M155,50 C170,10 190,90 200,50" stroke="black" stroke-width="4" fill="none"/>
</svg>

注意事项 #

• pathLength是SVG 2标准属性，主流现代浏览器均支持；若需兼容旧环境，可手动计算路径实际长度，将stroke-dasharray和stroke-dashoffset的数值替换为实际长度的百分比值。
• 手动拆分路径的方法精度最高，但仅适用于路径固定、无需动态调整的场景。

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