填充一定百分比的SVG并为填充设置动画

Question

目前,我正在开展一个项目,将州数据与来自其他国家/地区的数据进行比较.一个数据点是受保护土地的百分比,我想填写与数据点匹配的状态的百分比.因此,例如,如果25%的北卡罗来纳州受到保护,那么我希望25%的州填补.目前,我正在尝试使用svg,我希望填充发生在页面加载.

任何有关如何执行此操作的建议或资源将不胜感激.

我在Illustrator中绘制的示例:

Answer 1

这是我的两分钱：

你可以有一个像这样的线性渐变：

<linearGradient y2="0%" x2="100%" y1="0%" x1="0%" id="F1g"><stop stop-color="#00FF00" offset="0%" id="F1gst1"/><stop stop-color="#FFFFFF" offset="0%" id="F1gst2"/></linearGradient>

然后取第一个停止元素：

var firstStop = document.getElementById('F1gst1');

然后指定您想要填充的百分比以及属性偏移量：

percentage = '35%'; firstStop.setAttribute('offset',percentage);

这就是 javascript 中的方式。您需要为每个状态设置一个渐变（可以使用组），并且也许您需要定义一个路径对象，并在每个状态内以相同的形式进行填充，因此您可以将线性渐变应用于该路径填充属性。

如果需要动画，可以设置一个setInterval，每x毫秒添加一个“1%”来实现效果，并在达到所需百分比时停止每个间隔。

我希望这至少给了你一个线索。

问候。

Answer 2

好吧，这是 Canvas 中的一个相当愚蠢的方法......（我假设你的意思是你想要填充一定比例的内部区域）。

第 1 步：将每个状态的实体图像转储到 Canvas 中

步骤 2：计算非零像素的数量

步骤 3：使用边缘提取卷积提取边缘

步骤 4：对于每条线，在形状内的每一行内水平迭代，以像素为单位着色，直到达到您想要描绘的形状的 x%。

在 SVG 中可以做到这一点，但是您需要手动细分形状，跟踪所有区域，然后手动计算要填充的区域，并且它不会做我认为您想要的事情 - 即有一个状态像水容器一样填满吗？

当然，另一种解决方案是 3D 打印所有 50 个州形状的透明容器，并在其中填充有色水至所需的水平。拍摄它们，然后通过 SVG 滤镜（feImage + feColorMatrix+feComposite）操纵该图像以有选择地填充 SVG 图像。这可能比学习曲面细分（或画布）更快。