1，SVG是可伸缩矢量图形。
含有不同标签<rect>用于创建矩形。<circle>创建圆形。<ellipse>用于创建椭圆。<line>线。<polyline>折线。<polygon>多边形
2，svg <path d="M 250,150 L150,350 L350 350 Z"/>
定义了一条路径，開始于（250px,150px），到达（150px,350px），再到达（350px,350px），最后在（250px,150px）处关闭路径
下面命令 大写表示绝对定位。小写表示相对定位：
- M = moveto
- L = lineto
- H = horizontal lineto
- V = vertical lineto
- C = curveto
- Z = closepath
3，svg <g>
将多个元素组织在一起，属性继承，能够嵌套使用。能够使用transform进行偏移。
<defs>
<g id='group1'>
<line x1='0' y1='0' x2='200' y2='200'>
</g>
</defs>
<use xlink:href='group1' stroke='blue' fill='black'/>//直接使用
<g id='group2' stroke='blue' fill='black'>
<use xlink:href='group1'/>//嵌套使用
</g>
4，svg ViewBox
假设svg图形太大或者太小。就能够用ViewBox属性来调整在页面中的显示范围、大小。
<svg width="50cm" height="25cm" viewBox="0 0 2050 1000" > ：意思是以 2050px ， 1000px 视野观看 svg （世界）图形的范围，显示到 50cm,25cm 的视窗， 0 0 是在视口中的起点坐标。
PS:世界：无穷大；视野ViewBox是观察世界的矩形区域。视窗是浏览器开辟区域。由width height控制。一般视野视窗一样大。
视野默认显示在视窗的中间。视窗全然包括视野。
假设设置preserveAspect属性的meetOrSlice为slice。则视野包括视野 。假设设置preserveAspect属性的align属性可设置为xMinYMin，xMidYMin,xMaxYMin,xMinYMid....none则是百分百填充拉伸。
下图为默认样式：绿色为视窗（300*200）。红色为视野（400*400）。
下图为align属性为xMinYMin，xMinYMax，该属性跟宽高比有关:
![]()
5，enable-background设置可获得背景图片
6。svg坐标系统：
笛卡尔直角坐标系y轴朝下，
用户坐标系：世界坐标系；svg标签的坐标系 。又称原始坐标系。
自身坐标系：默认与前驱坐标系，元素变换之后脱离前驱坐标系。所设置x y都是针对自身坐标系
前驱坐标系： 父容器的坐标系。
參考坐标系
7，坐标变换
a，线性变换：
b。
c。
PS：
1。基本操作：
创建图形：document.createElementNS（ns，tagName）
加入图形：element.appendChild（childElement）
设置/获取属性：element.setAttribute（name，value）element.getAttribute（name。value）
2，浏览器渲染svg一像素的问题。假设基元素的线是整数，设置viewbox时 使用"-0.5 -0.5 400 200"渲染出来的图像更锐利
3，stroke-linecap=round;该属性定义线段端点风格 可使用属性：butt square round
stroke-lineJoin=round：该属性定义线段连接处风格 可使用属性：miter，round。bevel
stroke-dasharray=“5，10”：该属性设置线段虚实线 第一个參数是虚线段每段长度。第二个是空隙的长度