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

【问题标题】：Fill a percentage of an SVG and animate the fill填充一定百分比的 SVG 并为填充设置动画
【发布时间】：2018-02-24 15:21:06
【问题描述】：

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

任何关于如何做到这一点的建议或资源将不胜感激。

我在 Illustrator 中绘制的示例：

【问题讨论】：

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

标签： html css svg

【解决方案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%'来制作效果，当达到所需的百分比时停止每个间隔。

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

问候。

【讨论】：

【解决方案2】：

这可以通过纯 css 和 html 来完成：http://jsfiddle.net/haohcraft/rAPN5/1/

基本上，诀窍是

您需要一个具有透明内场的图像，但不透明的外场，就像小提琴中的图像。和你需要设置z-index:1 以便将其置于filled <div> 之上。
在这种情况下将filled <div> 和img 设置为position: absolute; width:90px; height:90px;。
然后你可以调整filled div的height来显示百分比

【讨论】：

【解决方案3】：

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

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

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

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

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

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

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

【讨论】：

【解决方案4】：

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

这是一个很好的 Fiddle 示例： 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

【讨论】：