什么是 SVG
可视化领域相关的技术有 canvas 和 SVG;
HTML [canvas] 标签用于通过脚本（通常是 JavaScript）动态绘制图形。
首先要了解 位图 和 矢量图
- 位图：放大会失真图像边缘有锯齿；是有像素组成；如
Canvas； - 矢量图：放大不会失真；使用
XML描述图形；
SVG 就是矢量图的一种格式。它是用 XML 来描述图形的；
简单理解的话 ** SVG是一套新的标签 **；
所以我们可以使用 CSS 来设置样式，也可以通过 JS 来对 SVG 进行操作。
SVG 使用方法
浏览器打开
<?xml version="1.0" ?>
<svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg">
<title>雷猴</title>
<circle cx="50" cy="50" r="50" fill="hotpink"></circle>
</svg>
xml 是浏览器能读取的格式，但如果希望 svg 能在浏览器中渲染出来，需要使用 xmlns 声明渲染规则。
所以必须使用 xmlns="http://www.w3.org/2000/svg"。
内嵌 HTML 中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>svg demo</title>
</head>
<body>
<div>
<!-- 内嵌到 HTML 中 -->
<svg width="100%" height="100%" version="1.1">
<circle cx="50" cy="50" r="50" fill="hotpink"></circle>
</svg>
</div>
</body>
</html>
可以看到上面的代码中，<svg> 标签并没有使用 xmlns="http://www.w3.org/2000/svg" 声明命名空间，这是因为 HTML 5 文档使用 <!DOCTYPE html> 标记，它允许跳过 SVG 命名空间声明，HTML 解析器会自动识别 SVG 元素和它的子元素。
CSS 背景图
<style>
.svg_bg_img {
width: 100px;
height: 100px;
background: url('./case1.svg') no-repeat;
background-size: 100px 100px;
}
</style>
<div class="svg_bg_img"></div>
使用 img 标签引入
<img src="./case1.svg" width="100" height="100">
使用 iframe 标签引入
<iframe
src="./case1.svg"
width="100"
height="100"
></iframe>
<iframe> 默认是有个边框样式的，如果你使用这种方式引入 SVG 可能还需要自己手动调节一下样式。
SVG 制作
网格
坐标系统是：以页面的左上角为 (0,0) 坐标点，坐标以像素为单位，x 轴正方向是向右，y 轴正方向是向下。
基本形状
我们可以通过固定的标签来快速生成相应的基本形状。
矩形 rect
<rect x="10" y="10" width="30" height="30"/>
<rect x="60" y="10" rx="10" ry="10" width="30" height="30"/>
- x：矩形左上角的 x 位置
- y：矩形左上角的 y 位置
- width：矩形的宽度
- height：矩形的高度
- rx：圆角的 x 方位的半径
- ry：圆角的 y 方位的半径
圆形 circle
<circle cx="25" cy="75" r="20"/>
- r：圆的半径
- cx：圆心的 x 位置
- cy：圆心的 y 位置
椭圆 ellipse
<ellipse cx="75" cy="75" rx="20" ry="5"/>
- rx：椭圆的 x 半径
- ry：椭圆的 y 半径
- cx：椭圆中心的 x 位置
- cy：椭圆中心的 y 位置
线条 line
<line x1="10" x2="50" y1="110" y2="150"/>
- x1：起点的 x 位置
- y1：起点的 y 位置
- x2：终点的 x 位置
- y2：终点的 y 位置
折线 polyline
<polyline points="60 110, 65 120, 70 115, 75 130, 80 125, 85 140, 90 135, 95 150, 100 145"/>
- points：点集数列。每个数字用空白、逗号、终止命令符或者换行符分隔开。每个点必须包含 2 个数字，一个是 x 坐标，一个是 y 坐标。所以点列表 (0,0), (1,1) 和 (2,2) 可以写成这样：“0 0, 1 1, 2 2”。
多边形 polygon
<polygon points="50 160, 55 180, 70 180, 60 190, 65 205, 50 195, 35 205, 40 190, 30 180, 45 180"/>
- points：点集数列。每个数字用空白符、逗号、终止命令或者换行符分隔开。每个点必须包含 2 个数字，一个是 x 坐标，一个是 y 坐标。所以点列表 (0,0), (1,1) 和 (2,2) 可以写成这样：“0 0, 1 1, 2 2”。路径绘制完后闭合图形，所以最终的直线将从位置 (2,2) 连接到位置 (0,0)。
路径 path
SVG 基本形状中最强大的一个。 你可以用它创建线条，曲线，弧形等等。
<path d="M10 10 h 80 v 80 h -80 v -80" stroke="black" />
<path d="M10 10 H 90 V 90 H 90 V 10" stroke="black" />
- d：一个点集数列以及其它关于如何绘制路径的信息。
- M: 起始点坐标，moveto 的意思。每个路径都必须以
M开始。M传入x和y坐标，用逗号或者空格隔开，也可用m代替。 - L: 轮廓坐标，lineto 的意思。
L是跟在M后面的。它也是可以传入一个或多个坐标。大写的L是一个绝对位置。 - l: 这是小写
L，和L的作用差不多，但l是一个相对位置。 - H: 和上一个点的
Y坐标相等,它是一个绝对位置。 - h: 和
H差不多，但h使用的是相对定位。 - V: 和上一个点的X坐标相等，是vertical lineto 的意思。它是一个绝对位置。
- v: 这是一个小写的 v ，和大写 V 的差不多，但小写 v 是一个相对定位。
- Z: 关闭当前路径，closepath 的意思。它会绘制一条直线回到当前子路径的起点。
- Q：二次贝塞尔曲线，需要设置两组组表。第一组坐标起点的控制点，第二组坐标表示曲线终点。
- T：延长贝塞尔曲线，只需一组坐标，T 会通过前一个控制点，推断出一个新的控制点。这意味着，在你的第一个控制点后面，可以只定义终点，就创建出一个相当复杂的曲线。需要注意的是，T 命令前面必须是一个 Q 命令，或者是另一个 T 命令，才能达到这种效果。如果 T 单独使用，那么控制点就会被认为和终点是同一个点，所以画出来的将是一条直线。
- C：三次贝塞尔曲线，需要设置三组坐标参数。第一组坐标起点的控制点，第二组坐标终点的控制点，最后一组坐标表示曲线终点。
- S：用来创建与前面一样的贝塞尔曲线，但是，如果 S 命令跟在一个 C 或 S 命令后面，则它的第一个控制点会被假设成前一个命令曲线的第二个控制点的中心对称点。如果 S 命令单独使用，前面没有 C 或 S 命令，那当前点将作为第一个控制点。
- M: 起始点坐标，moveto 的意思。每个路径都必须以
文字
<svg width="400" height="400" style="border: 1px solid red;">
<text>余安</text>
</svg>
图片
<svg width="400" height="400" style="border: 1px solid red;">
<image xlink:href="./img.jpg"></image>
</svg>
超链接
<svg width="400" height="400" style="border: 1px solid red;">
<a xlink:href="www.baidu.com" xlink:title="canvas" target="_blank">
<text x="20" y="20">也学学Canvas吧</text>
</a>
</svg>
杭州地铁简略图
代码就不在这展示了，实在是太多了......
动画
上面知识点大家应该已经看不下去了吧，那现在就给大家讲点不那么无聊的东西
其实关于SVG动画也没有那么神秘，它其实就和HTML中的动画一样，可以通过以下方式来实现，
- 通过编写CSS来实现动画；
- 另一种则是通过JS，获取SVG元素，然后控制该元素样式属性
参考：
