德育处主任Pro
德育处主任Pro

SVG 从入门到后悔，怎么不早点学起来（图解版）

theme: smartblue

本文简介

点赞 + 关注 + 收藏 = 学会了

作为一只前端，只懂 Vue、React 感觉已经和大家拉不开距离了。

可视化、机器学习等领域 JS 都有涉及到，而可视化方面已经被很多领域用到，比如大屏项目。

可视化领域相关的技术有 canvas 和 SVG ，而这两个东东是迟早要接触的了。

在我接触 SVG 之前，我觉得这是一个很高深的东西，有点恐惧。我第一次接触 SVG 是在 iconfont网站，我没理它是什么东西，反正就跟着教程用。第二次接触就是在 《CSS揭秘(图灵出品)》 这本书，里面会讲到 SVG 相关的内容，而我选择了跳过这部分内容。。。

之后是怎么学会的我也忘了。

最近时间比较多，就把我懂的知识用人话整理出来，方便查询。

本文主要把 “可视” 方面的内容整理出来，操作交互方面(动画、交互事件等) 的内容留到下一篇~

什么是SVG

在学习 SVG 之前，首先要了解 位图 和 矢量图 的区别。

简单来说：

  • 位图：放大会失真图像边缘有锯齿；是由像素点组成；前端的 Canvas 就是位图效果。
  • 矢量图：放大不会失真；使用 XML 描述图形。

我在 知乎 上找了一个图对说明一下。

左边是位图，右边是矢量图

SVG 从入门到后悔，怎么不早点学起来（图解版）_第1张图片

那么 SVG 是什么呢？它是矢量图的其中一种格式。它是用 XML 来描述图形的。

对于初学 SVG 的前端来说，可以简单的理解为 “SVG 是一套新标签”。

所以可以使用 CSS 来设置样式，也可以使用 JS 对 SVG 进行操作。

SVG的使用方式

使用方法

SVG 的使用方式有很多种，我最推荐直接在 HTML 中直接使用，也就是直接当 HTML 标签使用。

我在 《SVG 在前端的7种使用方法》 里记录了几种使用方法：

  1. 在浏览器直接打开
  2. 内嵌到 HTML 中(推荐⭐⭐⭐)
  3. CSS 背景图(推荐⭐)
  4. 使用 img 标签引入(推荐⭐)
  5. 使用 iframe 标签引入(不推荐❌)
  6. 使用 embed 标签引入(不推荐❌)
  7. 使用 object 标签引入(不推荐❌)

SVG默认宽高

在 HTML 中使用 SVG ，直接用 标签即可。

html

在不给 设置宽高时，它的默认宽度是 300px ，默认高度是 150px 。这点和 是一样的。

基础图形

HTML 的元素大多数默认都是矩形，SVG 在形状上更加丰富。

矩形 rect

矩形使用 标签，默认填充色是黑色，当只设置宽高时，渲染出来的矩形就是黑色的矩形。

稍后还会说明如何设置样式(比如边框、填充色等)，这里只列出矩形基础属性：

  • x: 左上角x轴坐标
  • y: 左上角y轴坐标
  • width: 宽度
  • height: 高度
  • rx: 圆角，x轴的半径
  • ry: 圆角，y轴的半径

基础款(只设置宽高)

SVG 从入门到后悔，怎么不早点学起来（图解版）_第2张图片

html

设置矩形位置

通过 x 和 y 可以设置矩形位置

SVG 从入门到后悔，怎么不早点学起来（图解版）_第3张图片

html

圆角矩形

SVG 从入门到后悔，怎么不早点学起来（图解版）_第4张图片

html

rx 是设置x轴的半径，ry 设置y轴的半径。

rx 的最大值是矩形宽度的一半，ry 的最大值是矩形高度的一半。

当只设置 rx 或者 ry 其中一个值时，另一个属性也会使用一样的值。

比如

SVG 从入门到后悔，怎么不早点学起来（图解版）_第5张图片

html

此时 rx 和 ry 都是 30。

rect版的圆形

圆角的概念和 CSS 的 border-radius 有点像，所以有没有一种可能，用 也可以画圆形呢？

SVG 从入门到后悔，怎么不早点学起来（图解版）_第6张图片

html

