svg详解
定义
SVG 意为可缩放矢量图形（Scalable Vector Graphics）。SVG 使用 XML 格式定义图像。在浏览器中展示的SVG需要浏览器解释执行，IE8不支持SVG。
实例：
<html>
<body>
<h1>My first SVG</h1>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<circle cx="100" cy="50" r="40" stroke="black"
stroke-width="2" fill="red" />
</svg>
</body>
</html>SVG 代码写在SVG标签中 。这是根元素。width 和 height 属性可设置此 SVG 文档的宽度和高度。version 属性可定义所使用的 SVG 版本，xmlns 属性可定义 SVG 命名空间。
svg预定义元素：
矩形 <rect>
圆形 <circle>
椭圆 <ellipse>
线 <line>
折线 <polyline>
多边形 <polygon>
路径 <path>
文字 <text>
分组<g>
g 标记就是’group’的简写，是用来分组用的，它能把多个元素放在一组里，对 g 标记实施的样式和渲染会作用到这个分组内的所有元素上。组内的所有元素都会继承 g 标记上的所有属性。用定义的分组还可以使用 use 进行复制使用。
<svg width="200" height="100" viewBox="0 0 200 100">
<g fill="blue" id="myClip">
<circle cx="30" cy="30" r="20"/>
<circle cx="100" cy="70" r="30"/>
</g>
</svg>
clipPath-裁剪
能限制哪些地方可见，哪些地方不可见。标记指定的区域之外的所有内容都不会被显示(图像不会被绘制出来)。剪切路径是用clipPath元素定义的，属性clip-path可用来引用剪切路径。默认情况下，一个形状，其被剪切掉的区域（不可见的区域）是不响应鼠标事件的。
// 超出矩形区域将不会被绘制
<svg width="120" height="120"
viewPort="0 0 120 120" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<defs>
<clipPath id="myClip">
<circle cx="30" cy="30" r="20"/>
<circle cx="100" cy="70" r="30"/>
</clipPath>
</defs>
<rect x="10" y="10" width="100" height="100"
clip-path="url(#myClip)" fill='red' />
</svg>
use-深度复用
use 标记的作用是能从 SVG 文档内部取出一个节点，克隆它，并把它输出到别处。跟’引用’很相似，但它是深度克隆。
<svg width="200" height="200" viewBox='0 0 60 60'>
<style>
.classA { fill:red }
</style>
<defs>
<g id="Port">
<circle style="fill:inherit" r="5"/>
</g>
</defs>
<use x="20" y="10" xlink:href="#Port" />
<use x="20" y="30" xlink:href="#Port" class="classA"/>
<use x="20" y="50" xlink:href="#Port" style="fill:blue"/>
</svg>
defs-模板
defs 元素用于预定义一个元素使其能够在 SVG 图像中重复使用，和 g 结合使用。
<svg width="300" height="300" viewport="0 0 300 300">
<defs>
<g id="shape">
<rect x="25" y="50" width="50" height="50" />
<circle cx="25" cy="50" r="50" />
<circle fill="orange" cx="25" cy="50" r="5" />
</g>
</defs>
<use xlink:href="#shape" x="50" y="25" />
<use xlink:href="#shape" x="200" y="25" />
<use xlink:href="#shape" x="50" y="150" />
</svg>
symbol-模板
symbol 标记的作用是定义一个图像模板，它的作用相当于 g 和 defs 的结合，你可以使用 use 标记实例化它，然后在 SVG 文档中反复使用，这种用法非常的高效。symbol 本身不会输出任何图像，只有使用 use 实例化后才会显示。。
<svg viewBox="0 0 150 150" height='300'>
<symbol id="sym01" viewBox="0 0 150 110">
<circle cx="50" cy="50" r="40" stroke-width="8" stroke="red" fill="red"/>
<circle cx="90" cy="60" r="40" stroke-width="8" stroke="green" fill="white"/>
</symbol>
<use xlink:href="#sym01"
x="0" y="0" width="100" height="50"/>
<use xlink:href="#sym01"
x="0" y="50" width="75" height="38"/>
<use xlink:href="#sym01"
x="0" y="100" width="50" height="25"/>
</svg>
text 元素用于定义文本
<svg width="200" height="400">
<!-- y 设置为 0 是看不到的 -->
<text x="10" y="1" fill="red">hello world !</text>
<text x="10" y="25" fill="blue">hello world !</text>
<!-- 旋转文本 -->
<text x="0" y="45" fill="red"
transform="rotate(30 20,40)">hello world !</text>
<!-- 文本组 -->
<text x="10" y="105" style="fill:red;">这里有几行文字：
<tspan x="10" y="125">这是第一行文字。</tspan>
<tspan x="10" y="145">第二行文字在这里。</tspan>
</text>
<!-- 加超链接 -->
<a xlink:href="http://lwpersonal.cn/other/draw/Canvas/SVG.html"
target="_blank">
<text x="10" y="170" fill="orange">超链接 !</text>
</a>
<!-- 按路径渲染文本 -->
<defs>
<path id="path1" d="M10,190 a1,1 0 0,0 100,0" />
</defs>
<text x="10" y="190" style="fill:red;">
<textPath xlink:href="#path1">I love SVG I love SVG</textPath>
</text>
<!-- x 的值定义距离上一个文本的 x 的绝对距离，dx 定义相对距离 -->
<text x="10 30 50" dx="-10 0 20" y="280 300 280" fill="red">hello world !</text>
<!-- 定义每一个文本的距离 -->
<text x="10" y="330" letter-spacing="10" fill="red">hello world !</text>
<!-- 定义文本相对于 x 坐标的处理方法 -->
<text x="100" y="360" text-anchor="middle" fill="red">hello world !</text>
<text x="100" y="390" text-anchor="end" fill="red">hello world !</text>
</svg>
元素属性：
height 高
width 宽
style 定义css属性
fill 填充色
fill-opacity 填充透明度
fill-rule 图形填充规则 https://blog.csdn.net/zsy_snake/article/details/80960763
stroke-width 边框宽
stroke 边框颜色
stroke-opacity 边框颜色透明度
cx、cy 圆心坐标
r 半径
rx、ry 水平、垂直半径（椭圆）
x1、y1 直线起点坐标
x2、y2 直线终点坐标
points 多点坐标
d <path>中坐标 https://blog.csdn.net/zSY_snake/article/details/80962896