SVG渐变需严格遵循三层约束：必须置于内且位于引用元素之前，linearGradient用百分比坐标控制方向，radialGradient的cx/cy/fx/fy不可省略，fill/stroke须用正确大小写和半角括号的url(#id)引用。
SVG渐变不是“加个颜色过渡”那么简单，它是一套需要精准控制的视觉系统。真正用好linearGradient和radialGradient的关键，在于理解定义位置、坐标逻辑、引用规则这三层硬约束——漏掉任何一层，渐变都会静默失效。
渐变必须塞进里，且顺序不能错
这是最常被跳过的前提：SVG渐变资源必须声明在<defs></defs>标签内，且<defs></defs>必须是<svg></svg>的直接子元素，还要出现在所有引用它的图形之前。
- 错误写法：
<svg><rect fill="url(#g)"></rect><defs><lineargradient id="g">...</lineargradient></defs></svg>→ 渐变不生效 - 正确结构：
<svg><defs><lineargradient id="g">...</lineargradient></defs><rect fill="url(#g)"></rect></svg> - 内联SVG中ID不跨
<svg></svg>作用域；用<img src="icon.svg" alt="SVG渐变效果实战：linearGradient与radialGradient深度应用" >时，外部HTML里的<defs></defs>完全无效
linearGradient方向靠两组坐标，百分比才是安全写法
方向由x1/y1（起点）和x2/y2（终点）连线决定，不是靠CSS类或关键词。用像素值容易在响应式场景下错位，推荐统一使用百分比。
-
x1="0%" y1="0%" x2="100%" y2="0%"→ 水平渐变（左到右） -
x1="0%" y1="0%" x2="0%" y2="100%"→ 垂直渐变（上到下） -
x1="0%" y1="0%" x2="100%" y2="100%"→ 对角渐变（左上到右下） - 漏掉闭合标签
会导致后续SVG解析异常，务必配对书写
radialGradient的cx/cy/fx/fy一个都不能省
省略cx或cy虽默认为"50%"，但在宽高设为100%或父容器缩放时，中心点极易偏移；fx和fy控制焦点位置，直接影响光晕感和立体效果。
- 标准同心圆：
cx="50%" cy="50%" fx="50%" fy="50%" - 高光偏左上（适合按钮悬停）：
cx="50%" cy="50%" fx="20%" fy="30%" - 半径
r默认"100%"，若设为"40%"，渐变只覆盖图形中心区域 - 不写
fx/fy不会报错，但视觉偏差大，尤其在图标或微交互中明显
fill/stroke必须用url(#id)，大小写和括号都要对
写成fill="red"或fill="#ff0"会直接覆盖渐变；必须用fill="url(#myGrad)"才生效，且ID严格区分大小写、括号必须英文半角。
-
fill="url(#grad)" ≠ fill="url(#Grad)"→ 大小写不匹配，渐变失效 -
fill="url（#grad）"→ 中文全角括号，引用失败 - 调试建议：先给图形加
fill="pink"确认元素存在且位置正确，再换回url(#xxx) -
<stop offset="0%" stop-color="white"></stop>和<stop offset="150%" stop-color="black"></stop>中，超出0%–100%的部分会被截断，首尾颜色被“撑满”