只要把宽高设成一样，圆角设成宽度的一半就能实现圆形。这是在 HTML 里的实现方式之一。

同理也用 实现椭圆，但在 SVG 中是不会这样做的。因为 SVG 里有专门的圆形和椭圆的标签。

圆形 circle

圆形使用 标签，基础属性有：

  • cx: 圆心在x轴的坐标
  • cy: 圆心在y轴的坐标
  • r: 半径

SVG 从入门到后悔，怎么不早点学起来（图解版）_第7张图片

html

椭圆 ellipse

椭圆使用 标签，基础属性有：

  • cx: 圆心在x轴的坐标
  • cy: 圆心在y轴的坐标
  • rx: x轴的半径
  • ry: y轴的半径

SVG 从入门到后悔，怎么不早点学起来（图解版）_第8张图片

html

和 差不多，只是将半径拆成x轴和y轴的。

直线 line

直线使用 标签，基础属性有：

  • x1: 起始点x坐标
  • y1: 起始点y坐标
  • x2: 结束点x坐标
  • y2: 结束点y坐标
  • stroke: 描边颜色

SVG 从入门到后悔，怎么不早点学起来（图解版）_第9张图片

html

只有 x1 和 x2 ，没有 x3 ，也没有 y3 。

需要注意的是， 需要使用设置 stroke 属性才会有绘制效果。

折线 polyline

使用 可以绘制折线，基础属性有：

  • points: 点集
  • stroke: 描边颜色
  • fill: 填充颜色

SVG 从入门到后悔，怎么不早点学起来（图解版）_第10张图片

html

points 接受的值是一串点集，点集是两两一组表示一个坐标。

其实点集完全不需要用逗号隔开，上面的例子中我使用了逗号隔开，完全是为了让自己阅读代码时比价易懂。一个逗号分隔一个 xy 坐标。

在绘制折线是，我通常是将 fill 设置成 none ，因为 fill 默认值是黑色，如果不设置成 none 会出现以下效果：

SVG 从入门到后悔，怎么不早点学起来（图解版）_第11张图片

html

将 fill 设置成 none 后，必须设置 stroke 为一个有颜色的值，不然不会有渲染效果。

多边形 polygon

多边形使用 标签，基础属性和 差不多：

  • points: 点集
  • stroke: 描边颜色
  • fill: 填充颜色

会自动闭合(自动将起始点和结束点链接起来)。

SVG 从入门到后悔，怎么不早点学起来（图解版）_第12张图片

html

直线路径 path

其实在 SVG 里，所有基本图形都是 的简写。所有描述轮廓的数据都放在 d 属性里，d 是 data 的简写。

d 属性又包括以下主要的关键字(注意大小写！)：

  • M: 起始点坐标，moveto 的意思。每个路径都必须以 M 开始。M 传入 x 和 y 坐标，用逗号或者空格隔开。
  • L: 轮廓坐标，lineto 的意思。L 是跟在 M 后面的。它也是可以传入一个或多个坐标。大写的 L 是一个绝对位置。
  • l: 这是小写 L，和 L 的作用差不多，但 l 是一个相对位置。
  • H: 和上一个点的Y坐标相等，是 horizontal lineto 的意思。它是一个绝对位置。
  • h: 和 H 差不多，但 h 使用的是相对定位。
  • V: 和上一个点的X坐标相等，是vertical lineto 的意思。它是一个绝对位置。
  • v: 这是一个小写的 v ，和大写 V 的差不多，但小写 v 是一个相对定位。
  • Z: 关闭当前路径，closepath 的意思。它会绘制一条直线回到当前子路径的起点。

概念说了一堆，还是用写 demo 的方式来展示会更加直观。

基础版

SVG 从入门到后悔，怎么不早点学起来（图解版）_第13张图片

html

上面的例子里，通过1个 M 和3个 L 描绘了3个点。

使用 stroke 设置描边的颜色，使用 fill="none" 将填充色改成透明。最后就形成上图的效果。

简写

如果全是使用大写 L 来描述每个点的位置，那可以把 L 也去掉，直接写点集。

SVG 从入门到后悔，怎么不早点学起来（图解版）_第14张图片

html

上面的 d="M 10 10 50 40 100 10" 等同于 d="M 10 10 L 50 40 L 100 10" 。

