如何仅填充 SVG 的一部分？ [复制]答案

【问题标题】：How to fill only a part of the SVG? [duplicate]如何仅填充 SVG 的一部分？ [复制]
【发布时间】：2017-12-22 13:45:18
【问题描述】：

我希望能够将数字/百分比传递给填充 svg 一部分的函数。例如，在一个桶的 svg 中，如果现实生活中的桶被填满 90%，它返回 10 升作为整数，我希望我网站上的桶 svg 被蓝色填满 90%。

我相信您可以将 SVG 分成带有 ID 的部分，并根据函数传递的数字填充每个 ID，然后使用某种 jquery 函数编辑每个部分？但是，我觉得只填充 SVG 的一部分肯定是更受欢迎的事情，但我还没有找到一种直接/简单的方法来做到这一点？

【问题讨论】：

您可以使用带有两个停止点的线性渐变来创建硬边界。止损点位于百分比填充点。

标签： javascript jquery reactjs svg

【解决方案1】：

最简单的方法是使用<linearGradient>。

function setWaterLevel(percent)
{
  document.getElementById("stop1").setAttribute("offset", percent+"%");
  document.getElementById("stop2").setAttribute("offset", percent+"%");
}


document.getElementById("slider").addEventListener("input", function(evt) {
  setWaterLevel(evt.target.value);
});

setWaterLevel(0);

<svg width="300px" viewBox="0 0 100 100">
  <defs>
    <linearGradient id="water" x1="0" y1="1" x2="0" y2="0">
      <stop id="stop1" offset="0%" stop-color="blue"/>
      <stop id="stop2" offset="0%" stop-color="transparent"/>
    </linearGradient>
  </defs>

  <polygon points="0,0, 100,0, 80,100, 20,100"
           fill="url(#water)" stroke="black"/>
</svg>

<br>
<input id="slider" type="range" min="0" max="100" step="10" value="0"/>

【讨论】：

谢谢。但是在我看来，当您的offsets 等于50% 时，由于其不规则的形状，您没有填充玻璃中水的50%。有没有办法按比例填充该区域？
@floatingpurr 是的。不要将停止设置为与传入的相同百分比。相反，计算适合形状的正确停止百分比，并改用它。但这个计算是你的责任。他们不是一种自动的方式，可以做到这一点 - 如果这是你的要求。
很好的评论提醒了单一责任原则。再次感谢。
@floatingpurr 我不确定我是否理解您的评论。我的意思是你需要弄清楚如何将“百分比满”值转换为适合渐变的百分比。对于像这个桶这样的简单形状，制作（或伪造）不会那么难。但对于某些形状来说，它会变得非常困难。 :-/
是的，非常整洁！对不起，如果我的评论不清楚。我指出了你提示的底线：渐变只是管理停止点。任何其他处理都应分开处理。

【解决方案2】：

您最好的解决方案可能是使用两个<canvas> 标签并将填充部分写在容器部分上。这样您就可以分别计算，而不必担心部分 SVG 文件。

这样做，您将对所有事情有更大的控制权。

【讨论】：