SVG 扬帆起航

本文不能让你成为 SVG 大神,但是能让你知道、了解他「揭开神秘面纱」

基础认知

SVG「Scalable Vector Graphics」表示「可缩放矢量图形『放大不模糊』」面向未来「W3C 标准」。
基本的 SVG 文档由 <svg> 根元素和 基本形状元素 构成
作为 XML 的一种方言,SVG 必须正确的绑定命名空间(在 xmlns 属性中绑定)。命名空间速成 获取更多信息
SVG 文件全局有效的规则是 「后来居上」,越后面的元素越可见。

能做什么

动画、图形、渐变、旋转、滤镜、JavaScript 接口、各种超酷的动画…

和 HTML 使用的几种方式

<img src="xxx.svg" height="10" width="10" />
不能使用JS来控制

.svg { background-image: url(xxx.svg);}
最好不使用 base64 格式化 SVG「阻塞其它资源」、不能使用 JS 控制

<iframe src="xxx.svg">Not support iframe</iframe>

<embed type="image/svg+xml" src="xxx.svg" />

<object type="image/svg+xml" data="xxx.svg">Not support SVG</object>
能使用JS来控制「推荐方式」

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10">…</svg>
节省 HTTP 请求,能使用 JS 控制,不能被浏览器缓存

坐标系统

看图说话「原点在左上角」:
svg-coordinate

viewBox

1
2
3
<svg width="400" height="300" viewBox="0,0,40,30" style="border:1px solid #cd0000;">
<rect x="10" y="5" width="20" height="15" fill="#cd0000"/>
</svg>

viewBox demo

动画理解:
viewBox-1
viewBox-2

深度阅读 - viewBox

CSS、JS 与 SVG

内敛样式

