SVG 的 和 实现图形复用， 定义不渲染的模板（如图形、渐变）， 通过 href="#id" 引用并实例化独立副本，支持定位与样式定制，ID 必须唯一且 # 不可省略。
SVG 的 <defs></defs> 和 <use></use> 是实现图形复用的核心机制，本质是“先定义、后引用”，不渲染 <defs></defs> 内容，只把它当作模板库。
defs：只定义、不显示的图形仓库
<defs></defs> 是 SVG 中的声明容器，里面的内容不会直接出现在画布上。它用来预存可复用的图形元素，比如 <circle></circle>、<path></path>、<g></g>，甚至渐变（<lineargradient></lineargradient>）或滤镜（<filter></filter>）。浏览器解析时跳过渲染，只记下定义，供后续调用。
- 必须放在
<svg></svg>标签内，位置通常在开头或结尾，不影响逻辑 - 内部元素可以带
id，这是<use></use>引用的唯一依据 - 支持嵌套，比如
<defs></defs>里再放一个<defs></defs>，但无实际必要
use：按需实例化，生成独立副本
<use></use> 通过 xlink:href（HTML5 中推荐简写为 href）指向 <defs></defs> 中某个带 id 的元素，从而在指定位置“画出”一份副本。这个副本是独立的——修改 <use></use> 的属性（如 fill、transform）不会影响原定义，也不会影响其他 <use></use> 实例。
- 支持
x、y属性控制插入位置（相对于原图左上角） - 可叠加
transform实现旋转、缩放等效果 - 若被引用的元素本身有坐标（如
<circle cx="10" cy="10"></circle>），<use></use>的x/y会与之相加，形成最终位置
关键细节：ID 必须唯一，href 必须带 # 号
引用时 href 值必须是形如 "#myCircle" 的片段标识符，开头的 # 不可省略。ID 在整个文档中需唯一，否则行为不可预测。另外，<use></use> 不能跨 <svg></svg> 引用（除非用外部文件 + href="file.svg#id"，但受同源策略限制）。
立即学习“前端免费学习笔记（深入）”；
- 错误写法：
<use href="myCircle"></use>（缺 #） - 错误写法：
<use href="#other-svg-id"></use>（跨 svg 引用失败） - 正确写法：
<use href="#icon-home" x="20" y="30"></use>
不复杂但容易忽略
defs 和 use 的组合让 SVG 具备类似“符号库”的能力，既减少重复代码，又便于统一维护。改一个定义，所有 use 实例自动更新样式基础；每个 use 又能个性化着色或定位。只要记住“定义不画、引用才画，ID 要对、# 不能少”，就掌握了核心逻辑。
