目前，我正在开展一个项目，将州数据与另一个国家的数据进行比较。一个数据点是受保护土地的百分比，我想填写与该数据点匹配的州的百分比。例如，如果北卡罗来纳州 25% 的地区受到保护，那么我希望该州 25% 的地区得到保护。目前，我正在尝试使用 svg，并且希望填充在页面加载时发生。
任何有关如何做到这一点的建议或资源将不胜感激。
我在 Illustrator 中绘制的示例：
这是我的两分钱：
你可以有一个像这样的线性渐变：
<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%”来实现效果，并在达到所需百分比时停止每个间隔。
我希望这至少给了你一个线索。
Regards.