SVG

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),会导致背景没有事件——用透明
原文地址:https://www.cnblogs.com/chaofei/p/8012801.html