必须嵌套在 内部，不能独立存在于 HTML body 中；它仅在所属 作用域内生效，其中定义的 、 等资源须通过 url(#id) 显式引用，且 id 命名需规范。
defs 必须包裹在
直接把 <defs></defs> 放在 HTML body 里是无效的——它不是全局定义容器，而是 SVG 坐标系内的逻辑分组。浏览器只会解析嵌套在 <svg></svg> 标签内的 <defs></defs> 内容。
常见错误现象：<defs></defs> 定义了 <lineargradient></lineargradient>，但 fill="url(#myGrad)" 不生效，检查 DOM 就会发现该 <defs></defs> 根本没被 SVG 解析器读取。
- 必须确保每个
<defs></defs>都是某个<svg></svg>的直接子元素（可以是第一个、中间或最后一个子元素） - 多个 SVG 元素之间不共享
<defs></defs>；url(#id)只在当前<svg></svg>内有效 - 如果需要跨 SVG 复用，得复制
<defs></defs>块，或用<use></use>引用已渲染的 SVG 中的定义（有兼容性限制）
渐变必须用 url(#id) 引用，且 id 不能含特殊字符
定义好 <lineargradient></lineargradient> 或 <radialgradient></radialgradient> 后，不能直接写 fill="red" 期望它自动生效；必须显式通过 url(#xxx) 指向那个 id。
容易踩的坑：id 值用了连字符、点号或开头数字，比如 id="bg-grad" 或 id="1st-stop"，会导致 url(#bg-grad) 在部分浏览器（尤其是旧版 Safari）中解析失败。
立即学习“前端免费学习笔记（深入）”；
- 只用字母、数字、下划线、短横线（但避免开头为数字或短横线）；推荐命名如
id="grad_bg"或id="mainLinear" -
<stop></stop>的offset推荐用百分比（"0%","100%"），避免小数如0.5—— 虽然合法，但可读性差且易误写为0,5（逗号分隔） - 渐变方向参数（如
x1="0%" y1="0%" x2="100%" y2="0%"）默认单位是百分比，不加单位会被当成像素值，导致渐变异常压缩
滤镜要调宽高范围，否则阴影/模糊被截断
默认 <filter></filter> 的 width 和 height 是 "100%"，但像 <feoffset></feoffset> + <fegaussianblur></fegaussianblur> 这类操作会把像素“移出”原始边界。如果没扩大滤镜区域，偏移或模糊部分就会被裁掉，看起来像阴影消失或变浅。
典型表现：设置了 dx="20" dy="20" 和 stdDeviation="8"，结果阴影只显示右下角一小块，甚至完全不可见。
- 安全做法：统一设
width="200%" height="200%"，并配x="-50%" y="-50%"，让滤镜锚点居中扩展 -
in属性决定输入源：SourceGraphic是整个图形（含 fill/stroke），SourceAlpha只取 Alpha 通道（常用于纯黑阴影） - 链式处理时，用
result给中间输出命名（如result="offsetOut"），后续节点用in="offsetOut"引用，避免隐式依赖顺序
clipPath 和 pattern 也依赖 defs，但引用方式略有不同
<clippath></clippath> 和 <pattern></pattern> 同样必须放在 <defs></defs> 里，但它们的引用目标不是颜色属性，而是 clip-path CSS 属性或 fill 的 url(#id) 值。
一个易忽略点：<clippath></clippath> 内部的图形（如 <circle></circle>）坐标是相对于其父 <svg></svg> 的，不是相对于被裁剪元素——所以若裁剪区域位置不对，大概率是没注意坐标系基准。
-
<pattern></pattern>的width/height默认单位是“用户坐标”，不是像素；设width="10" height="10"表示每 10 单位铺一次，需结合patternUnits="userSpaceOnUse"显式控制 - 用
clip-path="url(#myClip)"时，CSS 属性值必须带引号（尤其在内联 style 中），否则空格会导致解析中断 - IE 和旧 Edge 不支持
clip-path的 URL 引用，只能靠clipPath元素 + SVG 内联使用；现代项目若需兼容，得降级为overflow: hidden+ 容器约束
<defs></defs> 在顶部，url(#xxx) 在底部元素上，中间还可能穿插 JS 动态修改。一旦 id 名字不一致、大小写错位、或 SVG 被 innerHTML 替换后 <defs></defs> 丢失，效果就全没了。调试时优先查 DOM 是否存在该 id 节点，再确认 url 字符串拼写和引号闭合。 