1
2
3
4
5
6
7
8
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 68 65">
<style type="text/css">
<![CDATA[
.red { strock: #f00; }
]]>
</style>
<path class="red" d="M10 10v20" />
</svg>

外链样式

1
2
3
4
<?xml-stylesheet type="text/css" href="xxx.css"?>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 68 65">
<path class="cls" d="M42 27v-20" />
</svg>

JS 操作 SVG

如果 SVG 代码作为 DOM 在 HTML 内部,可以向平常一样操作 DOM 操作 SVG
如果是使用 <object> 你可以使用 contentDocument 来控制它 SVG

注意

  1. <img>background-image 形式的 SVG 不支持「外链 CSS、JS」
  2. 内敛 CSS 和 JS 最好放在 <![CDATA[]]> 之中

SVG 基础元素

  • <svg>:SVG 的根元素,可以相互嵌套
  • <g>:将 SVG 中的元素进行分组操作,分组后可以看成一个单独的形状,统一转换
  • <defs>:用于定义在 SVG 中可重用的元素,def 元素不会直接展示出来,可以通过 use 元素来引用
  • <use>:通过它来复用 def 元素,也包括 <g>、<symbol> 元素,使用 <use xlink:href="#id"/> 调用
  • <text>:文本节点,可以实现 word 中的那种「艺术字」
  • <image>:在 SVG 中嵌套图片,可以对图片做对应的处理

SVG 形状元素

来张图压压惊:
svg-element

点我查看 SVG 元素的基本 DEMO

<path />

别说话,先举个 🌰 ,一起感受一下 path:点我

基于 path 的不同属性,可以画出各种各样的路径,所以 path 可算是 SVG 的「节点之王」
除了 path 之外的节点都「比较普通」,可以看成是对 path 的封装,比如「Rect、Circle…」

命令
命令都用一个关键字母来表示,命令 都有两种 表示方式

  1. 大写字母,表示采用「绝对定位」
  2. 小写字母,表示采用「相对定位『相对于上一个点』」

path 的命令列表

document.getElementById(‘path’).getTotalLength() 得到路径长度

  • M:moveto 移动到

  • L:lineto 画线到;H:horizontal lineto 水平线到;V:vertical lineto 垂直线到

L 命令将会在当前位置和新位置之间画一条线段:L x y (or l dx dy)
还有两个简写命令:H,绘制平行线。V,绘制垂直线。这两个命令都只带一个参数,标明在 x 或 y 轴移动到的位置:H x (or h dx)V y (or v dy)

  • Z:closepath 关闭路径

Z 命令会从当前点画一条直线到路径的起点,所以它还是经常被放到路径的最后。另外,Z 命令不用区分大小写:Z (or z)

  • C:curveto 三次贝塞尔曲线

C x1 y1, x2 y2, x yc dx1 dy1, dx2 dy2, dx dy
(x1, y1)、(x2, y2) 分别是起点、终点控制点。最后一个坐标 (x, y),表示曲线的终点
三次贝塞尔曲线 表现形式 是:曲线沿着 起点开始 到第一控制点的方向伸出,逐渐弯曲,然后沿着第二控制点到 终点的方向结束

  • S:smooth curveto 光滑三次贝塞尔曲线

S 命令可以用来创建与之前那些曲线一样的贝塞尔曲线,通常和 C 命令一起使用
如果 S 命令跟在一个 C 命令或者另一个 S 命令的后面,它的第一个控制点,就会被假设成前一个控制点的对称点,不应该写出来,所以 S 省略了一个对称点

  • Q:quadratic Belzier curve 二次贝塞尔曲线

Q x1 y1, x yq dx1 dy1, dx dy

  • T:smooth quadratic Belzier curveto 光滑二次贝塞尔曲线

T x yt dx dy
T 命令类似于 S 命令,用于二次贝塞尔曲线。T 命令前面最好是一个 Q 命令,或者是另一个 T 命令
如果 T 单独使用,那么控制点就会被认为和终点是同一个点,所以画出来的将是一条直线

  • A:elliptical Arc 椭圆弧

A rx ry x-axis-rotation large-arc-flag sweep-flag x ya rx ry x-axis-rotation large-arc-flag sweep-flag dx dy

rx ry:「椭圆」的 x,y半径
x-axis-rotation:X 轴旋转角度,顺时针为正数
large-arc-flag:1 表示用大弧度,0 表示小弧度
sweep-flag:弧度回话方向,1 顺时针,0 逆时针
x y:弧度终点

元素与样式

  • stroke
  • fill
  • transform
  • linearGradient
  • mask
  • filter
  • clipPath

一些 Demo:
svg 模糊 demo
symbol demo
symbol-use-demo
text mask demo
mask demo
clip demo
SVG 文字路径动画
linearGradient Demo

使用 CSS 请注意
把 background-color、border 改成 fill 和 stroke
上色和填充的部分一般是可以用 CSS 来设置的,比如 fill,stroke,stroke-dasharray,但不包括渐变和图案等。
另外,width、height,以及路径的命令等等,都不能用 css 设置
不是所有的属性都能用 CSS 来设置SVG 规范 将属性区分成 properties 和 attributes,前者是可以用 CSS 设置的,后者不能

SVG 动画

SVG 动画 集合
SVG 的动画元素是和 SMIL Synchronized Multimedia Integration Language开发组合作开发的。
SMIL 开发组和 SVG 开发组合作开发了 SMIL 动画规范,在规范中制定了一个基本的 XML 动画特征集合。
SVG 吸收了 SMIL 动画规范当中的动画优点,并提供了一些SVG继承实现。

大概三种实现方式:

  • JS 动画「DOM 操作『忽视它』」
  • CSS3 动画「animation、transition『不是 svg 的重点』」
  • SVG 本身的动画「基于 SMIL」「主要借助 SVG animate 相关标签」

svg-animate-attr

set

set 表示此元素没有动画效果 😨😨😨。
好吧:这样的,虽然 set 虽然不能触发连续的动画,但是,其还是可以实现基本的延迟功能。
就是指:可以在特定时间之后修改某个属性值「也可以是 CSS 属性值」。

一个 Demo

animate

SVG animation 最强大的地方在于:「只要在页面放几个 animate 元素,没有任何 CSS, 没有任何JS」

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<animate
id="id"
begin="id.end + 1s"
attributeName="r"
attributeType="XML"
from="50"
to="80"
by="30"
values="50;80"
begin="0s"
dur=".5s"
repeatCount="indefinite"
fill="freeze">
</animate>

一个 Demo

animateColor

一看就知道是颜色动画。不过,animate 可以实现其功能与效果,因此,此属性已经被废弃。
可谓因为兄弟相争而年少陨落的天王。逝者已矣,过去的就让它过去吧

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

### animateTransform

```xml
<animateTransform
attributeName="transform"
attributeType="XML"
type="rotate"
from="0 125 135"
to="360 125 135"
begin="0s"
dur="10s"
repeatCount="indefinite">
</animateTransform>
```
[一个 Demo](https://jsfiddle.net/hangyangws/zqLorfo9/1/)

### animateMotion

animateMotion 元素可以让 SVG 各种图形沿着特定的 path 路径运动

1
2
3
4
5
<animateMotion
dur="6s"
repeatCount="indefinite"
path="M100 100, A120 120, -45 0 1, 300 300 A120 120, -45 0 1, 100 100">
</animateMotion>

一个 Demo

例子分析

组合:
一个 Demo

end 事件:
一个 Demo

click 事件:
一个 Demo

进阶阅读推荐

工具推荐

  • svgo

项目地址:点我查看
比较厉害的压缩优化 SVG 的工具,可以将 SVG 中的无用信息删掉,同时支持代码进行压缩

  • SVGOMG

展示地址:SVGOMG - SVGO’s Missing GUI
SVGOMG 是 svgo 的可视化界面工具,操作起来很方便,还提供了一些其他有用的功能

  • Snap.svg

项目地址:Snap.svg - Home
Snap.svg 是一个可以使你操纵 SVG 资源和 jQuery 操作 DOM 一样简单的类库,
可以写出更加复杂的 SVG 效果,同时文档超级齐全,推荐给想深入了解的同学。