1.svg的 polyline 和 path 的区别：
polyline：（直线，多条直线可以构建曲线）
<polyline> 元素是用于创建任何只有直线的形状
实例：
<svg xmlns="http://www.w3.org/2000/svg" version="1.1"> <polyline points="20,20 40,25 60,40 80,120 120,140 200,180" style="fill:none;stroke:black;stroke-3" /> </svg>
path:（路径）
<path> 元素用于定义一个路径。
指令：
M = moveto(M X,Y) ：将画笔移动到指定的坐标位置 L = lineto(L X,Y) ：画直线到指定的坐标位置 H = horizontal lineto(H X)：画水平线到指定的X坐标位置 V = vertical lineto(V Y)：画垂直线到指定的Y坐标位置 C = curveto(C X1,Y1,X2,Y2,ENDX,ENDY)：三次贝赛曲线 S = smooth curveto(S X2,Y2,ENDX,ENDY) Q = quadratic Belzier curve(Q X,Y,ENDX,ENDY)：二次贝赛曲线 T = smooth quadratic Belzier curveto(T ENDX,ENDY)：映射 A = elliptical Arc(A RX,RY,XROTATION,FLAG1,FLAG2,X,Y)：弧线 Z = closepath()：关闭路径
说明：
坐标轴为以(0,0)为中心，X轴水平向右，Y轴水平向下。 所有指令大小写均可。大写绝对定位，参照全局坐标系；小写相对定位，参照父容器坐标系 指令和数据间的空格可以省略 同一指令出现多次可以只用一个
1、L H V指令
M 起点X，起点Y L（直线）终点X，终点Y H（水平线）终点X V（垂直线）终点Y
如：M 10,20 L 80,50 M 10,20 V 50 M 10,20 H 90
2、A指令
允许不闭合。可以想像成是椭圆的某一段，共七个参数：
A RX,RY,XROTATION,FLAG1,FLAG2,X,Y
RX,RY指所在椭圆的半轴大小
XROTATION指椭圆的X轴与水平方向顺时针方向夹角，可以想像成一个水平的椭圆绕中心点顺时针旋转XROTATION的角度。
FLAG1只有两个值，1表示大角度弧线，0为小角度弧线。
FLAG2只有两个值，确定从起点至终点的方向，1为顺时针，0为逆时针
X,Y为终点坐标
如：m 200,250 a 150,30 0 1 0 0,70
实例：
<svg xmlns="http://www.w3.org/2000/svg" version="1.1"> <path d="M150 0 L75 200 L225 200 Z" /> </svg>
2.使用 svg 绘制室内地图：
3.基于已有的 svg矢量图 制作室内地图：
(1) 通过 sublime 可以解析出 svg 是由 polyline（或path）组成的
(2) 动态加添 圆点 <circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red" />
说明：
- cx和cy属性定义圆点的x和y坐标。如果省略cx和cy，圆的中心会被设置为(0, 0)
- r属性定义圆的半径
4.解决 svg 无法缩放的问题：
方案一：
外层包裹一层div , 并设置div的width、height、overflow:scroll
svg 设置 width="600"、height="600"、viewbox="0 0 500 500"
注：width、height 为 svg 的实际宽高，0 0 为 svg 的起始点，500 500 为 svg 的 视区盒子(即 svg相当于屏幕，viewbox 相当于截屏工具所截取部分视图)
5.设置 svg 的缩放
<script>
var svg = document.getElementById('svg');
var h = svg.getAttribute("height");
var w = svg.getAttribute("width");
document.getElementById('plus').addEventListener('click',function(){ // 放大
h = Number(h) + 10;
w = Number(w) + 10;
svg.setAttribute('height',h);
svg.setAttribute('width',w);
});
document.getElementById('reduce').addEventListener('click',function(){ // 缩小
h = Number(h) - 10;
w = Number(w) - 10;
svg.setAttribute('height',h);
svg.setAttribute('width',w);
});
</script>
.