填充一定百分比的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');

然后使用属性offset：

指定要填充的百分比

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

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

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

我希望至少能给你一些线索。

问候。

Answer 2

嗯，这是Canvas中一种非常愚蠢的方式......（我假设你的意思是你想要填充一定百分比的内部区域）。

步骤1：将每个州的实体图像转储到Canvas

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

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

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

可以在SVG中执行此操作，但您需要手工镶嵌形状，跟踪所有区域，然后手动计算要填充的区域，它不会做我认为您想要的 - 这是让一个州填满像水容器一样？

当然，另一种解决方案是以所有50种状态的3D打印透明容器，用有色水填充到所需的水平。拍摄它们，然后通过SVG滤镜（feImage + feColorMatrix + feComposite）操作该图像以选择性地填充SVG图像。这可能比学习tesselation（或Canvas）更快。

Answer 3

这可以通过普通的css和html：http://jsfiddle.net/haohcraft/rAPN5/1/

来完成

基本上，诀窍是

1. 你需要一个具有透明内场的图像 不透明的外场，就像小提琴里的形象一样。你呢 需要设置z-index:1才能将其置于filled <div>。
之上
2. 在这种情况下，将filled <div>和img设置为position: absolute; width:90px; height:90px;。
3. 然后，您可以调整height的{​​{1}}以显示百分比

Answer 4

ProgressBar看起来很有前途且易于使用： https://kimmobrunfeldt.github.io/progressbar.js/

这是一个很好的小提琴示例： https://jsfiddle.net/kimmobrunfeldt/72tkyn40/

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