如何只填写SVG的一部分？

Question

我希望能够将数字/百分比传递给填充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文件。

这样做，你会对所有事情有更多的控制权。