svg渐变必须定义在内且位于引用前，否则被静默忽略；方向由百分比坐标控制，radialgradient的cx/cy/fx/fy需显式设置，id大小写和括号格式必须严格匹配。
SVG渐变必须定义在<defs></defs>里才能生效
直接把<lineargradient></lineargradient>或<radialgradient></radialgradient>写在<svg></svg>根下，浏览器会静默忽略——图形照常渲染，但只用默认填充色（通常是黑或透明）。这不是 bug，是 SVG 规范强制要求：渐变是“资源”，不是“图形元素”，必须收进<defs></defs>容器中声明。
常见错误写法：<svg><lineargradient id="g">...</lineargradient><rect fill="url(#g)"></rect></svg> —— 这种顺序无效，<defs></defs>必须包裹渐变定义，且要出现在所有引用它的图形之前。
-
<defs></defs>必须是<svg></svg>的直接子元素 - 如果 SVG 是通过
<img src="icon.svg">引入的，HTML 中的<defs></defs>完全不起作用，渐变必须定义在 SVG 文件内部 - 内联 SVG 中，ID 作用域仅限当前
<svg></svg>，不能跨多个<svg></svg>复用同一个 ID
<lineargradient></lineargradient>的方向由x1/y1/x2/y2决定，百分比更安全
方向不是靠 CSS 类或关键词控制，而是靠两组坐标点连线的方向。比如x1="0%" y1="0%" x2="100%" y2="0%"就是左到右水平渐变；x1="0%" y1="0%" x2="0%" y2="100%"是上到下垂直渐变。
用像素值（如x1="50"）容易出问题：当 SVG 宽高设为100%、或配合viewBox缩放时，渐变会“错位”甚至消失。百分比值基于objectBoundingBox（默认单位），适配性更强。
- 必须写闭合标签：
<lineargradient>...</lineargradient>，漏掉会导致后续所有 SVG 内容解析异常 -
gradientUnits默认是objectBoundingBox；若设为userSpaceOnUse，则需确保viewBox已正确定义，否则坐标系统错乱 - 方向线段本身不绘制，只定义过渡路径；线段长度不影响渐变效果，只影响方向
<radialgradient></radialgradient>的cx/cy/fx/fy不能省略
省略cx或cy时，浏览器按"50%"处理，看似省事，但一旦父容器尺寸变化（比如响应式 SVG 宽高设为100%），中心点可能严重偏移——尤其当图形本身没居中绘制时。
fx和fy控制焦点位置，直接影响“光晕”感。比如fx="20%" fy="30%"会让高光偏左上，右侧颜色过渡拉长；漏掉它们不会报错，但视觉效果和预期可能差很远，做按钮悬停或图标高光时特别明显。
-
cx/cy定义圆心位置，fx/fy定义焦点位置（可不同），二者都推荐显式写出 - 半径
r默认是"100%"，表示从圆心到边界；若设为"50%"，渐变只覆盖图形中心区域 - 和
<lineargradient></lineargradient>一样，必须放在<defs></defs>内，且fill或stroke必须用url(#id)引用
fill="url(#id)"不生效？检查大小写、括号、作用域三处硬匹配
写成fill="#ff0"会直接覆盖渐变；写成fill="url(#myGrad)"才触发引用。但只要 ID 名称、括号格式或作用域有一处不匹配，渐变就断掉，且浏览器不报错——图形只是默默回退到默认填充。
- ID 大小写敏感：
url(#grad)≠url(#Grad) - 括号必须是英文半角：
url(#grad)正确，url（#grad）（中文括号）直接失效 - 作用域限制：内联 SVG 中，
<defs></defs>只能被同个<svg></svg>内的图形引用 - 调试技巧：先给图形加
fill="pink"确认它存在且位置正确，再换回url(#xxx)
最易被忽略的一点：<defs></defs>里的渐变定义不占渲染空间，也不触发 layout，但它必须在引用前声明——把<defs></defs>放在 SVG 底部，或者跨 SVG 引用，都会让渐变“看不见”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
