将SVG结合到动画中

我了解SVG的动画功能，但是有没有一种方法可以轻松地将图片合并为动画，就像在动画GIF中一样？例如，一个圆之间循环，将SVG结合到动画中

<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>

来源

2011-10-04 Hypercube

那么你可能会淡入阿尔法值进出，如果这是你以后的效果。即淡出圆圈并同时淡入矩形，反之亦然。

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

来源

2011-10-04 03:57:05 smitec

这可能是一个很好的解决方案。使用设置的功能，它不会褪色。 – Hypercube

使矩形消失的示例： – Hypercube

如果你的SVG将在Web浏览器中查看，可以通过使用JavaScript操纵节点制作动画。我的"web site"就是这样的一个例子。

来源

2011-10-04 03:55:52 Glyph

不错！但是，我正在寻找一个纯SVG解决方案，如果可能的话（一切都缩小到零，并在顶部添加东西）。 – Hypercube

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

有不错的example of this at carto.net。

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

来源

2011-10-04 10:57:54

太棒了，谢谢！ – Hypercube

将SVG结合到动画中

回答

相关问题