如何从左侧开始按百分比向圆环SVG路径填充颜色？

我有一个甜甜圈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>

/>

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

基本上我想要这个：

---

（来源：）

正如我所评论的，有一种更简单的方法来实现这一点。将路径简化为

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“

---

正如我所评论的，有一种更简单的方法可以实现这一点。您可以简化路径到

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“

有一种更简单的方法来实现这一点。您可以将路径简化为`d=“M 17.72,74.28a 40,40,0,1,1,56.56,0”`并使用

fill=“none”

和

stroke=“10”“

例如。对于红色路径，使用与之前相同的

d

，并使用

笔划dasharray

减少路径的外观长度。如果使用此

d

路径的总长度为188.53，则可以使用188.53/2=94.265:

stroke dasharray=94.265“

谢谢您的回答。这对我很有帮助，但是

stroke-dasharray

attribute正在创建破折号，我不希望这样。我想在黑色路径上使用单线。这里是最新的，有一个更简单的方法来实现这一点。您可以将路径简化为`d=“M 17.72,74.28a 40,40,0,1,1,56.56,0”`并使用

fill=“none”

和

stroke=“10”

。对于红色路径，使用与之前相同的

d

，并使用

笔划dasharray

减少路径的外观长度。如果使用此

d

路径的总长度为188.53，则可以使用188.53/2=94.265:

stroke dasharray=94.265“

谢谢您的回答。这对我很有帮助，但是

stroke-dasharray

attribute正在创建破折号，我不希望这样。我想在黑色路径上使用单线。这里有一个最新的想法，认为圆是360度的。若我想将红色路径设置为黑色路径上的45度，我该怎么做。因为这个方法和我想要的非常相似，但是这个方法会创建破折号。我已经更新了我的答案。请上厕所，让我知道这是否是你需要的，这是令人兴奋的！这是一个很好的解决方案。非常感谢你。工作得很有魅力！您是如何计算路径的总长度的？我还在学习过程中。SVG和path标记太复杂了……javascript中的第一行代码就是这样做的：

let totallength=base.getTotalLength（）其中base是def中用于黑色和红色弧的路径，认为该圆为360度。若我想将红色路径设置为黑色路径上的45度，我该怎么做。因为这个方法和我想要的非常相似，但是这个方法会创建破折号。我已经更新了我的答案。请上厕所，让我知道这是否是你需要的，这是令人兴奋的！这是一个很好的解决方案。非常感谢你。工作得很有魅力！您是如何计算路径的总长度的？我还在学习过程中。SVG和path标记太复杂了……javascript中的第一行代码就是这样做的：
let totallength=base.getTotalLength（）其中base是defs中用于黑色和红色弧的路径