svg: svg预定义的形状

SVG 有一些预定义的形状元素，可被开发者使用和操作：
矩形 <rect>
圆形 <circle>
椭圆 <ellipse>
线 <line>
折线 <polyline>
多边形 <polygon>
路径 <path>

矩形

<rect x="20" y="20" width="250" height="250"
style="fill:blue;stroke:pink;stroke-width:5;
opacity:0.9"/>

<rect x="20" y="20" rx="20" ry="20" width="250"
height="100" style="fill:red;stroke:black;
stroke-width:5;opacity:0.5"/>

圆形

<circle cx="100" cy="50" r="40" stroke="black"
stroke-width="2" fill="red"/>

椭圆

<ellipse cx="300" cy="150" rx="200" ry="80"
style="fill:rgb(200,100,50);
stroke:rgb(0,0,100);stroke-width:2"/>

线

<line x1="0" y1="0" x2="300" y2="300"
style="stroke:rgb(99,99,99);stroke-width:2"/>

折线

<polyline points="0,0 0,20 20,20 20,40 40,40 40,60"
style="fill:white;stroke:red;stroke-width:2"/>

多边形

<polygon points="220,100 300,210 170,250"
style="fill:#cccccc;
stroke:#000000;stroke-width:1"/>  

路径

<path> 标签用来定义路径。

下面的命令可用于路径数据：

M = moveto
L = lineto
H = horizontal lineto
V = vertical lineto
C = curveto
S = smooth curveto
Q = quadratic Belzier curve
T = smooth quadratic Belzier curveto
A = elliptical Arc
Z = closepath

<path d="M250 150 L150 350 L350 350 Z" />

笔画和填充特性

笔画特性

stroke: 笔画颜色，默认值为none
stroke-width: 笔画宽度，可用用户坐标或者指定单位的方式指定。笔画的宽度会相对坐标网格线居中。默认值为1
stroke-opacity: 数字，从0.0到1.0. 0.0是完全透明，1.0是完全不透明
stroke-dasharray: 用一系列的数字来指定虚线和间歇的长度。这些数字只能使用用户坐标。默认值为none
stroke-linecap: 线头尾的形状，值为butt(默认值). round或square
stroke-linejoin: 图形的棱角或者一系列连线形状，取值为miter(尖的，默认值),round或者bevel(平的)
stroke-miterlimit: 相交处显示宽度与线宽的最大比例，默认值为4

填充特性

fill: 指定填充颜色，默认值为black
fill-opacity: 数字，从0.0到1.0. 0.0是完全透明，1.0是完全不透明
fill-rule: 属性值为nonzero(默认值)或evenodd。该属性决定判断某个点是否在图形内部的方法