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