复杂的SVG进度条动画

Question

我有一个来自两条路径的 svg 屏蔽复合物。我需要创建这样的进度条：

护罩应从顶部中心开始顺时针填充绿色。 不幸的是我没有任何使用 svgs 的经验。我发现的所有内容 - 是破折号+偏移技巧，有点可以使用两个正确的笔划（我认为是两个，因为外部和内部部分不一样），并且它们应该同时移动，并且也应该从顶部的正确位置移动。

也许有人使用高图表并且他们足够灵活来完成这项任务？ 或者我应该向设计师询问正确的路径/部分路径吗？任何建议都会有所帮助

谢谢你

<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>

Answer 1

棘手的是你的路径是填充，而不是描边。如果您的形状是圆形、直线或任何带有笔划的形状，则直接使用

stroke-dasharray

和

pathLength

会更容易。

在下面的示例中，我使用您的路径作为另一条路径的掩码。这条路径有一个笔划，并且遵循与您路径相同的形状。

灰色的“背景描边”由矩形组成 - 也使用您的路径作为蒙版。

let p1 = document.getElementById('p1');
let t1 = document.getElementById('t1');
document.forms.form01.range.addEventListener('input', e => {
  let value = e.target.valueAsNumber;
  p1.style.strokeDasharray = `${value} 100`;
  t1.textContent = `${value}%`;
});

body {
  display: flex;
  flex-direction: row;
}

svg {
  height: 95vh;
}

<form name="form01">
  <input name="range" type="range" value="50" min="0" max="100" />
</form>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 208 256">
  <defs>
    <mask id="m1">
      <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" fill-rule="evenodd" fill="white" />
    </mask>
  </defs>
  <rect width="208" height="256" fill="LightGray"
    mask="url(#m1)" />
  <path id="p1" d="M 104 12 Q 108 12 113 14 L 191 45 Q 197 47 197 51 L 196 149 C 196 170 192 184 180 196 L 116 240 Q 103 248 90 239 L 32 200 C 17 187 11 168 11 150 L 12 53 Q 12 47 17 45 L 96 14 Q 100 12 104 12"
    stroke="MediumSeaGreen" stroke-width="30" fill="none"
    mask="url(#m1)" pathLength="100" stroke-dasharray="50 100"/>
   <text id="t1" x="50%" y="50%" font-size="35" font-weight="bold"
     font-family="sans-serif" dominant-baseline="middle"
     text-anchor="middle">50%</text>
</svg>