前言
在学习X6之前我们必须得有SVG的基本知识，因为X6的节点里的很多知识都和SVG有关，在开启学习之旅之前我们先来学习一下SVG。
SVG是个啥
SVG 是一种基于 XML 语法的图像格式，全称是可缩放矢量图。顾名思义，这种格式的图像是不会失真的，它本质上是文本文件，体积较小，且不管放大多少倍都不会失真。所以很多渲染图像的都会基于SVG去渲染，大家熟悉的像echarts，它默认是基于canvas进行渲染的，但是我们可以选择按照SVG进行渲染，这样的图像在放大的时候就不会失真。废话不多说，且听下面讲解。
SVG标签
<svg>标签
SVG 代码都放在顶层标签<svg>之中
<svg width="100%" height="100%">
<circle id="circle" cx="50" cy="50" r="50" />
</svg>
width 和 height 属性可设置此 SVG 文档的宽度和高度。如果不指定这两个属性，SVG 图像默认大小是300像素（宽） x 150像素（高）。如果想对SVG图像进行裁剪，就要指定viewBox属性。<viewBox>属性的值有四个数字，分别是左上角的横坐标和纵坐标、视口的宽度和高度。
SVG Shapes
SVG有一些预定义的形状元素，可被开发者使用和操作：
-
矩形
-
圆形
-
椭圆
-
线
-
折线
-
多边形
-
路径
<rect>矩形
<svg width="300" height="180">
<rect width="300" height="100" x="0" y="0" style="fill:rgb(0,0,255);stroke-width:1;stroke:rgb(0,0,0);stroke: #70d5dd" />
</svg>
rect元素的width和height属性可定义矩形的高度和宽度style属性用来定义 CSS 属性stroke-width属性定义矩形边框的宽度stroke属性定义矩形边框的颜色x属性定义矩形的左侧位置y属性定义矩形的顶端位置CSS的fill-opacity属性定义填充颜色透明度（合法的范围是：0 - 1）CSS的stroke-opacity属性定义轮廓颜色的透明度（合法的范围是：0 - 1）
<circle>圆形
<svg width="300" height="180">
<circle cx="150" cy="50" r="25" class="fancy" />
</svg>
<circle>标签的cx、cy、r属性分别为横坐标、纵坐标和半径，单位为像素。坐标都是相对于<svg>画布的左上角原点，class属性用来指定对应的 CSS 类。SVG 的 CSS 属性与网页元素有所不同。比如 fill：填充色， stroke：描边色，stroke-width：边框宽度...
<ellipse>椭圆
<svg width="300" height="180">
<ellipse cx="300" cy="80" rx="100" ry="50" style="fill:yellow;stroke:purple;stroke-width:2"/>
</svg>
CX属性定义的椭圆中心的x坐标CY属性定义的椭圆中心的y坐标RX属性定义的水平半径RY属性定义的垂直半径
<line>直线
<svg width="300" height="180">
<line x1="0" y1="0" x2="200" y2="200" style="stroke:rgb(255,0,0);stroke-width:2"/>
</svg>
<line>标签的x1属性和y1属性，表示线段起点的横坐标和纵坐标；x2属性和y2属性，表示线段终点的横坐标和纵坐标；style属性表示线段的样式
<polyline>折线
<svg width="300" height="180">
<polyline points="3,3 30,28 3,53" fill="none" stroke="black" />
</svg>
points属性指定了每个端点的坐标，横坐标与纵坐标之间与逗号分隔，点与点之间用空格分隔
<polygon>多边形。
<polygon> 标签用来创建含有不少于三个边的图形。
多边形是由直线组成，其形状是"封闭"的（所有的线条 连接起来）。
<svg height="210" width="500">
<polygon points="200,10 250,190 160,210" style="fill:lime;stroke:purple;stroke-width:1"/>
</svg>
points 属性定义多边形每个角的 x 和 y 坐标
<path>路径
<svg>
<path d="M150,0 L75,200 L225,200" />
</svg>
<path> 定义一个路径。
下面的命令可用于路径数据：
M = movetoL = linetoH = horizontal linetoV = vertical linetoC = curvetoS = smooth curvetoQ = quadratic Bézier curveT = smooth quadratic Bézier curvetoA = elliptical ArcZ = closepath
<text>绘制文本。
<svg width="300" height="180">
<text x="50" y="25">Hello World</text>
</svg>
<text>的x属性和y属性，表示文本区块基线（baseline）起点的横坐标和纵坐标。文字的样式可以用class或style属性指定。
<use>复制一个形状。
<svg viewBox="0 0 30 10" xmlns="http://www.w3.org/2000/svg">
<circle id="myCircle" cx="5" cy="5" r="4"/>
<use href="#myCircle" x="10" y="0" fill="blue" />
<use href="#myCircle" x="20" y="0" fill="white" stroke="blue" />
</svg>
<use>的href属性指定所要复制的节点，x属性和y属性是<use>左上角的坐标。另外，还可以指定width和height坐标。
<g>多个形状组成一个组（group）
<svg width="300" height="100">
<g id="myCircle">
<text x="25" y="20">圆形</text>
<circle cx="50" cy="50" r="20"/>
</g>
<use href="#myCircle" x="100" y="0" fill="blue" />
<use href="#myCircle" x="200" y="0" fill="white" stroke="blue" />
</svg>
<defs>自定义形状
它内部的代码不会显示
<svg width="300" height="100">
<defs>
<g id="myCircle">
<text x="25" y="20">圆形</text>
<circle cx="50" cy="50" r="20"/>
</g>
</defs>
<use href="#myCircle" x="0" y="0" />
<use href="#myCircle" x="100" y="0" fill="blue" />
<use href="#myCircle" x="200" y="0" fill="white" stroke="blue" />
</svg>
<pattern>自定义一个形状
该形状可以被引用来平铺一个区域
<svg width="500" height="500">
<defs>
<pattern id="dots" x="0" y="0" width="100" height="100" patternUnits="userSpaceOnUse">
<circle fill="#bee9e8" cx="50" cy="50" r="35" />
</pattern>
</defs>
<rect x="0" y="0" width="100%" height="100%" fill="url(#dots)" />
</svg>
