SVG意为可缩放矢量图形(Scalable Vector Graphics)，是使用XML来描述二维图形和绘图程序的语言。
SVG简介
- SVG指可伸缩矢量图形
- SVG用来定义用于网络的基于矢量的图形
- SVG使用XML格式定义图形
- SVG图像在放大或改变尺寸的情况下其图形质量不会有所损失
SVG在HTML中
SVG文件可通过标签嵌入HTML中：
- embed
- object
- iframe
- 直接嵌入
embed
使用ebmed标签嵌入SVG，主流浏览器都支持，并且允许使用脚本。
例如：
object
使用object标签嵌入SVG，主流浏览器都支持，但不允许使用脚本。
例如:
iframe
使用iframe标签嵌入SVG，主流浏览器都支持，并且允许使用脚本。
例如:
直接嵌入
例如:
SVG路径
path标签用来定义路径
以下属性用来定义路径属性：
- M = moveto 移动到
- L = lineto 画线到
- H = horizontal lineto 水平线到
- V = vertical lineto 垂直线到
- C = curveto 三次贝塞尔曲线
- S = smooth curveto 光滑三次贝塞尔曲线
- Q = quadratic Belzier curve 二次贝塞尔曲线
- T = smooth quadratic Belzier curveto 光滑二次贝塞尔曲线
- A = elliptical Arc 椭圆弧
- Z = closepath 关闭路径
SVG路径动画
基于path的不同属性我们可以画出各种各样的路径，再结合stroke可以是线条动起来。
先介绍两个属性：
stroke-dasharray：指定画出路径每段的长度和各段之间空隙的长度
stroke-dashoffset：指定每段的起始偏移量
利用CSS3动画属性动态改变偏移量就可以使线条产生动画效果。
CSS
.svg path{
stroke-dasharray: 600 600;
animation: dash ease 2s 0s infinite;
}
@keyframes dash{
from{
stroke-dashoffset: 0;
}
to{
stroke-dashoffset: 600;
}
}
SVG
效果
总结
先简单介绍一些SVG知识，了解SVG动画的原理，通过这些属性可以帮助我们构建更丰富的UI界面。
