<defs> 是 SVG 中专用于“存而不画”的资源仓库，必须嵌套在 <svg> 标签下，可定义图形、渐变、滤镜等资源并通过唯一 ID 供 <use> 复用，各 SVG 的 <defs> 不共享。
defs 必须嵌套在 svg 标签下
它不是全局声明，不能直接放在 <body> 里。浏览器只会识别嵌套在某个 <svg> 内部的 <defs>。否则定义再完整，也完全无效。
- 正确位置：可以是
<svg>的第一个子元素，也可以放在末尾，逻辑上无差别 - 多个
<svg>元素之间互不共享<defs>，每个都只对自己内部生效 - 若需跨 SVG 复用，目前最稳妥的方式仍是复制整个
<defs>块
定义图形时务必指定唯一 ID
ID 是 <use> 引用的唯一凭证，必须在整个文档中唯一，且引用时 # 不可省略。
- ID 命名建议只用字母、数字、下划线和短横线，避免开头为数字或短横线（如
id="icon-home"可，id="1icon"或id="-icon"易出兼容问题） - 定义一个圆：
<circle id="myCircle" cx="0" cy="0" r="10"/> - 后续引用写法必须是：
<use href="#myCircle" x="20" y="30"/>，缺#就找不到
支持多种资源类型，不止是图形
<defs> 不仅能存 <circle>、<path> 这类基本图形，还能集中管理渐变、滤镜、裁剪路径、图案等高级资源。
- 渐变要配合
fill="url(#grad-id)"使用，不能直接设颜色值 - 滤镜默认作用范围太小，常需设置
width="200%" height="200%" x="-50%" y="-50%"避免边缘被截断 -
<clipPath>和<pattern>同样依赖<defs>定义，再通过clip-path="url(#id)"或fill="url(#id)"调用
搭配 use 实现灵活复用
<use> 不是简单拷贝，而是生成独立副本——改颜色、调位置、加变换，都不影响其他实例，也不影响原始定义。
- 可用
x、y控制左上角偏移；若原图有坐标（如cx="10"），最终位置是相加结果 - 支持
transform，比如transform="rotate(45) scale(0.8)" - 每个
<use>可单独设fill、stroke等样式，适合做主题化图标系统
