图形
SVG 图形
矩形
矩形的属性如下：
1.rect 元素的 width 和 height 属性可定义矩形的高度和宽度 2.style 属性用来定义 CSS 属性 3.CSS 的 fill 属性定义矩形的填充颜色（rgb 值、颜色名或者十六进制值） 4.CSS 的 stroke-width 属性定义矩形边框的宽度 5.CSS 的 stroke 属性定义矩形边框的颜色 6.x 属性定义矩形的左侧位置（例如，x=”0” 定义矩形到浏览器窗口左侧的距离是 0px） 7.y 属性定义矩形的顶端位置（例如，y=”0” 定义矩形到浏览器窗口顶端的距离是 0px） 8.CSS 的 fill-opacity 属性定义填充颜色透明度（合法的范围是：0 - 1） 9.CSS 的 stroke-opacity 属性定义笔触颜色的透明度（合法的范围是：0 - 1） 10.CSS opacity 属性用于定义了元素的透明值 (范围: 0 到 1)。 11.rx 和 ry 属性可使矩形产生圆角。
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<rect
x="50"
y="20"
rx="20"
ry="20"
width="150"
height="150"
style="fill:red;stroke:black;stroke-width:5;opacity:0.5"
/>
</svg>
圆形
cx 和 cy 属性定义圆点的 x 和 y 坐标。如果省略 cx 和 cy，圆的中心会被设置为(0, 0)，r 属性定义圆的半径。
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red" />
</svg>
椭圆
CX 属性定义的椭圆中心的 x 坐标，CY 属性定义的椭圆中心的 y 坐标；RX 属性定义的水平半径，RY 属性定义的垂直半径。
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<ellipse cx="240" cy="100" rx="220" ry="30" style="fill:purple" />
<ellipse cx="220" cy="70" rx="190" ry="20" style="fill:lime" />
<ellipse cx="210" cy="45" rx="170" ry="15" style="fill:yellow" />
</svg>
直线
直线的属性如下：
1.x1 属性在 x 轴定义线条的开始 2.y1 属性在 y 轴定义线条的开始 3.x2 属性在 x 轴定义线条的结束 4.y2 属性在 y 轴定义线条的结束
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<line
x1="0"
y1="0"
x2="200"
y2="200"
style="stroke:rgb(255,0,0);stroke-width:2"
/>
</svg>
多边形
points 属性定义多边形每个角的 x 和 y 坐标。
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<polygon
points="200,10 250,190 160,210"
style="fill:lime;stroke:purple;stroke-width:1"
/>
</svg>
路径
所有命令均允许小写字母。大写表示绝对定位，小写表示相对定位。
M = moveto
L = lineto
H = horizontal lineto
V = vertical lineto
C = curveto
S = smooth curveto
Q = quadratic Bézier curve
T = smooth quadratic Bézier curveto
A = elliptical Arc
Z = closepath