SVG

最新推荐文章于 2025-01-16 20:17:14 发布

转载最新推荐文章于 2025-01-16 20:17:14 发布 · 80 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/chaofei/p/8012801.html

本文详细介绍SVG图形编程的基础知识，包括SVG样式的写法、图形绘制方法、DOM操作及事件处理等核心内容。通过本文，读者将了解到如何使用不同的方式设置SVG样式，掌握矩形、圆形等基本图形的绘制技巧，并学会利用SVG进行有效的DOM操作。

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:终点坐标
  width:矩形的宽度
  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