闭合路径

在 d 的数据集里，使用 Z 可以闭合路径。

SVG 从入门到后悔，怎么不早点学起来（图解版）_第15张图片

html

轮廓坐标相对位置 l

使用 L 的小写方式 l 可以实现相对位置写法。

SVG 从入门到后悔，怎么不早点学起来（图解版）_第16张图片

html

上面的代码中，d="M 10 10 l 50 40 l 100 10 Z" 等同于 d="M 10 10 L 60 50 L 160 60 Z" 。

l 里的参数会与前一个点的 x 和 y 进行相加，得到一个新的坐标。

H 和 h

H 后面只需传入 X坐标 即可，它的 Y坐标 与前一个点相同。

SVG 从入门到后悔，怎么不早点学起来（图解版）_第17张图片

html

上面的代码中，d="M 10 10 H 100" 等同于 d="M 10 10 L 100 10"

而 h 和 H 的作用差不多，只不过传入的数据会和前一个点的 X坐标 相加，形成一个新的点，这就是相对位置。

SVG 从入门到后悔，怎么不早点学起来（图解版）_第18张图片

html

可以讲 H 和 h 的例子产生的图片对照一下。

V 和 v

V 后面只需传入 Y坐标 即可，它的 X坐标 与前一个点相同。

SVG 从入门到后悔，怎么不早点学起来（图解版）_第19张图片

html

v 和 V 的作用差不多，小写 v 是一个相对位置。

SVG 从入门到后悔，怎么不早点学起来（图解版）_第20张图片

html

曲线 - 椭圆弧路径 path

在 SVG 中，画曲线其实有很多种方法。我觉得最简单的是 椭圆弧曲线，其实还有 贝塞尔曲线、三次贝塞尔曲线 等一系列复杂的曲线。但我觉得这对初学者来说可能一下子难以接受，所以我在 《Canvas 从入门到劝朋友放弃(图解版)》 里也没写。之后打算再写一篇贝塞尔曲线相关的文章骗点赞~

什么是椭圆弧？

前面讲到的 直线路径 path 是比较好理解的，它把所有点都用直线连接起来即可。只要确定2个点就可以画出一根线段。

但如果只用两个点，可以产生无数条曲线。所以需要添加更多的参数来确定如何绘制一条曲线。而在种种方法中，我认为 椭圆弧曲线 是最简单的。

椭圆弧曲线，顾名思义就是和椭圆有关的。如果在椭圆上选择两个点，就可以截取2条曲线。

SVG 从入门到后悔，怎么不早点学起来（图解版）_第21张图片

比如这样，红线处就将椭圆截取成2段弧线。

椭圆弧公式

在 SVG 中可以使用 path 配合 A属性 绘制椭圆弧。

js A(rx, ry, xr, laf, sf, x, y)

  • rx: 椭圆X轴半径
  • ry: 椭圆Y轴半径
  • xr: 椭圆旋转角度
  • laf: 是否选择弧长较长的那一段。0: 短边(小于180度); 1: 长边(大于等于180度)
  • sf: 是否顺时针绘制。0: 逆时针; 1: 顺时针
  • x: 终点X轴坐标
  • y: 终点Y轴坐标

上面的公式中并没有开始点，开始点是由 M 决定的。

也就是说，确定2个点，再确定椭圆半径，就可画出2个椭圆

SVG 从入门到后悔，怎么不早点学起来（图解版）_第22张图片

通过开始点和结束点裁切，可以得到4条弧线，也就是说2个点可以确定2个相同旋转角度的椭圆的位置，可以切出4条弧线。

SVG 从入门到后悔，怎么不早点学起来（图解版）_第23张图片

```html

```

绘制弧线是比较抽象的，通常我是不会手动绘制的，我会使用 Illustrator 绘制，然后生成 SVG 来使用。

设置样式的方法

设置 SVG 元素样式其实和 CSS 差不多，常见的方法有4种。

  • 属性样式
  • 内联样式
  • 内部样式
  • 外部样式

属性样式

直接在元素属性上设置样式，比如将矩形填充色改成粉红

SVG 从入门到后悔，怎么不早点学起来（图解版）_第24张图片

html

内联样式

把所有样式写在 style 属性里

html

内部样式

将样式写在