用svg.js动画化svg.js滤波器

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”没有名为“动画”的函数。如果我尝试创建自己的svg.js动画运行程序并将dLight传递给它，它将导致类似的错误，声明它没有'_prepareRunner‘函数。

另一方面，我可以动画任何属性的'diff‘- diffuseLight过滤器只是很好。这意味着我的麻烦可能是我通过SVG(.)创建distantLightFilter的一种方式造成的。方法，但是我没有找到其他方法来创建它，因为根据这里的最后一篇文章：https://github.com/svgdotjs/svg.filter.js/issues/18 svg.filter.js不再为它提供构造函数。

我在为SVG(.)的结果添加动画方面寻求帮助。以更合适的动画方式调用或创建distantLight过滤器。

Answer 1

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