使用 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' 的任何属性设置动画 - diffuseLight 过滤器就好了。这意味着我的麻烦可能是由我过去通过 SVG(...) 方法创建 distantLightFilter 的方式引起的，但我没有找到其他创建它的方法，因为根据最后 post 此处：https://github.com/svgdotjs/svg.filter.js/issues/18 svg.filter.js 不再为其提供构造函数。
我正在寻求帮助，以将动画添加到 SVG(...) 调用的结果或以更合适的动画方式创建 distantLight 滤镜。

Answer 1

根据 there is actually a constructor for a distantLight (and other types of light) filter inside the diffuseLight filter class. When initialised via those constructors distantLight filter does support animations properly. All credit for this answer goes to Fuzzyma。

使用 svg.js 动画 distantLight 滤镜

Animating distantLight filter with svg.js

javascript

animation

svg

svg.js