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

Question

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

看到这个：

_{（来源：eksiup.com）}

我试图像这样实现旋转的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

基本上我想要这个：

_{（来源：eksiup.com）}

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>

在下一个示例中，我使用javascript计算破折号的值和间隙的值。请使用输入类型范围更改值。

let totallength=base.getTotalLength();

itr.addEventListener("input",()=>{
let newSDA = (Number(itr.value)*totallength) / 100;
let gap = totallength - newSDA

red.setAttributeNS(null,"stroke-dasharray",`${newSDA} ${gap}`)
})

svg{border:1px solid}

<p><input id="itr" type="range"  /></p>

<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" id="red" stroke="#ff554e" stroke-dasharray="94.265"  />

  </svg>