一篇文章带你了解SVG 动画元素

SVG 动画元素用于为SVG图形制作动画。动画元素最初是在同步多媒体集成语言（SMIL）中定义的。在动画中，必须指定属性，运动，颜色，动画的开始时间和动画的持续时间的开始和结束值。

让客户满意是我们工作的目标，不断超越客户的期望值来自于我们对这个行业的热爱。我们立志把好的技术通过有效、简单的方式提供给客户，将通过不懈努力成为客户在信息化领域值得信任、有价值的长期合作伙伴，公司提供的服务项目有：空间域名、网络空间、营销软件、网站建设、乌兰察布网站维护、网站推广。

可以对SVG图像中的形状进行动画处理。有几种不同的动画SVG形状的方法。

一、SVG动画

这是一个简单的SVG动画。

 
 
 
 
  
  
  
  
  
  
  
  
    xmlns:xlink="http://www.w3.org/1999/xlink"> 
  
  
  
  
 
  
  
  
  
      
  
  
  
         style="stroke:#ff0000; fill: #0000ff"> 
  
  
  
  
 
  
  
  
  
          
  
  
  
            attributeName="transform" 
  
  
  
  
            begin="0s" 
  
  
  
  
            dur="20s" 
  
  
  
  
            type="rotate" 
  
  
  
  
            from="0 60 60" 
  
  
  
  
            to="360 60 60" 
  
  
  
  
            repeatCount="indefinite" 
  
  
  
  
        /> 
  
  
  
  
     
  
  
  
  
 
  
  
  
  
 
 
 
 

运行效果：

注意元素如何在元素 内部嵌套。正是这个元素使矩形动画化。

二、动画选项概述

这些SVG动画元素中的每一个都设置或设置SVG形状的不同方面的动画。这些动画元素将在本文的其余部分中进行说明。

1. set

该set元素是SVG动画元素中最简单的元素。在经过特定时间间隔后，它只是将属性设置为特定值。因此，形状不会连续进行动画处理，而只是更改属性值一次。

这是一个元素示例：

 
 
 
 
  
  
  
  
 
  
  
  
  
   
  
  
  
  
      
  
  
  
         to="100" 
  
  
  
  
         begin="5s"  /> 
  
  
  
  
 
  
  
  
  
 
  
  
  
  
 
 
 
 

注:

元素在特定时间设置属性的值。要设置的属性名称在attributeName属性中指定。将其设置为的值在to属性中指定。设置属性值的时间在begin属性中指定。

运行效果：（r在5秒钟后将属性设置为100）：

2. attributeType

可以设置形状的CSS属性的动画。如果这样做，则需要将attributeType设置为CSS。如果不提供attributeType属性，则浏览器将尝试猜测要制作动画的属性是XML属性还是CSS属性。

3. animate

animate元素用于为SVG形状的属性设置动画。可以将animate元素嵌套在要应用的形状内。

示例

 
 
 
 
  
  
  
  
 
  
  
  
  
   
  
  
  
  
      
  
  
  
             from="30"  to="470" 
  
  
  
  
             begin="0s" dur="5s" 
  
  
  
  
             fill="remove" repeatCount="indefinite"/> 
  
  
  
  
   
  
  
  
  
 
 
 
 

运行效果：

解析:

此示例将元素的cx属性从值30（“from”属性）设置为值479（“to”属性）的动画。动画从0秒开始（“begin”属性），持续时间为5秒（“dur”属性）。

动画完成后，动画属性将设置回其原始值（fill=“remove”属性设置）。如果希望动画属性保持动画的“到”值(to-value)，请将“fill ”属性设定为“freeze”。动画无限期重复（“repeatCount”属性）。

4. animateTransform

元素不能做到这一点，元素可以为形状的Transform属性设置动画。

例：

 
 
 
 
  
  
  
  
 
  
  
  
  
             
  
  
  
  
                  
  
  
  
                 repeatCount="indefinite" /> 
  
  
  
  
             
  
  
  
  
         
 
 
 

运行效果：

解析：

例中对嵌套transform其中的元素的属性进行动画处理。该type属性设置为rotate（旋转变换功能），表示动画变换将是旋转。在from和to属性设定的参数进行动画，并传递给rotate函数。本示例围绕点100,100从0度旋转到360度。

使正方形的比例动画化。

示例

运行效果：

注：

from 和 to 属性包含通常作为参数传递给scale()转换函数的值。

三、总结

本文基于HTML基础，介绍了SVG中元素。对每一种动画的效果进行详细讲解。每一种动画中都采用静态图解析的方式来呈现动态运用的效果。通过具体的案例分析，能够让读者更好的理解。

欢迎大家积极尝试，有时候看到别人实现起来很简单，但是到自己动手实现的时候，总会有各种各样的问题，切勿眼高手低，勤动手，才可以理解的更加深刻。

代码很简单，希望对你学习有帮助。

本文转载自微信公众号「前端进阶学习交流」，可以通过以下二维码关注。转载本文请联系前端进阶学习交流公众号。

分享题目：一篇文章带你了解SVG 动画元素
网页网址：http://www.csdahua.cn/qtweb/news46/262596.html

网站建设、网络推广公司-快上网，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 快上网