Question

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

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

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

Answer 1

如果你要使用不同的泛滥效果，那么你需要做多个过滤器（尽管使用200种不同的不透明度设置似乎有点过分）。（如果它对你有任何帮助，泛洪不透明是一个属性，可以通过CSS设置样式。）

添加：还要记住，您可以使用SMIL＆lt; animate＆gt;制作动画。元素 - 如果这就是你进行插值的原因

SVG过滤器和插值

1 个答案: