关于前端:SVG-从入门到后悔怎么不早点学起来图解版

本文简介

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

作为一只前端，只懂 Vue、React 感觉曾经和大家拉不开间隔了。

可视化、机器学习等畛域 JS 都有波及到，而可视化方面曾经被很多畛域用到，比方大屏我的项目。

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

在我接触 SVG 之前，我感觉这是一个很浅近的货色，有点恐怖。我第一次接触 SVG 是在 iconfont 网站，我没理它是什么货色，反正就跟着教程用。第二次接触就是在 《CSS 揭秘（图灵出品）》 这本书，外面会讲到 SVG 相干的内容，而我抉择了跳过这部分内容。。。

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

最近工夫比拟多，就把我懂的常识用人话整理出来，不便查问。

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

什么是 SVG

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

简略来说：

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

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

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

那么 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，间接用 <svg> 标签即可。

<svg></svg>

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

根底图形

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

矩形 rect

矩形应用 <rect> 标签，默认填充色是彩色，当只设置宽高时，渲染进去的矩形就是彩色的矩形。

稍后还会阐明如何设置款式（比方边框、填充色等），这里只列出矩形根底属性：

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

根底款（只设置宽高）

<svg width="300" height="300" style="border: 1px solid red;">
  <rect width="200" height="100"></rect>
</svg>

设置矩形地位

通过 x 和 y 能够设置矩形地位

<svg width="300" height="300" style="border: 1px solid red;">
  <rect
    x="30"
    y="20"
    width="200"
    height="100"
  >
  </rect>
</svg>

圆角矩形

<svg width="300" height="300" style="border: 1px solid red;">
  <rect
    width="200"
    height="100"
    rx="20"
    ry="40"
  >
  </rect>
</svg>

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

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

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

比方

<svg width="300" height="300" style="border: 1px solid red;">
  <rect
    width="200"
    height="100"
    rx="30"
  >
  </rect>
</svg>

此时 rx 和 ry 都是 30。

rect 版的圆形

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

<svg width="300" height="300" style="border: 1px solid red;">
  <rect
    width="100"
    height="100"
    rx="50"
  >
  </rect>
</svg>

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

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

圆形 circle

圆形应用 <circle> 标签，根底属性有：

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

<svg width="300" height="300" style="border: 1px solid red;">
  <circle
    cx="60"
    cy="80"
    r="50"
  >
  </circle>
</svg>

椭圆 ellipse

椭圆应用 <ellipse> 标签，根底属性有：

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

<svg width="300" height="300" style="border: 1px solid red;">
  <ellipse
    cx="100"
    cy="40"
    rx="80"
    ry="30"
  >
  </ellipse>
</svg>

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

直线 line

直线应用 <line> 标签，根底属性有：

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

<svg width="300" height="300" style="border: 1px solid red;">
  <line
    x1="30"
    y1="40"
    x2="200"
    y2="180"
    stroke="blue"
  >
  </line>
</svg>

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

须要留神的是，<line> 须要应用设置 stroke 属性才会有绘制成果。

折线 polyline

应用 <polyline> 能够绘制折线，根底属性有：

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

<svg width="300" height="300" style="border: 1px solid red;">
  <polyline
    points="10 10, 200 80, 230 230"
    stroke="#000"
    fill="none"
  >
  </polyline>
</svg>

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

其实点集齐全不须要用逗号隔开，下面的例子中我应用了逗号隔开，齐全是为了让本人浏览代码时比价易懂。一个逗号分隔一个 xy 坐标。

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

<svg width="300" height="300" style="border: 1px solid red;">
  <polyline
    points="10 10, 200 80, 230 230"
    stroke="#000"
  >
  </polyline>
</svg>

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

多边形 polygon

多边形应用 <polygon> 标签，根底属性和 <polyline> 差不多：

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

<polygon> 会主动闭合（主动将起始点和完结点链接起来）。

<svg width="300" height="300" style="border: 1px solid red;">
  <polygon points="10 10, 200 80, 230 230"></polygon>
</svg>

直线门路 path

其实在 SVG 里，所有根本图形都是 <path> 的简写。所有形容轮廓的数据都放在 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 width="300" height="300" style="border: 1px solid red;">
  <path
    d="M 10 10 L 50 40 L 100 10"
    stroke="blue"
    fill="none"
  >
  </path>
</svg>

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

应用 stroke 设置描边的色彩，应用 fill="none" 将填充色改成通明。最初就造成上图的成果。

简写

如果全是应用大写 L 来形容每个点的地位，那能够把 L 也去掉，间接写点集。

<svg width="300" height="300" style="border: 1px solid red;">
  <path
    d="M 10 10 50 40 100 10"
    stroke="blue"
    fill="none"
  >
  </path>
</svg>

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

闭合门路

在 d 的数据集里，应用 Z 能够闭合门路。

<svg width="300" height="300" style="border: 1px solid red;">
  <path
    d="M 10 10 L 50 40 L 100 10 Z"
    stroke="blue"
    fill="none"
  >
  </path>
</svg>

轮廓坐标绝对地位 l

应用 L 的小写形式 l 能够实现绝对地位写法。

<svg width="300" height="300" style="border: 1px solid red;">
  <path
    d="M 10 10 l 50 40 l 100 10 Z"
    stroke="blue"
    fill="none"
  >
  </path>
</svg>

下面的代码中，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 width="300" height="300" style="border: 1px solid red;">
  <path
    d="M 10 10 H 100"
    stroke="blue"
    fill="none"
  >
  </path>
</svg>

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

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

<svg width="300" height="300" style="border: 1px solid red;">
  <path
    d="M 10 10 h 100"
    stroke="blue"
    fill="none"
  >
  </path>
</svg>

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

V 和 v

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

<svg width="300" height="300" style="border: 1px solid red;">
  <path
    d="M 10 10 V 100"
    stroke="blue"
    fill="none"
  >
  </path>
</svg>

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

<svg width="300" height="300" style="border: 1px solid red;">
  <path
    d="M 10 10 v 100"
    stroke="blue"
    fill="none"
  >
  </path>
</svg>

曲线 – 椭圆弧门路 path

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

什么是椭圆弧？

后面讲到的 直线门路 path 是比拟好了解的，它把所有点都用直线连接起来即可。只有确定 2 个点就能够画出一根线段。

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

椭圆弧曲线，顾名思义就是和椭圆无关的。如果在椭圆上抉择两个点，就能够截取 2 条曲线。

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

椭圆弧公式

在 SVG 中能够应用 path 配合 A 属性 绘制椭圆弧。

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 个椭圆

通过开始点和完结点裁切，能够失去 4 条弧线，也就是说 2 个点能够确定 2 个雷同旋转角度的椭圆的地位，能够切出 4 条弧线。

<svg width="400" height="400" style="border: 1px solid red;">
  <!-- 红 -->
  <path
    d="M 125 75 A 100 50 0 0 0 225 125"
    stroke="red"
    fill="none"
  />

  <!-- 黄 -->
  <path
    d="M 125 75 A 100 50 0 0 1 225 125"
    stroke="yellow"
    fill="none"
  />

  <!-- 蓝 -->
  <path
    d="M 125 75 A 100 50 0 1 0 225 125"
    stroke="blue"
    fill="none"
  />

  <!-- 绿 -->
  <path
    d="M 125 75 A 100 50 0 1 1 225 125"
    stroke="green"
    fill="none"
  />
</svg>

绘制弧线是比拟形象的，通常我是不会手动绘制的，我会应用 Illustrator 绘制，而后生成 SVG 来应用。

设置款式的办法

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

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

属性款式

间接在元素属性上设置款式，比方将矩形填充色改成粉红

<svg width="400" height="400" style="border: 1px solid red;">
  <rect
    x="100"
    y="100"
    width="200"
    height="100"
    fill="pink"
  />
</svg>

内联款式

把所有款式写在 style 属性里

<svg width="400" height="400" style="border: 1px solid red;">
  <rect
    x="100"
    y="100"
    width="200"
    height="100"
    style="fill: pink;"
  />
</svg>

外部款式

将款式写在 <style> 标签里

<style>
  .rect {fill: pink;}
</style>

<svg width="400" height="400" style="border: 1px solid red;">
  <rect
    x="100"
    y="100"
    width="200"
    height="100"
    class="rect"
  />
</svg>

内部款式

将款式写在 .css 文件里，而后在页面中引入该 CSS 文件。

罕用款式设置

SVG 设置款式的属性和 CSS 略微有点不同，但初学时不须要理解太深刻，咱们只需将罕用的学会即可。

比方填充色、描边色彩等。

说到色彩，SVG 和 CSS 反对的色彩值其实差不多的，比方：

• 关键字: red、pink、blue 等
• 十六进制: 反对 3 位或 6 位，#0f0、#00ff00
• RGB 和 RGBA: 比方 rgb(10, 20, 30) 或 rgba(10, 20, 30, 0.4)
• HSL 和 HSLA

接下来讲到的所有惯例属性，除了在元素属性上设置之外，都反对在 CSS 中设置。

填充 fill

要填充图案色彩，能够设置 fill 属性。这个属性在后面的例子也应用过屡次。

fill 默认是 #000000，也就是彩色。

<svg width="400" height="400" style="border: 1px solid red;">
  <rect
    x="100"
    y="100"
    width="200"
    height="100"
    fill="greenyellow"
  />
</svg>

也能够应用 none 或者 transparent 将填充色设置成通明。

填充色的不透明度 fill-opacity

如果想让填充色有点 半透明 的感觉，能够设置 fill-opacity 属性，也能够在 fill 属性中应用 RGBA 或者 HSLA。

本例应用 fill-opacity 设置，它的取值是 0 - 1，0 代表齐全通明，1 代表齐全不通明。小于 0 的值会被改为 0，大于 1 的值会被改为 1。

<svg width="400" height="400" style="border: 1px solid red;">
  <rect
    x="100"
    y="100"
    width="200"
    height="100"
    fill="red"
    fill-opacity="0.2"
  />
</svg>

fill 属性中应用 RGBA 或者 HSLA 的形式你本人入手试试看~

描边色彩 stroke

能够通过 stroke 属性设置描边的色彩，之前也应用过。如果不设置 stroke，图形默认是没有描边色彩的。

<svg width="400" height="400" style="border: 1px solid red;">
  <rect
    x="100"
    y="100"
    width="200"
    height="100"
    fill="none"
    stroke="blue"
  />
</svg>

我将填充色设置成通明，不便察看蓝色边框。

描边色彩的不透明度 stroke-opacity

和 fill-opacity 差不多，只不过 stroke-opacity 是设置描边的不透明度

<svg width="400" height="400" style="border: 1px solid red;">
  <rect
    x="100"
    y="100"
    width="200"
    height="100"
    fill="none"
    stroke="blue"
    stroke-opacity="0.3"
  />
</svg>

描边宽度 stroke-width

如果须要调整描边的宽度，能够应用 stroke-width，它接管一个数值

<svg width="400" height="400" style="border: 1px solid red;">
  <rect
    x="100"
    y="100"
    width="200"
    height="100"
    fill="none"
    stroke="blue"
    stroke-width="10"
  />
</svg>

虚线描边 stroke-dasharray

边框的 点线 或者 虚线 款式，能够应用 stroke-dasharray 设置，这和 Canvas 里设置虚线的操作其实是差不多。

stroke-dasharray 接管一串数字，这串数字能够用来代表 线的长度和空隙的长度，数字之间用逗号或者空格分隔。

倡议传入偶数个数字。但如果你传入了奇数个数字，SVG 会将这串数字反复一遍，使它的数量变成 偶数个。

<svg width="400" height="400" style="border: 1px solid red;">
  <line
    x1="30"
    y1="30"
    x2="300"
    y2="30"
    stroke="blue"
  />

  <line
    x1="30"
    y1="70"
    x2="300"
    y2="70"
    stroke="blue"
    stroke-dasharray="20 10"
  />

  <line
    x1="30"
    y1="110"
    x2="300"
    y2="110"
    stroke="blue"
    stroke-dasharray="20 10 30"
  />
</svg>

虚线偏移量 stroke-dashoffset

虚线还能够通过 stroke-dashoffset 属性设置偏移量，它接管一个数值类型的值。

<svg width="400" height="400" style="border: 1px solid red;">
  <line
    x1="30"
    y1="30"
    x2="300"
    y2="30"
    stroke="blue"
    stroke-width="10"
    stroke-dasharray="20 10 30"
  />

  <line
    x1="30"
    y1="90"
    x2="300"
    y2="90"
    stroke="blue"
    stroke-width="10"
    stroke-dasharray="20 10 30"
    stroke-dashoffset="10"
  />
</svg>

我加粗了虚线，不便察看偏移量。

线帽 stroke-linecap

线帽就是线的起始点和完结点的地位，用 stroke-linecap 属性能够设置线帽款式。

线帽有 3 个值：

• butt: 平头（默认值）
• round: 圆头
• square: 方头

<svg width="400" height="400" style="border: 1px solid red;">
  <!-- 平头 -->
  <line
    x1="30"
    y1="30"
    x2="300"
    y2="30"
    stroke="blue"
    stroke-width="10"
    stroke-linecap="butt"
  />

  <!-- 圆头 -->
  <line
    x1="30"
    y1="70"
    x2="300"
    y2="70"
    stroke="blue"
    stroke-width="10"
    stroke-linecap="round"
  />

  <!-- 方头 -->
  <line
    x1="30"
    y1="110"
    x2="300"
    y2="110"
    stroke="blue"
    stroke-width="10"
    stroke-linecap="square"
  />
