如何只填充SVG的一部分？

IT技术 javascript jquery reactjs svg
2021-04-03 04:29:49

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

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

2个回答

最简单的方法是使用<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"/>

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

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

这样做，您将对一切有更大的控制权。

其它你可能感兴趣的问题
上一篇react-native动态图像 下一篇componentWillMount 用于react功能组件？