SVG动画元素是用来给SVG图形做动画的。动画元素最初是在同步多媒体集成语言(SMIL)中定义的。在动画中，必须指定动画的属性、运动、颜色、开始时间以及动画持续时间的开始和结束值。SVG图像中的形状可以是动画的。有几种不同的方法可以为SVG形状设置动画。1.SVG动画这是一个简单的SVG动画。运行效果：注意元素是如何嵌套在元素内部的。正是这个元素为矩形设置了动画。二。动画选项概述这些SVG动画元素中的每一个都设置或动画SVG形状的不同方面。这些动画元素将在本文的其余部分进行解释。1.setset元素是SVG动画元素中最简单的元素。它只是在经过特定时间间隔后将属性设置为特定值。所以形状不会连续动画，而只是改变一次属性值。这是一个示例元素：注意：元素在特定时间设置属性值。要设置的属性名称在attributeName属性中指定。将其设置为的值在to属性中指定。设置属性值的时间在begin属性中指定。运行效果：（5秒后r设置属性为100）：2.attributeType可以动画化shape的CSS属性。如果这样做，则需要将attributeType设置为CSS。如果未提供attributeType属性，浏览器将尝试猜测要设置动画的属性是XML属性还是CSS属性。3.animateanimate元素用于为SVG形状的属性设置动画。动画元素可以嵌套在要应用的形状内。示例运行效果：分析：这个示例将元素的cx属性从值30（“from”属性）设置为值479（“to”属性）。动画从0秒（“begin”属性）开始，持续5秒（“dur”属性）。动画完成后，动画属性将设置回其原始值（fill="remove"属性设置）。如果你想让动画属性保持动画的“到”值（to-value），设置“fill”属性为“freeze”。动画无限重复（“repeatCount”属性）。4.animateTransform元素不能做到这一点，元素可以为形状的Transform属性设置动画。示例：运行效果:分析:在例子中，动画过程是在嵌套变换中对元素的属性执行的。type属性设置为rotate（旋转变换函数），表示动画变换为旋转。from和to属性中设置的参数被动画化并传递给旋转函数。此示例围绕点100,100从0度旋转到360度。动画正方形的比例。示例运行效果：注意：from和to属性包含通常作为参数传递给scale()转换函数的值。3.小结本文在HTML基础上介绍了SVG中的元素。详细解释了每个动画的效果。在每个动画中，都采用静态图分析的方法来呈现动态应用的效果。通过具体案例分析，读者可以有更深入的了解。欢迎大家积极尝试。有时候看别人实现很简单，但是到了自己实现的时候，总会出现各种各样的问题。不要野心太大，努力理解得更深刻。代码很简单，希望对大家学习有所帮助。本文转载自微信公众号《前端进阶学习交流》，可通过以下二维码关注。转载本文请联系前端进阶学习交流公众号。