</svg>

能够看到 square 比 butt 要略微长一丢丢。

拐角 stroke-linejoin

拐角就是折线的交接点，能够应用 stroke-linejoin 设置，它接管以下属性：

• miter: 尖角（默认）
• round: 圆角
• bevel: 平角

<svg width="400" height="400" style="border: 1px solid red;">
  <!-- 尖角 -->
  <polyline
    points="30 60, 60 30, 90 60"
    fill="none"
    stroke="blue"
    stroke-width="20"
    stroke-linejoin="miter"
  />

  <!-- 圆角 -->
  <polyline
    points="30 120, 60 90, 90 120"
    fill="none"
    stroke="blue"
    stroke-width="20"
    stroke-linejoin="round"
  />

  <!-- 平角 -->
  <polyline
    points="30 180, 60 150, 90 180"
    fill="none"
    stroke="blue"
    stroke-width="20"
    stroke-linejoin="bevel"
  />
</svg>

打消锯齿 shape-rendering

如果你感觉 SVG 在浏览器显示进去的图像有点含糊，那可能是开启了 反锯齿 性能，能够通过 CSS 属性敞开该性能。

shape-rendering: crispEdges;

将该属性设置到对应的 svg 元素上，就会敞开反锯齿性能，突显看起来就会清晰很对，但在某些状况敞开了该性能会让图像看起来有点毛躁的感觉。

如果想开启反锯齿性能，能够这样设置：shape-rendering: geometricPrecision;

文本元素 text

SVG 能够应用 <text> 标签渲染文本。文本是有 “基线” 概念的，这个概念和 CSS 的一样。这里举荐 AndyHu 的文章，能够疾速搞懂基线。《彻底搞懂 vertical-align 底线、基线、中线的含意》

根底版

和 Canvas 一样，SVG 的文本对齐形式是以第一个字基线的左下角为基准。

<svg width="400" height="400" style="border: 1px solid red;">
  <text> 雷猴啊 </text>
</svg>

能够看到，文字跑去左上角了。但这并不是咱们想要的成果。

SVG 如果没设置字号，它会追随父元素的字号，始终往上跟跟跟上去。

在本例中，默认字号是追随了浏览器的，也就是 16px。

如果咱们想看到文本，就须要将文字往下挪动 16px，因为本文的对齐形式是以第一个字的基线的左下角为参考，默认的地位坐标是 (0, 0)，当初要将 y 轴坐标改成 16px 能力残缺显示文本

<svg width="400" height="400" style="border: 1px solid red;">
  <text y="16"> 雷猴啊 </text>
</svg>

设置字号 font-size

<svg width="400" height="400" style="border: 1px solid red;">
  <text
    y="60"
    font-size="60"
  >
    雷猴啊
  </text>
</svg>

粗体 font-weight

应用 font-weight 能够将文本设置成粗体。

• normal: 默认（非粗体）
• bold: 粗体

这和 CSS 是一样的

<svg width="400" height="400" style="border: 1px solid red;">
  <!-- 默认 -->
  <text
    y="60"
    font-size="60"
    font-weight="normal"
  >
    雷猴啊
  </text>

  <!-- 粗体 -->
  <text
    y="140"
    font-size="60"
    font-weight="bold"
  >
    雷猴啊
  </text>
</svg>

装璜线 text-decoration

和 CSS 一样，能够应用 text-decoration 设置装璜线

• none：默认
• underline: 下划线
• overline: 上划线
• line-through: 删除线

<svg width="400" height="400" style="border: 1px solid red;">
  <!-- 默认 -->
  <text
    y="30"
    font-size="30"
    text-decoration="none"
  >
    雷猴啊
  </text>

  <!-- 上划线 -->
  <text
    y="100"
    font-size="30"
    text-decoration="overline"
  >
    雷猴啊
  </text>

  <!-- 删除线 -->
  <text
    y="170"
    font-size="30"
    text-decoration="line-through"
  >
    雷猴啊
  </text>

  <!-- 下划线 -->
  <text
    y="240"
    font-size="30"
    text-decoration="underline"
  >
    雷猴啊
  </text>
</svg>

程度对齐形式 text-anchor

能够通过 text-anchor 属性设置文本程度对齐形式。

如果本子是从左向右书写，那这几个参数的意思就是：

• start: 左对齐
• middle: 居中对齐
• end: 右对齐

多行文本

多行文能够应用本 <tspan> 标签辅助实现

