使用svg.js制作distantLight过滤器的动画

Question

我正在尝试使用SVG.js创建一个简单的SVG动画。我想要的结果相当于：

<filter">
<feDiffuseLighting result="diffOut" in="SourceGraphic" diffuseConstant="1.2"
lighting-color="white">
<feDistantLight azimuth="240" elevation="100">
<animate attributeName="elevation"
values="100; 20" dur="7s"
/>
</feDistantLight>
</feDiffuseLighting>
<feComposite in="SourceGraphic" in2="diffOut" operator="arithmetic"
result="diffPointOut" k1="1" k2="0" k3="0" k4="0" />
</filter>

到目前为止，我可以通过使用svg.js和svg.filter.js:复制除动画之外的所有内容

foreground.filterWith(function (filter) {
diff = filter.diffuseLighting().attr({
'lighting-color': 'white',
'diffuseConstant': 1.2
});
dLight = SVG('<feDistantLight azimuth="240" elevation="100"/>');
diff.add(dLight);
filter.composite(filter.source, diff)
.attr({
operator: 'arithmetic',
k1: 1, k2: 0, k3: 0, k4: 0
});
});

这段代码在结果DOM中生成完全相同的过滤器，而不使用动画要添加我尝试使用的动画：

dLight.animate(7000, 0, 'now').attr({ "elevation": 20 });

但它会导致一个错误，声明"dLight"没有名为"animate"的函数。如果我尝试创建自己的svg.js动画运行程序并将dLight传递给它，它会导致类似的错误，声明它没有"_prepareRunner"函数

另一方面，我可以为"diff"的任何属性设置动画，diffLight过滤器也很好。这意味着我的麻烦可能是由我通过SVG(…(方法创建distantLightFilter的方法引起的，但我没有找到其他方法来创建它，因为根据这里的上一篇文章：https://github.com/svgdotjs/svg.filter.js/issues/18svg.filter.js不再为其提供构造函数。
我正在寻找在SVG(…(调用的结果中添加动画或以更合适的可设置动画的方式创建distantLight过滤器的帮助。

Answer 1

根据这个注释，diffuseLight过滤器类中实际上有一个distantLight(和其他类型的光(过滤器的构造函数。当通过这些构造函数初始化时，distantLight过滤器确实正确地支持动画。这个答案的全部归功于Fuzzyma。