demo:https://github.com/fei1314/SVG/tree/master
1)svg样式的两种写法 1.属性形式 2.style形式------推荐 样式优先级:属性<*<标签<class<id<行内<important 2)SVG图形 1.样式操作---------跟HTML一样(推荐用style) 2.事件操作---------跟HTML一样(完全一样) 3.属性操作---------有点区别(set/get) HTML 设置: .xxx=xxx .setAttribute 获取: .xxx .getAttribute SVG 设置: .setAttribute 获取: .getAttribute 3)DOM操作 获取:和HTML一样 创建:SVG:createElementNS('http://www.w3.org/2000/svg') 事件、修改、大部分操作跟HTML一样 不同:attribute、createElementNS('网址', 标签) 4)图形 1.rect 矩形 x,y,width,height,rx,ry x:起点坐标 y:终点坐标 矩形的宽度 height:矩形高度 rx:x方向上的圆角 ry:y方向上的圆角 2.circle 正圆 cx,cy,r cx:圆心坐标x cy:圆心坐标y r:圆的半径 3.ellipse 椭圆 cx,cy,rx,ry cx:圆心坐标x cy:圆心坐标y rx:长半轴 ry:短半轴 4.line 直线 x1,y1,x2,y2(起点坐标,终点坐标) 5.path M/L/Z/A M x,y 起点坐标 L x,y 直线的终点坐标(可以是多个) Z 关闭路径 A rx ry x-axis-rotation large-arc-flag sweep-flag x y x半径 y半径 x轴旋转的角度 大弧标志 镜像标志 终点坐标 注意:如果没有背景色(fill:none),会导致背景没有事件——用透明