<svg width="400" height="400" style="border: 1px solid red;">
  <text fill="blue">
    <tspan x="10" y="30" fill="red"> 雷猴 </tspan>
    <tspan x="10" y="60"> 鲨鱼辣椒 </tspan>
    <tspan x="10" y="90"> 蟑螂恶霸 </tspan>
    <tspan x="10" y="120"> 蝎子莱莱 </tspan>
  </text>
</svg>

<tspan> 要放在 <text> 里，而且会继承 <text> 设置的款式。

如果在 <tspan> 里设置的款式和 <text> 的款式有抵触，最初会应用 <tspan> 的款式。

程度对齐形式

<svg width="400" height="400" style="border: 1px solid red;">
  <!-- 参考线 -->
  <path d="M 200 0 200 400" stroke="red"></path>

  <!-- 左对齐 -->
  <text
    x="200"
    y="100"
    text-anchor="start"
  >
    雷猴
  </text>

  <!-- 居中对齐 -->
  <text
    x="200"
    y="130"
    text-anchor="middle"
  >
    雷猴
  </text>

  <!-- 右对齐 -->
  <text
    x="200"
    y="160"
    text-anchor="end"
  >
    雷猴
  </text>
</svg>

垂直对齐形式 dominant-baseline

能够通过 dominant-baseline 属性设置文本垂直对齐形式

• auto: 默认的对齐形式，放弃与父元素雷同的配置。
• text-after-edge: 在基线上方
• middle: 居中基线
• text-before-edge: 在基线下方

<svg width="400" height="400" style="border: 1px solid red;">
  <!-- 参考线 -->
  <path d="M 0 200 400 200" stroke="red"></path>

  <!-- 默认 -->
  <text
    x="20"
    y="200"
    dominant-baseline="auto"
  >
    雷猴
  </text>

  <!-- 在基线上方 -->
  <text
    x="80"
    y="200"
    dominant-baseline="text-after-edge"
  >
    雷猴
  </text>

  <!-- 居中基线 -->
  <text
    x="160"
    y="200"
    dominant-baseline="middle"
  >
    雷猴
  </text>

  <!-- 在基线下方 -->
  <text
    x="240"
    y="200"
    dominant-baseline="text-before-edge"
  >
    雷猴
  </text>
</svg>

纵向文字 writing-mode

将 writing-mode 设置成 tb 就能够让文字纵向排列。

须要留神英文和中文的文字角度！

<svg width="400" height="400" style="border: 1px solid red;">
  <text x="20" y="20" writing-mode="tb">Hello World!</text>
  <text x="100" y="20" writing-mode="tb"> 鲨鱼辣椒 </text>
</svg>

有些教程外面会讲 glyph-orientation-vertical 属性能够旋转文字方向，但不举荐这个办法，因为当初的浏览器可能不再反对它了。

能够看看这个文档的阐明：《glyph-orientation-vertical》

超链接

和 HTML 一样，超链接能够应用 <a> 标签实现。

在 SVG 里，链接要放在 xlink:href 属性里。

如果心愿鼠标放到链接上呈现提示信息，能够在 xlink:title 属性里编写提示信息。

如需在新窗口关上链接，能够设置 target="_blank"。

<svg width="400" height="400" style="border: 1px solid red;">
  <a xlink:href="https://juejin.cn/post/7116784455561248775" xlink:title="canvas" target="_blank">
    <text x="20" y="20"> 也学学 Canvas 吧 </text>
  </a>
</svg>

此时点击图片上的链接就会跳到对应的页面。

<a> 标签里除了能够包裹文本外，还能够包裹各种图形和图片等元素。

图片 image

在 SVG 中能够应用 <image> 标签加载图片，包含位图。

<image> 是应用 xlink:href 属性获取图片的

<svg width="400" height="400" style="border: 1px solid red;">
  <image xlink:href="./img.jpg"></image>
</svg>

图片标签其实没什么好说的，和 HTML 的 <img> 标签用法差不多。

总结

通过下面这么多例子应该对 SVG 有一个大抵的理解了。SVG 在前端编码中，感觉就像一堆新的标签。咱们只有当它是 HTML 那样应用就行了。

本文记录的所有知识点都是 SVG 根底中的根底。

下一篇会介绍进阶的标签。比方实现突变、分组，还会介绍比拟难了解的坐标零碎。

代码仓库

⭐雷猴 SVG

举荐浏览

👍《Fabric.js 从入门到收缩》

👍《『Three.js』腾飞！》

👍《Canvas 从入门到劝敌人放弃（图解版）》

👍《SVG 在前端的 7 种应用办法，你还晓得哪几种？》

点赞 + 关注 + 珍藏 = 学会了
代码仓库