Html 填充SVG的百分比并设置填充动画

目前，我正在进行一个项目，将州数据与另一个国家的数据进行比较。一个数据点是受保护土地的百分比，我想填写与该数据点匹配的州百分比。例如，如果北卡罗来纳州25%的土地受到保护，那么我希望该州25%的土地得到填补。目前，我正在尝试使用svg，我希望在页面加载时进行填充

如果您有任何关于如何做到这一点的建议或资源，我们将不胜感激

我在Illustrator中绘制的示例：

---

嗯，在画布上有一种非常愚蠢的方式…（我假设你的意思是你想要填充一定百分比的内部区域）

步骤1：将每个状态的实体图像转储到画布中

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

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

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

在SVG中可以做到这一点，但您需要手动对形状进行镶嵌，跟踪所有区域，然后手动计算要填充的区域，而这并不能实现我认为您想要的效果——也就是说，将状态填充为一个水容器

当然，另一种解决方案是以所有50个州的形状对透明容器进行3D打印，并用有色水填充到所需的液位。拍摄它们，然后通过SVG过滤器（feImage+feColorMatrix+feComposite）处理该图像，以选择性地填充SVG图像。这可能比学习tesselation（或Canvas）要快。

这是我的两分钱：

您可以有如下线性渐变：

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

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

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

这就是javascript的方式。每个状态都需要一个渐变（可以使用一个组），并且可能需要在每个状态中定义一个具有相同形式的填充的路径对象，以便可以将线性渐变应用于该路径填充属性

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

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

---

注意。

这可以通过简单的css和html完成：

基本上，诀窍是

你需要一个具有透明内场的图像，但是 不透明的外场，如小提琴中的图像。你呢 需要设置

z-index:1

，以便将其放置在填充的

上方

将

filled

和

img

设置为

位置：绝对；宽度：90px；高度：90px在这种情况下

然后，您可以调整

填充div的
高度
，以显示百分比

---

ProgressBar看起来很有前途且易于使用：

下面是一个很好的小提琴示例：

Javascript:

// progressbar.js@1.0.0 version is used
// Docs: http://progressbarjs.readthedocs.org/en/1.0.0/

var bar = new ProgressBar.Circle(container, {
  color: '#aaa',
  // This has to be the same size as the maximum width to
  // prevent clipping
  strokeWidth: 4,
  trailWidth: 1,
  easing: 'easeInOut',
  duration: 1400,
  text: {
    autoStyleContainer: false
  },
  from: { color: '#aaa', width: 1 },
  to: { color: '#333', width: 4 },
  // Set default step function for all animate calls
  step: function(state, circle) {
    circle.path.setAttribute('stroke', state.color);
    circle.path.setAttribute('stroke-width', state.width);

    var value = Math.round(circle.value() * 100);
    if (value === 0) {
      circle.setText('');
    } else {
      circle.setText(value);
    }

  }
});
bar.text.style.fontFamily = '"Raleway", Helvetica, sans-serif';
bar.text.style.fontSize = '2rem';

bar.animate(1.0);  // Number from 0.0 to 1.0

---

这不是一个要求人们为其编写代码的网站you@CodyGuldner我不是在找代码。我一直在互联网上搜寻一些方法，以成功地动画填充到一个百分比的状态，但不能。我只需要有人给我指出正确的方向。不需要编写代码。我几乎总是看到状态数据的颜色编码，而不是部分填充。我会发现部分填充很难快速理解。只是说……当你说“25%的州需要填补”你是什么意思？从左向右滑动状态的条形图？您希望它是边界框宽度的25%吗？填充面积的25%？是否只希望填充颜色为25%不透明-一是缺乏信息；用更多细节编辑您的问题，我将删除否决票，并帮助您回答。@markE您的观点是正确的，这是我将与我的合作伙伴在这个项目上讨论的问题，但我想尝试让它发挥作用，因为我认为这是一种简单、图形化的方式，可以显示该州受保护土地的百分比。

// progressbar.js@1.0.0 version is used
// Docs: http://progressbarjs.readthedocs.org/en/1.0.0/

var bar = new ProgressBar.Circle(container, {
  color: '#aaa',
  // This has to be the same size as the maximum width to
  // prevent clipping
  strokeWidth: 4,
  trailWidth: 1,
  easing: 'easeInOut',
  duration: 1400,
  text: {
    autoStyleContainer: false
  },
  from: { color: '#aaa', width: 1 },
  to: { color: '#333', width: 4 },
  // Set default step function for all animate calls
  step: function(state, circle) {
    circle.path.setAttribute('stroke', state.color);
    circle.path.setAttribute('stroke-width', state.width);

    var value = Math.round(circle.value() * 100);
    if (value === 0) {
      circle.setText('');
    } else {
      circle.setText(value);
    }

  }
});
bar.text.style.fontFamily = '"Raleway", Helvetica, sans-serif';
bar.text.style.fontSize = '2rem';

bar.animate(1.0);  // Number from 0.0 to 1.0