svg系列：1.svg基础知识 & 不一样的svg动画世界

jiezi

6 年前

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”>

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 路径的描述属性