SVG 过滤器和插值答案

【问题标题】：SVG filters and interpolated valuesSVG 过滤器和插值
【发布时间】：2014-08-21 19:13:10
【问题描述】：

我正在使用 d3.js 创建可视化效果，我想要实现的效果依赖于使用 feFlood 和 feBlend 的过滤器。对于可视化中的每个路径，我需要为 feFlood 过滤器原语插入不同的 flood-opacity 值。过滤器非常简单：

<filter id="multiplyOverlay" x="0" y="0" width="100%" height="100%">
    <feFlood flood-color="steelblue" flood-opacity=".1" />
    <feBlend mode="multiply" in2="SourceGraphic"/>
</filter>

我不相信有任何方法可以将值传递给过滤器。我是否需要使用适当的flood-opacity 值为可视化中的每个路径（大约 200 个）创建一个新过滤器？还是有其他方法可以实现这一点？

【问题讨论】：

标签： javascript svg d3.js data-visualization svg-filters

【解决方案1】：

如果您要使用不同的泛光不透明度，那么您需要执行多个过滤器（尽管使用 200 种不同的不透明度设置似乎有点过头了）。（如果对您有任何帮助，flood-opacity 是一个属性，可以通过 CSS 设置样式。）

添加：还请记住，您可以使用 SMIL 元素为事物设置动画 - 如果这就是您进行插值的原因

【讨论】：