svg 缩放_深入探讨：可缩放矢量图形（SVG）动画

今天，我们将继续有关可缩放矢量图形（SVG）的讨论，而这次我们将与SVG Animation一起使用 。 不过不要害怕，SVG动画相对容易，实际上，在这篇文章中，我们将从基础知识开始。

基本实施

SVG中的动画可以通过<animate>元素完成；

<svg>
<rect width="200" height="200" fill="slategrey">
<animate attributeName="height" from="0" to="200" dur="3s"/>
</rect>
</svg>

从上面的代码片段中可以看到，我们在要受影响的元素内添加了<animate> 。 此<animate>包含以下一些属性；

to ：此属性指定动画方向。 根据attributeName指定的值，结果可能会有所不同。 但是在此示例中，它将扩展height 。

dur ：此属性指定动画的持续时间。 此属性的值以“ 时钟值语法”表示。 例如， 02:33表示2分33秒，而3h等于3小时，但我们并不需要该长，所以我们指定只是持续时间3s或3秒;

<svg>
<circle r="100" cx="100" cy="100" fill="slategrey">
<animate attributeName="r" from="0" to="100" dur="3s"/>
</circle>
</svg>

• 基本实施演示

运动元素

在移动SVG元素时，我们只需要瞄准元素的坐标x和y ；

<svg>
<rect x="0" y="0" width="200" height="200" fill="slategrey">
<animate attributeName="x" from="0" to="200" dur="3s" fill="freeze"/>
</rect>
</svg>

在上面的示例中，我们在3秒钟内将矩形从0移到200 ，该矩形将显示为从左向右水平移动。 另外，如果您仔细看，我们还向<animate>元素添加了另一个属性，即fill 。

这里的fill属性与其他SVG元素中的背景色无关。 此属性指定持续时间结束后动画的动作。 在此示例中，我们freeze了受影响的元素，使其停留在动画结束的位置。

它也类似于<circle>元素，我们可以使用cx或cy ，如下所示：

<svg>
<circle r="100" cx="100" cy="100" fill="slategrey">
<animate attributeName="cy" from="100" to="200" dur="3s" fill="freeze"/>
</circle>
</svg>

• 移动元素演示

动画多个属性

到目前为止，我们仅将一个属性设置为动画对象，但是也可以一次为多个属性设置动画。 以下示例显示了我们如何做到这一点：

<svg>
<circle r="100" cx="110" cy="110" fill="slategrey" stroke="#000" stroke-width="7">
<animate attributeName="r" from="0" to="100" dur="3s"/>
<animate attributeName="stroke-width" from="0" to="10" dur="7s"/>
</circle>
</svg>

如您所见，它的工作方式类似，只是现在我们在<circle>内部有两个<animate>元素，以目标半径和受影响的笔触宽度为目标。

• 多属性演示

遵循路径

在上一篇有关在SVG中使用文本的文章中 ，我们向您展示了如何将文本流到路径。 在SVG动画中也可以执行相同的操作，我们可以为元素设置动画以遵循路径。 这是一个例子。

<svg>

<defs>
<path id="thepath" fill="none" stroke="#000000" d="M0.905,0.643c0,0,51.428,73.809,79.047,166.19s68.095,38.572,107.144-18.095
c39.047-56.667,72.381-92.382,113.333-42.381S335.5,178.5,374,200.5s82-18.5,97.5-33.5"/>
</defs>

<circle r="15" cx="15" cy="15" fill="slategrey">

</svg>

路径最好在<defs>元素内定义，如上所示。 为了使元素遵循路径，我们需要使用<animateMotion>定义动画，并将路径id与<mpath>元素链接，如下所示；

<animateMotion dur="3s">
	<mpath xlink:href="#thepath"/>
</animateMotion>

就是这样，现在让我们来看看它的作用；

• 跟随路径演示

转变

我们还可以使用诸如scale变换，对Animation进行translate和rotate为此，我们将使用<animateTransform> ；

<svg>
<rect width="200" height="200" fill="slategrey">
<animateTransform attributeName="transform" type="scale" from="0" to="1" dur="3s"/>
</rect>
</svg>

SVG的转换与CSS3具有相似的原理，我们在上一篇有关CSS3 2D转换的文章中对此进行了全面的介绍。

• 转型示范

最后的想法

根据您对SVG动画的熟练程度，您可以创建类似这样的内容 。

使用SVG动画而不是Flash动画的优点之一是，它不依赖第三方插件来工作，而且比Flash快得多。 在Adobe停止对Android中的Flash支持之后，您可能想开始尝试这种方法以在下一个网站中提供动画。

其他参考

• SVG动画文档
• 先进的SVG动画技术

• 观看演示
• 下载源

翻译自: https://www.hongkiat.com/blog/scalable-vector-graphics-animation/