zoukankan      html  css  js  c++  java
  • 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),会导致背景没有事件——用透明
  • 相关阅读:
    工厂方法模式
    简单工厂模式
    页面滚动动画
    JAVA的深浅拷备
    雷哥架构师课程大钢
    字节与字符串转换
    商城图片懒加载
    MYSQL数据库类型与JAVA类型对应表
    微信支付二码生成办法
    项目中dubbo的标准配置
  • 原文地址:https://www.cnblogs.com/chaofei/p/8012801.html
Copyright © 2011-2022 走看看