html5 SVG

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”：该属性设置线段虚实线 第一个参数是虚线段每段长度，第二个是空隙的长度