共计 1978 个字符，预计需要花费 5 分钟才能阅读完成。
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
