如何从左侧开始按百分比填充颜色到甜甜圈SVG路径？

Question

我有一个甜甜圈SVG路径。它必须从左侧开始填充颜色，并且必须在右侧结束并且必须按百分比填充。

查看此：

我试图这样实现旋转的clipPath：

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 92 100">
<defs>
  <clipPath id="knobMask">
      <path style="fill: #ff554e;" d="
            M 17.72, 74.28
           a 40, 40,0, 1, 1, 56.56, 0
           l 4.25, 4.25
           a 46, 46, 0, 1, 0-65.06 ,0 Z" />
</clipPath>
</defs>
<g>
<g id="Layer_1" data-name="Layer 1">
  <g id="Path_34688-6" data-name="Path 34688-6">
    />
  </g>
  <path d="M17.72,74.28a40,40,0,1,1,56.56,0l4.25,4.25a46,46,0,1,0-65.06,0Z" />

  <g clip-path="url(#knobMask)" transform="rotate(-45,45,45)">
    <path style="fill: #ff554e;" d="M 17.72,74.28
            a 40,40,0,1,1,56.56,0
            l 4.25,4.25
            a 46,46,0,1,0-65.06,0Z" />
  </g>
</g>

但是没有运气。如何按百分比从左侧开始为该路径填充颜色？

Here is the JS Fiddle

基本上我想要这个：

Answer 1

正如我评论过的，有一种更简单的方法可以实现这一目标。您可以简化到d="M 17.72,74.28a 40,40,0,1,1,56.56,0"的路径，例如使用fill =“ none”和stroke =“ 10”。对于红色路径，您使用与以前相同的d，并使用stroke-dasharray减少路径的视在长度。如果使用此d，则路径的总长度为188.53，因此可以使用188.53 / 2 = 94.265：stroke-dasharray = 94.265“

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 92 100" width="200">
<defs>
      <path id="base" fill="none" stroke-width="10" d="
            M 17.72, 74.28
           a 40, 40,0, 1, 1, 56.56, 0" />
 </defs> 
  <use xlink:href="#base" stroke="black"  />
  <use xlink:href="#base" stroke="#ff554e" stroke-dasharray="94.265"  />

  </svg>