基于双路径SVG盾牌的顺时针填充进度条实现咨询

用户需求与提供的SVG代码 #

我有一个由两条path组成的SVG盾牌，需要实现如下进度条效果：从顶部中心开始，顺时针填充绿色。遗憾的是我没有SVG相关经验，仅了解到dash+offset技巧可能适用，但由于内外部分不同，可能需要两条同步运行且起始位置正确的描边。请问是否可以用Highcharts完成该任务？或是需要向设计师索要正确的路径/路径片段？欢迎提供任何建议，谢谢。

提供的SVG代码：

<svg xmlns="http://www.w3.org/2000/svg" id="b" viewBox="0 0 208 256">
  <g id="c">
    <g id="d">
      <path d="M104.008,230.733c34.201-19.594,53.976-31.944,65.831-43.87,10.089-10.149,14.161-19.658,14.161-37.101V53.467c-.462-.213-.987-.446-1.59-.704-14.122-5.86-59.818-22.552-75.371-28.132-2.049-.587-2.812-.63-3.102-.63-.137,0-.854.027-2.9.609-1.425.523-3.092,1.133-4.956,1.816-18.825,6.897-57.753,21.16-70.689,26.42-.522.217-.983.416-1.392.598v96.319c0,9.414,1.253,16.008,3.303,21.237,2.011,5.129,5.262,10.15,10.888,15.797,11.888,11.934,31.67,24.279,65.818,43.937ZM95.55,253.553C24.65,212.861,0,195.992,0,149.762V52.668c0-13.264,5.718-17.642,16.264-22.02,13.307-5.418,52.881-19.916,71.606-26.775,2.194-.804,4.101-1.503,5.647-2.07,3.431-1.03,6.862-1.803,10.42-1.803,3.684,0,7.115.773,10.546,1.803,14.739,5.279,62.387,22.663,77.253,28.845,10.546,4.507,16.264,8.756,16.264,22.02v97.094c0,46.23-24.523,63.228-95.55,103.791-3.304,1.674-6.48,2.447-8.513,2.447s-5.083-.773-8.387-2.447Z" 
            style="fill:#0a0b0c; fill-rule:evenodd; stroke-width:0px;">
      </path>
    </g>
  </g>
</svg>

问题解答与建议 #

关于Highcharts实现的可行性 #

可以用Highcharts实现，但需要额外配置：

• Highcharts支持自定义SVG路径作为图表系列，你可以把盾牌的内外路径分别作为两个path系列，再结合Highcharts的动画API，利用stroke-dasharray和stroke-dashoffset实现同步进度效果。
• 但这种方式需要手动拆分原始SVG的复合路径（当前SVG是单个包含两条子路径的<path>元素），还要计算每条路径的总长度，才能精准控制进度同步。

是否需要向设计师索要路径 #

非常建议向设计师索要拆分好的内外轮廓路径：

• 当前SVG是单个复合路径，包含盾牌的内外两条边，直接用它做进度条会很麻烦——手动拆分路径容易出错，还难以保证起始点对齐。
• 让设计师提供两条独立路径：一条外轮廓、一条内轮廓，且两条路径的起始点都在顶部中心，方向保持顺时针，后续用dash+offset技巧时，能轻松实现同步填充效果。

纯SVG实现的核心思路（无需Highcharts） #

如果不想依赖图表库，直接用纯SVG也能实现，步骤如下：

1. 拿到拆分好的内外两条路径，给每条路径设置stroke: green、fill: none，并设置合适的stroke-width。
2. 用JavaScript获取每条路径的总长度：path.getTotalLength()。
3. 初始化时设置stroke-dasharray为路径总长度，stroke-dashoffset为总长度（此时路径完全不可见）。
4. 进度变化时，同步修改两条路径的stroke-dashoffset：总长度 - 总长度 * 进度值，就能实现从顶部开始顺时针填充的效果。

额外提示 #

• 必须确保两条路径的起始点完全一致，否则进度动画会出现错位。
• 纯SVG实现时，可结合CSS动画或JavaScript的requestAnimationFrame实现平滑过渡。

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