SVG 图形元素

rect 创建一个矩形

主要属性：
x,y 可选，矩形的左上角的坐标，省略则默认(0,0)。
rx 可选，x轴的半径（round元素）。
ry 可选，y轴的半径（round元素）。
width 必需，矩形的宽度"。
height 必需，矩形的高度"。

<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
  <rect x="50" y="20" width="150" height="100" 
	style="fill:red;stroke:black;stroke-width:20;"/>
</svg> 	
	
<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
  <rect x="50" y="20" rx="30" ry="40" width="150" height="100" fill="red" />
</svg> 

rect 元素设置了边框时，整个图形的尺寸是目标尺寸 width/height 加上1个边框宽度。
对 rect 设置 box-sizing 属性是无效的。

circle 创建一个圆

专有属性：
cx, cy 可选，圆心坐标。如果省略，圆的中心会被设置为(0, 0)。
r 必需，圆的半径

<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
  <circle cx="100" cy="75" r="50" fill="red"/>
</svg> 	
	
<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
  <circle cx="100" cy="75" r="50" stroke="black" stroke-width="20" fill="red"/>
</svg> 

circle 元素设置了边框时，整个图形的直径是目标参数 r 的2倍在加上1个边框宽度。
对 circle 设置 box-sizing 属性是无效的。

ellipse 创建一个椭圆

主要属性：
cx,cy 可选，椭圆中心点坐标。省略时默认值(0,0)。
rx 必须，水平半径。
ry 必须，垂直半径。

<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
  <ellipse cx