(一)基本图形
一、<rect> 巨型
x
-
y
横纵坐标(原点是浏览器左上方)
width
-
height
这个巨型的宽高
rx
-
ry
圆角
如果只给了rx或者ry说明这个圆角是等半径的
二、<circle> 圆形
- cx
- cy
- r
三、<ellipse> 椭圆形
- cx
- cy
- rx
- ry
四、<line> 直线
x1
y1
x2
-
y2
起点、终点坐标
五、<polyline> 折线
-
points
(二)填充、描边和变换
fill 填充
stroke 描边颜色
stroke-width 描边的粗细
-
transform 变形
(三)基本操作api
在写js的svg操作要引入命名空间: SVG_NS = 'http://www.w3.org/2000/svg';
-
创建图形
document.createElementNS(ns, tagName);
-
添加图形
element.appendChild(childElement);
-
设置/获取属性
element.setAttribute(name, value);
element.getAttribute(value);