Animation SVG与动画的结合

我知道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>

如果您的SVG将在web浏览器中查看，您可以通过使用JavaScript操纵节点来设置它的动画。My就是一个例子。

如果你想要的是效果，你可能会淡入淡出alpha值。i、 e同时淡出圆形和矩形，反之亦然

---

从一个到另一个的实际形状转换可能需要使用JavaScript来完成。

如果使用

路径

元素而不是基本的矩形和圆形元素，则可以使用路径变形来使用SVG动画将一个形状变形为另一个形状

这是相当不错的

---

根据您的用例，此解决方案可能有一些缺点。您放入动画中的“图片”不仅需要是路径元素，还需要一些其他约束，例如路径元素需要具有相同数量的顶点，并且它们需要具有相同的类型。

Nice！但是，如果可能的话，我正在寻找一个纯SVG解决方案（不必将所有内容缩减为零并在顶部添加内容），这可能是一个很好的解决方案。使用set功能，它甚至不必褪色。使矩形消失的示例如下：