JS基础系列之 —— SVG 基础
1. 概念
1.1 定义
可缩放矢量图形 （ Scalable Vector Graphics，SVG ），是一种用于描述二维的 矢量图形 ，基于 XML 的标记语言。作为一个基于文本的开放网络标准，SVG 能够优雅而简洁地渲染不同大小的图形，并和 CSS ， DOM ， JavaScript 和 SMIL 等其他网络标准无缝衔接。本质上，SVG 相对于图像，就好比 HTML 相对于文本。
https:// codepen.io/xjGafi/pen/y LbzyJx
1.2 基本属性
1.2.1 笔画特性
| 属性 | 值 |
|---|---|
| stroke | 笔画颜色，默认值为 none |
| stroke-width | 笔画宽度，可用用户坐标或者指定单位的方式指定。笔画的宽度会相对坐标网格 线居中。默认值为 1 |
| stroke-opacity | 数字，从 0.0 到 1.0。0.0 是完全透明，1.0 是完全不透明(默认值) |
| stroke-dasharray | 用一系列的数字来指定虚线和间隙的长度。这些数字只能使用用户坐标，默认值为 none |
| stroke-linecap | 线头尾的形状，值为 butt(默认值)、round 或 square |
| stroke-linejoin | 图形的棱角或者一系列连线的形状，取值为 miter(尖的，默认值)、round 或者 bevel(平的) |
| stroke-miterlimit | 相交处显示宽度与线宽的最大比例，默认值为 4 |
1.2.2 填充特性
| 属性 | 值 |
|---|---|
| fill | 填充颜色，默认值为 black |
| fill-opacity | 从 0.0 到 1.0 的数字，0.0 表示完全透明，1.0(默认值)表示完全不透明 |
| fill-rule | 属性值为 nonzero(默认值)或 evenodd。该属性决定判断某个点是否在图形内部的方法。只有当边线交叉时或者内部有“洞”时才有效 |
1.3 重点属性
1.3.1 viewBox 属性
viewBox 属性的值有四个数字，分别是左上角的横坐标和纵坐标、视口的宽度和高度。上面代码中，SVG 图像宽度是
100px
, 高度是
100px
，
viewBox
属性指定视口从
(50, 50)
这个点开始。所以，实际看到的是右下角的四分之一圆。
效果： Attention Required! | Cloudflare
注意，视口必须适配所在的空间。上面代码中，视口的大小是 50 x 50，由于 SVG 图像的大小是 100 x 100，所以视口会放大去适配 SVG 图像的大小，即放大了四倍。
如果不指定
width
属性和
height
属性，只指定
viewBox
属性，则相当于只给定 SVG 图像的长宽比。这时，SVG 图像的默认大小将等于所在的 HTML 元素的大小。（
width、height 和 viewBox
属性都不指定时，默认宽度是
300px
, 高度是
150px
）
1.4 基本标签
基本标签的图形标签这块相对比较好理解，我们直接一张表总结下。
| 图形 | 标签 | 用法 | 描述 |
|---|---|---|---|
| 矩形 | < rect > | <rect x="60" y="10" rx="10" ry="10" width="30" height="30" /> | x:起点横坐标，y:起点纵坐标，rx:倒角x 轴方向半径，ry:倒角x轴方向半径，width:宽度，height:高度 |
| 圆形 | < circle > | <circle cx="100" cy="100" r="50" /> | cx:圆心横坐标，cy:圆心纵坐标，r:半径 |
| 椭圆 | < ellipse > | <ellipse cx="75" cy="75" rx="20" ry="5" /> | cx:椭圆心横坐标，cy:椭圆心纵坐标，rx:椭圆x轴方向半径，ry:椭圆y轴方向半径 |
| 直线 | < line > | <line x1="10" x2="50" y1="110" y2="150" /> | x1，y1:起点，x2，y2:终点 |
| 折线 | < polyline > | <polyline points="60 110, 65 120, 70 115, 75 130, 80 125, 85 140, 90 135, 95 150, 100 145" /> | 每两个点以空格配对为一个坐标点，逗号隔开形成坐标集合。连成折线。 |
| 多边形 | < polygon > | <polygon points="50 160, 55 180, 70 180, 60 190, 65 205, 50 195, 35 205, 40 190, 30 180, 45 180" /> | 类似折线，不同的是，最后一个点会自动闭合第一个点，形成闭环。 |
| 路径 | <path> | <path d="M 100 100 L 300 100 L 200 300 z" /> | 通过指定点以及点和点之间的线来创建任意形状。 |
| 图片 | <image> | <image xlink:href="./logo.png" x="0" y="0" height="100" width="100" /> | 将图片嵌入到 SVG 中。 |
| 文本 | <text> | <text x="250" y="150" font-family="Times New Roman" font-size="55"> Hello SVG </text> | 一个由文字组成的图形。 |
1.5 重点标签
1.5.1 path 标签
在 SVG 里，你可以把 path 看成是最基本的绘制元素，正因为它是最基本的，万变不离其宗，他能演化出各种复杂的绘制效果。所以 path 是最基本也是最复杂的绘制元素。
path 标签，最重要的属性是 d 属性，它是一组指令和参数的集合。在 d 属性的值里，我们能看到一堆非常复杂的指令字符串。
<path
M73.8616812,68.8664775
L74.5015359,74.5939423
L68.1746283,71.7969507
C66.2299599,72.4159872 64.1377269,72.7711218 61.9444643,72.7711218
C51.9719158,72.7711218 43.8883163,65.7823167 43.8883163,57.1611168
C43.8883163,48.5399169 51.9719158,41.5511118 61.9444643,41.5511118
C71.9164005,41.5511118 80,48.5399169 80,57.1611168
C80,61.8286883 77.6181486,66.006419 73.8616812,68.8664775