持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第2天，点击查看活动详情
学习svg，以下知识必须掌握：
svg基础
<svg>
包裹并定义整个矢量图。 标签之于矢量图就如同 标签之于一个 web 页面。
<line>
创建一条直线。
坐标x1 y1 x2 y2
<polyline>
创建折线。
point = "3 3, 19 19, 40 40"
<rect>
创建矩形
x：左上角的 x 轴坐标值 y：左上角的 y 轴坐标值 width：矩形的宽度 height：矩形的高度 rx 和 ry 来指定矩形的圆角半径
<ellipse>
创建圆和椭圆
cx：中心位置在 x 轴上的坐标 cy：中心位置在 y 轴上的坐标 rx：沿 x 轴向的半径，也就是它会把图形分割成上下两部分 ry：沿 y 轴向的半径，也就是它会把图形分割成左右两部分
<polygon>
创建多边形
折线 不是闭合的而多边形 是自动闭合的。
<path>
通过指定点以及点和点之间的线来创建任意形状。
M 表示移动到（moveto）。用 x 值和 y 值来给定起始点 L 表示划线到（lineto）。从当前位置到新的位置画一条线。 Z 表示闭合路径。通过在当前点和路径的起始点之间画一条直线来闭合形状。 A 椭圆x轴，椭圆y轴，旋转角度，绘制大弧1还是小弧0，顺时针1还是逆时针0，圆弧终点坐标
<defs>
定义一个可复用的图形。初始情况下 里面的内容是不可见的。 标签之于矢量图就如同 标签之于一个 web 页面。
<g>
将多种形状组合起来。将组合后的形状置于 中可以让它能够被复用。
<symbol>
模板：类似于一个组合，但是拥有一些额外的特性。通常被置于 标签中便于复用。 模板几乎和组合一样
viewBox属性： viewBox 属性4个值。前两个定义图标的左上角，第三和第四分别定义它的宽度和高度。用来定义每个模板的可见部分应该是什么。 <symbol id="alert" viewBox="0 0 86 86">
<use>
使用：获取在 中定义的复用对象并在 SVG 中显示出来。
在基于组合图标的 元素上添加宽高的属性没有效果：浏览器依靠的是 viewBox 的值（组合没有这个值）来确定如何缩放图标，所以在中修改宽高没用 <use href="#alert" x="100" y="200" width="100" height="100"></use>
其他属性
xmlns（XMLNamespace），xml命名空间，用于解决标记命名冲突。
viewBox视区：视区，就是在svg上截取一小块，放大到整个svg显示。
viewport svg元素大小
preserveAspectRatio（保持长宽比） <svg preserveAspectRatio="对齐方式 缩放策略" 九种对齐方式：
xMinYMin xMidYMin xMaxYMin xMidYMid xMidYMid xMaxYMid xMaxYMin xMaxYMid xMaxYMax
三种策略 对应取值 说明 none，表示不保持长宽比，直接缩放viewBox和viewport保持一样大小 meet，即尽量符合，在viewBox图像能完全显示的情况下，尽量放大它。 slice，即viewport不留有任何空白，可以接受viewBox图像放大后，被切掉一部分。
在meetOrSlice取值为meet的时候，是按最短边来缩放，即图片能够完整的显示出来。所以最短边都能够拉伸到跟viewPort的短边等长。所以无论怎么调整y的值都是不会有效果的。
坐标轴
SVG 2删除了对xlink命名空间的需要，所以不xlink:href应该使用href。
矩阵变换
扩大两倍：transform="scale(2) x轴两倍，y轴四倍：transform="scale(2, 4)
移动：translate(80,80)
旋转：rotate(30, 100, 100) 30角度，[100, 100]位置，点
先缩放scale和先移动transfrom有区别
线性变换 matrix：前面几个的简写
坐标转换
dom坐标转换为svg坐标，并在svg中加入svg
利用api获取坐标系的点
动画
animate 变化动画：animateTransform 移动动画：animateMotion
svg.js
1 svg
// 创建使用该方法
var draw = SVG()
var draw = SVG().addTo('#drawing')
// 这个方法只能获取不能创建
var rect = SVG('#myRectId')
// 不写#也是按ID获取
var rect = SVG('myRectId')
// any css selector will do
var path = SVG('#group1 path.myClass')
// 创建图形
var circle = SVG('<circle>')
// 转换dom为svgjs对象
var obj = SVG(node)
2 基础
通用： SVG().add('#id').size() .fill("颜色") .attr()属性，可以在里面加各种东西.attr({fill:'颜色'})
- rect(100,200) radius(10, 20)圆角
- circle(100) 100代表圆心（50，50） radius(75),代表半径
- 椭圆：ellipse(200, 100) 有两个参数，它们的width和height .radius(75, 50),width和height的一半
- line(0, 0, 100, 150) 参数是两个点 .stroke({ width: 1 })
- polygonModel多边形
