填充一个百分比的SVG和动画填充 [英] Fill a percentage of an SVG and animate the fill

问题描述

目前，我正在开发一个项目，它正在比较状态数据与来自其他国家的数据。一个数据点是受保护土地的百分比，我想填充与数据点匹配的状态的百分比。例如，如果25％的北卡罗来纳州受到保护，那么我想要25％的州填补。目前，我想使用svg，我想填充发生在页面加载。

有关如何执行此操作的任何建议或资源将非常感谢。

编辑：

示例在Illustrator中绘制：

解决方案

这是我的两分钱：

您可以使用如下的线性渐变：

 < linearGradient y2 =0 ％x2 =100％y1 =0％x1 =0％id =F1g>< stop stop-color =＃00FF00offset =0％id =F1gst1/ >< stop stop-color =＃FFFFFFoffset =0％id =F1gst2/>< / linearGradient> 
  

然后取第一个停止元素：

  var firstStop = document.getElementById（'F1gst1'）; 
  

然后使用属性offset指定要填充的百分比：

  percentage = '35％'; firstStop.setAttribute（'offset'，percentage）; 
  

这是javascript中的方式。你需要一个梯度为每个状态（你可以使用一个组），也许你将需要定义一个路径对象，每个状态的填充内部具有相同的形式，所以你可以应用线性渐变到该路径填充属性。

如果您需要动画，您可以设置setInterval，并且每x毫秒添加一个1％以产生效果，并在所需的百分比

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

Currently, I am working on a project that is comparing state data with data from another country. One data point is percentage of protected land and I want to fill the a percentage of the state that matches the data point. So for example, if 25% of North Carolina is protected, then I want 25% of the state to fill. Currently, I am trying to use an svg and I want the fill to happen on page load.

Any suggestions or resources on how to do this would be greatly appreciated.

Edit:

Example I drew up in Illustrator:

解决方案

Here are my two cents:

You can have a linear gradient like this:

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

Then take the first stop element:

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

And then assign the percentage you want fill, with the attribute offset:

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

And that is the way in javascript. You need a gradient for every state (you can use a group) and maybe you will need to define a path object with a fill inside every state with the same form, so you can apply the linear gradient to that path fill attribute.

If you need an animation, you can set a setInterval, and add an '1%' every x miliseconds to make the effect, and stop every interval when the desired percentage is reached.

I hope this at least have given you a clue.

Regards.

这篇关于填充一个百分比的SVG和动画填充的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！