1、 svg知识扫盲
svg简介
SVG(Scalable Vector Graphics)，可缩放矢量图形，具有放大缩小不失真的特性，可以用来创建矢量图。
SVG1.1 于 2003 年 1 月 14 日成为 W3C 推荐标准。
SVG本质上是用XML语言描述的，所以它可以和DOM结构一样被CSS和JS编程控制，通过连续地改变SVG图形属性就可以创建SVG动画。
SVG可用文本编辑器编辑，也可通过Adobe Illustator等专业编辑软件处理。
SVG文件可单独使用，使用XML定义并包含DTD声明：
<?xml version=”1.0″ standalone=”no”?>
<!DOCTYPE svg PUBLIC “-//W3C//DTD SVG 1.1//EN”
“http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd”>
<svg xmlns=”http://www.w3.org/2000/svg” version=”1.1″>
<circle cx=”100″ cy=”50″ r=”40″ stroke=”black”
stroke-width=”2″ fill=”red” />
</svg>
在现代浏览器中，我们可以直接在HTML代码中嵌入SVG代码：
<div class=”svg-wrap”>
<svg xmlns=”http://www.w3.org/2000/svg” version=”1.1″>
<circle cx=”100″ cy=”50″ r=”40″ stroke=”black” stroke-width=”2″ fill=”red” />
</svg>
</div>
<svg>元素
即<svg>标签，svg有三个视图相关的属性：
viewport 即用x, y, width, height定义的页面矩形区域
viewbox 定义用户视野的位置和大小，如 viewBox =’20 20 100 100′ 定义了起始坐标为(20, 20)，宽高为100的矩形区域，演示地址
preserveAspectRatio 保持横纵比，当viewport和viewbox 长宽比不一致时，该属性可以控制2者的对齐和裁剪情况，演示地址
用法
<align> [<meet or slice>]
align: xMid xMin xMax 和 YMid YMin YMax 自由组合
e.g. preserveAspectRatio = “xMidYMid meet”
基本图形元素
svg绘制基本图形元素，只要明确好各个参数的含义，应该很简单，老铁们快速过一遍：
矩形，rx，ry定义圆角
<rect x=”10″ y=”10″ width=”100″ height=”100″ rx=”5″ ry=”5″ fill=”yellow”></rect>
圆 cx cy 定义圆心
<circle cx=”50″ cy=”50″ r=”40″ fill=”yellow”></circle>
椭圆 rx ry 定义长轴半径、短轴半径
<ellipse cx=”50″ cy=”50″ rx=”40″ ry=”20″ fill=”yellow”></ellipse>
线段
<line x1=”10″ y1=”10″ x2=”90″ y2=”90″ stroke=”yellow”></line>
折线 点与点之间用空格隔开
<polyline points=”50,10 80,90 10,30 90,30 20,90″ stroke=”#fb3″ fill=”transparent”></polyline>
多边形
<polygon points=”50,10 80,90 10,30 90,30 20,90″ stroke=”#fb3″ fill=”transparent”></polygon>
路径，可以绘制上述所有图形 d属性定义路径的具体形式
<path d=”M10,10 C40,5 40,140 100,100″ stroke=”#fb3″ stroke-width=”4px”></path>
文字 dx dy是相对起点坐标的偏移量，rotate指定单个文字的旋转
<text x=”10″ y=”10″ dx=”10″ dy=”10″ textLength=”100″ rotate=”20″>示例文字</text>
其他常用标签元素
主要有
<g> <defs> <symbol> <use> <clipPath> <linearGradient> 等
可以参考这个 codepen 演示 来理解。
2、svg动画
why svg？如果你问我为什么用svg做动画，而不是其他技术，那可以告诉你以下几点：
svg本质上是一种图形绘制技术，广泛用于web矢量图绘制，适用于多数商业logo，卡通图片制作。因此高清屏幕使用svg可避免模糊现象。（与此相关，canvas则是用来绘制点阵图（或者说位图），两者是相对的）
基于不规则path的动画效果，如路径描边（path draw），路径变体（path morph），沿路径运动（path move）等，这是目前其他技术不太容易处理的。
除了path，svg也支持渐变、裁切、遮罩等特性，在其他技术遇到瓶颈时，不妨考虑svg。这里是一个用到大量svg技术的网站 welikesmall，可以参考里面的效果实现。
轻量，且兼容性好。svg于2003年已成为web标准，通常几十行svg代码就可解决特定的需求。svg在未来也有着可观的发展前景。
SVG + SMIL 实现动画
SMIL 动画 Demo基于SMIL标准，可以直接借助svg animate标签实现动画。
目前SMIL动画多数都可以用css3来代替，但要让某个物体沿着特定路径移动，css3就无能为力了（除了chrome46新增的motion-path）。
遗憾的是，SMIL标准正逐渐衰落，并不会成为未来世界的主流，它正逐渐被css3所代替，所以我们只需简单了解svg中的SMIL特性即可。
<set>
set 元素可以在特定时间后，瞬间修改图形元素的某个属性值，它不是动画，是一种突变。
<animate>
animate元素定义在图形元素里面，它可以改变图形某一个属性的值，需要指定起始值和结束值（from to）以及持续时间（dur）
<animateMotion>
animateMotion它可以引用一个事先定义好的动画路径，用<mpath>元素引用，让图形按路径定义的方式运动。
<animateTransform>
类似于css transform，它可以改变图形的transform属性，e.g. rotate | translate | scale | skewX | skewY
svg + css3 或 svg + js 实现动画
snap.svg 动画 Demo通过css或js修改svg图形的属性也可实现动画，这种方式也是目前最常用的。这就涉及到其他的知识点了，css3的transform，transition，animation等，js的setInterval和requestAnimationFrame。除了用原生代码控制，我们当然也可以用业界已经成熟的动画库来操作属性：
anime.js （15kb左右，github 20k star, 最轻量，推荐使用）
velocity.js (50kb左右，不依赖jq，号称比css动画快)
snap.svg.js (svg中的jQuery，专业操作svg，80kb左右)
GreenSock (100kb左右，动画功能齐全，部分插件收费)
// animejs api
var animation= anime({
targets: ‘#svg-path’, // 目标元素，支持css选择器，dom，dom数组等
opacity: ‘0’, 要变化的属性，这里是opacity属性，可以是任何css或svg属性
duration: 3000,
delay: 1000,
easing: ‘easeInOutQuart’,
loop: true,
direction: ‘reverse’, // 动画方向：逆向播放
complete: function(anim) {
}
});
常见的图形属性如下所示：
fill 定义填充颜色
fill-opacity 定义填充透明度
stroke 边框颜色
stroke-width
stroke-opacity
stroke-linecap 单条线端点样式 butt | round | square
stroke-dasharray 定义虚线样式，间隔定义实线和空白的长度，如 10 5 5 10
stroke-dashoffset 设置虚线描边偏移量，使图案向前移动
opacity
font-size | font-weight | font-family | font-style | text-decoration 同CSS
transform | transform-origin 同CSS
rotate svg独有，定义 单个文字 的旋转角
d 路径的描述属性
3、相关工具网站
由于svg技术过于强大，此文章只是抛砖引玉，更多精髓等待大家发掘：
method draw | 在线制作svg图片svgo | 强大的svg压缩工具svg trick | 一个研究svg技术的网站vivus | 制作svg路径动画的js库snap.svg.js | svg中的jquerysnap.svg中文文档鑫空间，鑫生活 | 博主对svg和css研究很深
发表回复