如何只填充SVG的一部分？

Question

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

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

Answer 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"/>