自定义进度条 SVG 中的填充百分比区域答案

【问题标题】：Fill Percentage area in a custom Progress Bar SVG自定义进度条 SVG 中的填充百分比区域
【发布时间】：2020-10-07 11:05:37
【问题描述】：

我是 SVG 新手，并坚持做一个小任务。

我想将自定义 SVG 填充到特定百分比。

这是我最初的 SVG

&lt;svg width="233" height="9" viewBox="0 0 233 9" fill="none" xmlns="http://www.w3.org/2000/svg"&gt;&lt;path id="base1" d="M0.0104229 4.53685C0.585564 0.0541843 77.5774 0.498692 134.721 1.59593C171.989 2.31113 232.913 -0.235688 232.75 4.22739C232.525 10.3451 134.045 7.87626 89.0013 7.23356C39.1891 6.52242 -0.727053 10.2816 0.0104229 4.53685Z" fill="#DADBDD"&gt;&lt;/path&gt;&lt;/svg&gt;

这是我的最终 SVG

            <svg width="233" height="9" viewBox="0 0 233 9" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M0.0104229 4.53685C0.585564 0.0541843 77.5774 0.498692 134.721 1.59593C171.989 2.31113 232.913 -0.235688 232.75 4.22739C232.525 10.3451 134.045 7.87626 89.0013 7.23356C39.1891 6.52242 -0.727053 10.2816 0.0104229 4.53685Z" fill="#DADBDD" />
              <mask id="mask0" mask-type="alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="233" height="9">
                <path d="M0.0104229 4.53685C0.585564 0.0541843 77.5774 0.498692 134.721 1.59593C171.989 2.31113 232.913 -0.235688 232.75 4.22739C232.525 10.3451 134.045 7.87626 89.0013 7.23356C39.1891 6.52242 -0.727053 10.2816 0.0104229 4.53685Z" fill="#DADBDD" />
              </mask>
              <g mask="url(#mask0)">
                <ellipse rx="49.9644" ry="25.4799" transform="matrix(0.943377 0.331722 -0.657906 0.7531 34.4845 13.7852)" fill="#ED718F" />
              </g>
            </svg>

我想用用户输入的百分比区域填充它。

我们将不胜感激任何帮助

【问题讨论】：

您是否尝试过自己编写任何 javascript 来完成此任务？如果是这样，请告诉我们您遇到的问题。如果没有，请尝试并报告。
我不明白你为什么要使用椭圆来填充形状。如果您的脑海中有一个蒙版，您可以使用粗线（例如stroke-width="9"）而不是椭圆，您可以屏蔽这条线。然后你可以像在另一个问题中那样更改stroke-dasharray
@enxaneta - 感谢您的指导。实际上，我对 SVG 完全是幼稚的。我没有任何先验知识。我也尝试使用如您在上一个问题中解释的那样，但我无法达到结果。如果你能发布一个解决方案来展示如何做到这一点，那就太好了

标签： javascript html css svg

【解决方案1】：

正如我所评论的：如果您想使用 maska 蒙版，您可以使用粗线（例如 stroke-width="9" - ）而不是椭圆，并且您可以屏蔽这条线。然后你可以根据你拥有的百分比来改变stroke-dasharray。

//the total length of the line which in this case is as long as the shape
let tl = theLine.getTotalLength();
// the percentage for the progress
let xperc = itr.value;

onInput();

itr.addEventListener("input", onInput);

// a function that is setting the value for the stroke-dasharray of the line according with the progress
function onInput() {
  xperc = itr.value;
  theLine.setAttribute("stroke-dasharray", `${tl * xperc} ${tl - tl * xperc}`);
}

<input id="itr" type="range" min="0" max="1" value="0.35" step=".001" /><br>

<svg width="233" height="9" viewBox="0 0 233 9" fill="none" xmlns="http://www.w3.org/2000/svg">
   <defs>
     <path id="theShape" d="M0.0104229 4.53685C0.585564 0.0541843 77.5774 0.498692 134.721 1.59593C171.989 2.31113 232.913 -0.235688 232.75 4.22739C232.525 10.3451 134.045 7.87626 89.0013 7.23356C39.1891 6.52242 -0.727053 10.2816 0.0104229 4.53685Z" />

     <mask id="mask0" mask-type="alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="233" height="9">
       <use xlink:href="#theShape" fill="#fff" />
     </mask>
   </defs>
   
   <use xlink:href="#theShape" fill="#DADBDD" />
   
   <path id="theLine" d="M0 4.5L233 4.5" stroke="#ED718F" stroke-width="9" mask="url(#mask0)" />

 </svg>

【讨论】：