SVG 动画

SVG 动画
主要内容

SVG 是什么?
SVG 的一些常用用途
SVG 的基本结构

CSS 结合 SVG 生成动画

圆环动画
logo 描边动画

SVG 的动画元素

SVG 是什么？
SVG ，可缩放矢量图形（Scalable Vector Graphics），是一种用来描述二维矢量图形的 XML 标记语言。 简单地说，SVG 面向图形，HTML 面向文本。
SVG 特点

SVG 与 JPEG 和 GIF 图像比起来，尺寸更小，且可压缩性更强。
SVG 是矢量的，可伸缩的，适用多种分辨率。
SVG 是开放的标准，本质是纯粹的 XML ，可以被非常多的工具读取和修改。
SVG 图像中的文本是可选的，同时也是可搜索的。

SVG 兼容性
IE9+，主流环境基本都能支持。具体参见
SVG 的一些常用用途

制作iconfont

作为图片文件img src属性引用，css background-image引用。
SVG作为图像引用时，大多数浏览器不会加载SVG自身引用的文件(其他图像，外部脚本，字体文件等)，依据浏览器的安全策略，SVG中定义的脚本也可能不会执行。

作为应用程序SVG文件也可以作为<object>元素的data属性引入HTML中。注意，MIME type必须是image/svg+xml。
<object data=”image.svg” type=”image/svg+xml”>
…
</object>

混合文档可以直接将<svg>嵌入到XHTML或者HTML5文档中。嵌入到XHTML需要为<svg>指定命名空间（xmlns），嵌入到HTML5则可以省略，解析器会自动识别<svg>。在 HTML 内容中应用 SVG 效果

SVG 的基本结构
SVG 跟标签
<svg xmlns=”http://www.w3.org/2000/svg” version=”1.1″ width=”1024px” height=”1024px”>
</svg>
SVG 基本形状
1. 矩形（rect）
<rect x=”60″ y=”10″ rx=”20″ ry=”40″ width=”100″ height=”100″/>

2. 圆形（circle）
<circle cx=”75″ cy=”75″ r=”60″/>

3. 椭圆（ellipse）
<ellipse cx=”75″ cy=”75″ rx=”30″ ry=”20″/>

4. 线条（line）
<line x1=”10″ x2=”50″ y1=”110″ y2=”150″ stroke=”black” stroke-width=”3″/>

5. 折线（polyline）
<polyline points=”60 60, 70 120, 80 130, 70 70″ style=”fill: none;stroke-width: 2;stroke: black;”/>

6. 多边形（polygon）
polygon和折线很像，它们都是由连接一组点集的直线构成。不同的是，polygon的路径在最后一个点处自动回到第一个点。
<polygon points=”50 160, 55 180, 70 180, 60 190, 65 205, 50 195, 35 205, 40 190, 30 180, 45 180″ style=”fill: none;stroke: black;”/>

7. 路径（point）
<path d=”M 20 230 Q 40 205, 50 230 T 90230″ style=”fill: none;stroke: black”/>

路径绘制命令
SVG常用元素还有<g>组合，常用属性fill填充，stroke线条颜色，stroke-width线条粗细等等，具体参考MDN文档。 SVG 元素参考SVG 属性参考
CSS 结合 SVG 属性生成动画
stroke-dasharray可控制用来描边的点划线的图案范式。stroke-dashoffset 属性指定了dash模式到路径开始的距离
圆环动画
画圆环的动画效果，可用于提示加载百分比，倒计时等场景。https://codepen.io/wishingtre…
logo 描边动画
webank描边动画
SVG 的动画元素
兼容性：ie死都不支持，移动端友好。具体参见

1.set
set元素不能产生动画效果，可以实现基本的延迟功能。就是指：可以在特定时间之后修改某个属性值（包括本身的XML属性和CSS属性值）。
2.animate
attributeName 变动的属性的属性名。from 变动的初始值。to 变动的终值。dur 动画的持续时间。举个栗子形状补间动画
3.animateTransform
attributeName固定为transform，可针对transform的相关属性生成动画，不详细介绍了。
4.animateMotion（线性路径动画）
animateMotion 元素可以让SVG各种图形沿着特定的path路径运动。地球围绕太阳旋转贴合路径弧度运动
SVG动画库：1.SVG-Morpheus使用参考演示参考2.snap.svg