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>
I am aware of SVG's animation capabilities, but is there a way to easily combine pictures into animations, like in animated GIFs? For example, cycling between a circle,
<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>
and a rectangle,
<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>
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（3）
好吧，如果这就是您想要的效果，您可以淡入和淡出 alpha 值。即淡出圆圈并同时淡入矩形，反之亦然。
将实际形状从一种形状转换为另一种形状可能需要您使用 JavaScript 来完成。
Well you could possibly fade the alpha values in and out if that's the effect you are after. i.e fade out the circle and fade in the rect at the same time and vice-versa.
Having the actual shape transform from one to another would probably need to be done by you using JavaScript.
如果您的 SVG 将在 Web 浏览器中查看，您可以通过使用 JavaScript 操作节点来为其设置动画。我的“网站”就是一个例子。
If your SVG will be viewed in a web browser, you can animate it by manipulating the nodes with JavaScript. My "web site" is an example of this.
如果您使用
path元素而不是基本的矩形和圆形元素，则可以使用路径变形通过 SVG 动画将一种形状变形为另一种形状。carto.net 上有一个非常好的示例。
根据您的使用案例，此解决方案可能存在一些缺点。放入动画中的“图片”不仅需要是路径元素，还有一些更多的限制，例如路径元素需要具有相同的顶点数，并且它们需要具有相同的类型。
If you would use
pathelements instead of the basic rectangles and circle elements it would be possible to use path morphing to morph one shape into another using SVG animations.There is pretty good example of this at carto.net.
Depending on your use case there might be a few drawbacks with this solution. The "pictures" that you put into the animation not only needs to be path elements, there are also some more constraints such as that the path elements need to have the same number of vertices and they need to be of the same type.