animation - SVG 结合动画

Question

我知道 SVG 的动画功能，但是有没有办法轻松地将图片组合成动画，就像动画 GIF 一样？例如，在一个圆圈之间骑车，

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<circle cx="100" cy="50" r="40" stroke="black"
stroke-width="2" fill="red"/>
</svg>

和一个矩形，

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<rect width="300" height="100"
style="fill:rgb(0,0,255);stroke-width:1;stroke:rgb(0,0,0)"/>
</svg>

Answer 1

如果这就是您想要的效果，您可以淡入和淡出 alpha 值。即淡出圆圈并同时淡入矩形，反之亦然。

将实际形状从一种形状转换为另一种形状可能需要您使用 JavaScript 来完成。