svg(一)

<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">
</svg>

xmlns="http://www.w3.org/2000/svg" 链接到SVG命名空间的属性

version="1.1" 用户所使用SVG版本的属性

• <rect>矩形

<svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg">
    <rect x="20" y="20" width="250" rx="20" height="250" style="fill:blue;stroke:pink;stroke-width:5; fill-opacity:0.1;stroke-opacity:0.9"/>
</svg>

　　x="0" 定义矩形到浏览器窗口左侧的距离是 0px

　　rx="20"横轴圆角

• <circle>圆形

<svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg">
     <circle cx="42" cy="42" r="40" stroke="yellow" stroke-width="1" fill="transparent"/>
</svg>

　　cx 和 cy 属性定义圆点的 x 和 y 坐标。如果省略 cx 和 cy，圆的中心会被设置为 (0, 0)【1/4圆】

• <line>线条

<svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg">
    <line x1="0" y1="0" x2="300" y2="300" style="stroke:rgb(99,99,99);stroke-width:2"/>
</svg>

　　x1 属性在 x 轴定义线条的开始 y1 属性在 y 轴定义线条的开始 x2 属性在 x 轴定义线条的结束  y2 属性在 y 轴定义线条的结束

• <path>用标签定义路径

<svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg">
    <path d="M250 150 L150 350 L350 350 Z" />
</svg>
<svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg">

    <path d="M153 334 C153 334 151 334 151 334 C151 339 153 344 156 344 C164 344 171 339 171 334 C171 322 164 314 156 314
C142 314 131 322 131 334
C131 350 142 364 156 364
C175 364 191 350 191 334
C191 311 175 294 156 294
C131 294 111 311 111 334
C111 361 131 384 156 384
C186 384 211 361 211 334
C211 300 186 274 156 274" style="fill:white;stroke:red;stroke-width:2"/>
</svg>　　

　　d表示一系列的坐标值

M x,y 将画笔移到指定的坐标位置

L x,y 划线到指定的坐标位置

H x 画水平线到指定的X坐标位置

V y画垂直线到指定的Y坐标位置

C 三次贝赛曲线

T 映射

A Rx,Ry,XROTATION,FLAG1,FLAG2  elliptical Arc,弧线

Rx,Ry 指所在椭圆的半轴大小

XROTATION指椭圆的x轴与水平方向顺时针方向夹角，可以想象成一个水平的椭圆绕中心顺时针旋转的角度

FLAG1有两个值，1表示大角弧线，0表示小角度弧线

FLAG2 有两个值，确定从起点至终点的方向，1为顺时针，0为逆时针

x,y 为终点坐标

Z 关闭路径