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

Answer 2

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

这样做，你可以更好地控制一切。

如何只填写SVG的一部分？

2 个答案: