必须嵌套在内部，否则渐变、滤镜等资源一律不生效；它是svg作用域内的资源仓库，非全局容器，且url(#id)仅在当前内有效。
<defs></defs> 必须嵌套在 <svg></svg> 内部，否则定义的渐变、滤镜、裁剪路径等资源一律不生效——这不是兼容性问题，是 SVG 规范强制要求。
为什么<defs></defs>放 body 里没用
浏览器只解析 <svg></svg> 标签内的子元素，<defs></defs> 不是全局注册表。常见错误是把 <defs></defs> 直接写在 下，或放在多个 <svg></svg> 之间，结果 fill="url(#grad)" 完全无效，控制台也不报错，图形就用默认色渲染。
-
<defs></defs>必须是某个<svg></svg>的直接子元素（可以是第一个、中间或最后一个） - 每个
<svg></svg>自成作用域：url(#id)只在当前<svg></svg>内有效，跨 SVG 复用必须复制<defs></defs>块，或用<use href="#id"></use>引用已渲染的 SVG 中的<symbol></symbol>（但<lineargradient></lineargradient>等不可被<use></use>引用） - 如果 SVG 是通过
<img src="icon.svg">引入的，HTML 页面里的任何<defs></defs>都不起作用——渐变必须写进 SVG 文件内部
<lineargradient></lineargradient> 和 <clippath></clippath> 必须提前声明
SVG 解析器是顺序执行的，引用必须出现在定义之后。把 <rect fill="url(#g)"></rect> 写在 <defs></defs> 前面，或者把 <clippath></clippath> 放在 <use></use> 后面，都会导致静默失败。
-
<defs></defs>推荐放在<svg></svg>开头，避免顺序踩坑 -
<lineargradient></lineargradient>的x1/y1/x2/y2建议用百分比（如x1="0%"），不加单位会被当像素值，导致渐变拉伸异常 -
<clippath></clippath>默认单位是用户坐标系，加clipPathUnits="objectBoundingBox"更适合响应式场景（比如裁剪一个<rect></rect>的 50% 区域）
<filter></filter> 宽高设太小会导致阴影/模糊被截断
像 <feoffset dx="20" dy="20"></feoffset> + <fegaussianblur stddeviation="8"></fegaussianblur> 这类操作会把像素“推出”原始图形边界。如果 <filter></filter> 的 width/height 还是默认的 "100%"，超出部分就被裁掉了——看起来像阴影消失、模糊变浅或完全不可见。
- 安全写法：
<filter id="shadow" x="-50%" y="-50%" width="200%" height="200%"></filter> -
in属性决定输入源：in="SourceGraphic"是带 fill/stroke 的完整图形，in="SourceAlpha"只取透明度通道（适合纯黑投影） - 链式处理时，用
result="xxx"显式命名中间输出，后续节点通过in="xxx"引用，避免依赖隐式顺序
ID 命名不规范会让 url(#id) 在 Safari 或旧版 Chrome 失效
不是所有字符都允许出现在 ID 中。用连字符（-）、点号（.）、开头数字（如 id="1gradient"）或中文，在部分浏览器里会导致 url(#id) 解析失败，且无提示。
- 只用字母、数字、下划线（
_）、短横线（-），但避免开头为数字或短横线（id="grad_main"✅，id="-grad"❌） -
<stop offset="0%"></stop>比offset="0"或offset="0.0"更可靠——小数易误写为逗号分隔（0,5），百分比可读性高且兼容性好 - 大小写必须严格匹配：
fill="url(#MyGrad)"和<lineargradient id="mygrad"></lineargradient>是不同 ID
<svg></svg> 共存时，<defs></defs> 里的 ID 必须全局唯一。重复 ID 不会报错，但后加载的会覆盖前一个，导致某处渐变突然变成另一处的样式——这种问题很难定位，尤其在组件化开发中。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
