【 SVG 】一、SVG 概要

一、SVG 可缩放矢量图形

可缩放矢量图形（Scalable Vector Graphics, SVG），基于 XML 标记语言，W3C XML 的分支语言之一，用于描述二维矢量图形。

二、 SVG 功能

SVG 可以通过定义必要的线和形状来创建一个图形，也可以修改已有的位图，或者将这两种方式结合起来创建图形；

它还允许我们编写可缩放的二维图形，并可通过 CSS 或 JavaScript 进行操作。

三、SVG 特点

优点：矢量图形不失真，实现了 DOM 接口，不需要安装第三方扩展等；
缺点：加载慢；

四、SVG 元素（常用元素）

• 容器元素

  • <a> 可以理解为超链接标签
  • <defs> 可以理解为定义公共图形
  • <g> 可以理解为一个图形组
  • <mask> 遮罩层
  • <pattern> 常定义在 defs 中，用于填充、描边元素（背景图）
  • <svg> 作为一个 svg 图层的根元素
  • <switch> 是否显示元素（switch 子元素的 display 无效）
  • <symbol> 定义一个图形模板对象，它可以用一个 use 元素实例化
    
    

• 渐变元素

  • <linearGradient> 线性渐变
  • <radialGradient> 径向渐变
  • <stop> 渐变颜色坡度（配合linearGradient、radialGradient 作为其子元素使用）
    
    

• 图形元素

  • <circle> 绘制正圆
  • <ellipse> 绘制椭圆
  • <image> 渲染图片
  • <line> 绘制线
  • <path> 绘制自定义路径
  • <polygon> 绘制闭合多边形（首位相连）
  • <polyline> 绘制开放多边形（首位不相连）
  • <rect> 绘制矩形
  • <text> 绘制文字
  • <marker> 标记（例：绘制箭头），通常配合 path、line、polyline、polygon 绘制标记；
    
    

• 引用元素

  • <use> 用于引用 defs 定义的全局图层
    
    

• 文本元素

  • <textPath> 文字路径
  • <text> 由文字组成的图形（可配合渐变、团、遮罩等进行高级应用）
  • <tspan> 具体的文字标签（常用于调整同一 text 图形下文字的不同位置、样式等）
    
    

五、SVG 属性（常用属性）

• 核心属性

  • id 唯一标识 svg 元素
    
    

• 样式属性

  • class 类名
  • style 内联样式
    
    

• 显示属性（显示属性可直接写入 style 属性中: style=“color:red;”）

  • color 字体颜色
  • fill 填充色
  • font-family 字体家族属性
  • opacity 透明度
  • stroke 边框
    
    

• 滤镜原始属性

  • height 高
  • width 宽
  • x 对于父级容器的 x 轴偏移
  • y 对于父级容器的 y 轴偏移
    
    

• 动画属性

  • 动画时间属性
    • begin 开始
    • end 结束
    • min 最小
    • max 最大
      
      
  • 动画取值属性
    • from 从那开始
    • to 到哪结束
      
      

• 文档事件属性

  • onresize 大小改变
  • onscroll 滚轮滚动
    
    

• 全局事件属性

  • onclick 单击
  • ondblclick 双击
  • ondrag 拖拽
  • onfocus 焦点
  • onkeydown 按下
  • onkeyup 抬起
    
    

六、SVG 工具

1. 创建工具：Inkscape、Adobe Illustrator
2. SVG 实操库：SVG.js