我正在嘗試使用 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 });
But it causes an error declaring, that 'dLight' has no function named 'animate'. If I try to create my own svg.js animation runner and pass dLight to it, it would cause a similar error, declaring, that it doesn't have a '_prepareRunner' function.
On the other hand I can animate any attribute of 'diff' - the diffuseLight filter just fine. Which means my trouble is probably caused by a way I used to create distantLightFilter via SVG(...) method, but I found no other method to create it, since as according to last post here: https://github.com/svgdotjs/svg.filter.js/issues/18 the svg.filter.js does not provide a constructor for it anymore.
I am looking for help in either adding an animation to result of SVG(...) call or creating a distantLight filter in more proper animatable way.
uj5u.com熱心網友回復：
根據this comment，在diffuseLight 濾鏡類中實際上有一個distantLight（和其他型別的光）濾鏡的建構式。當通過這些建構式初始化時，distanceLight 過濾器確實支持影片。這個答案的所有功勞歸于 Fuzzyma。
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/440966.html
標籤：javascript 动画 svg svg.js
上一篇：在圓形旋轉div上對齊影像
下一篇：將分頁器指示器影片化為按鈕