SVG渐变必须定义在<defs>内并用url(#id)引用，否则不显示；linearGradient/radialGradient需配齐坐标且闭合，fill/stroke须严格匹配ID大小写和英文括号。
SVG渐变必须定义在<defs>里，再用url(#id)引用，否则图形不会显示渐变色——这是最常被忽略的前提，不是浏览器bug，是规范强制要求。
linearGradient 必须嵌套在 <defs> 中且配齐坐标
<linearGradient>不能直接写在<svg>根下，也不能漏掉</linearGradient>闭合标签。它必须放在<defs>内部，否则整个定义会被渲染引擎静默忽略，图形只显示默认填充（通常是黑色或透明）。
方向由x1、y1、x2、y2决定，推荐统一用百分比值：
-
x1="0%" y1="0%" x2="100%" y2="0%"→ 水平渐变（左到右） -
x1="0%" y1="0%" x2="0%" y2="100%"→ 垂直渐变（上到下） -
x1="0%" y1="0%" x2="100%" y2="100%"→ 对角渐变（左上到右下）
注意：gradientUnits默认是objectBoundingBox，此时x1="50"无效，必须写x1="50%"；若设为userSpaceOnUse，则需确保viewBox已正确定义，否则渐变可能偏移或不可见。
立即学习“前端免费学习笔记（深入）”；
radialGradient 的 cx/cy/fx/fy 不可省略
<radialGradient>的cx、cy控制圆心位置，fx、fy控制焦点位置。它们默认都是"50%"，但省略会导致行为不稳定——尤其当SVG宽高设为100%或父容器动态缩放时，中心点容易意外偏移。
常见错误写法：<radialGradient id="grad">（没写任何坐标属性），结果渐变看起来“歪了”或“太小”。正确做法是显式声明：
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
-
cx="50%" cy="50%" fx="50%" fy="50%"→ 标准同心圆 -
cx="30%" cy="70%" fx="20%" fy="30%"→ 焦点偏左上，右侧过渡拉长
漏掉fx/fy不报错，但视觉效果和预期差距很大，尤其做按钮悬停高光或图标立体感时，这点极易被忽视。
fill/stroke 必须用 url(#id)，ID 大小写敏感
写成fill="red"或fill="#ff0"会直接覆盖渐变；必须写成fill="url(#myGrad)"才生效。其中#myGrad必须与<linearGradient id="myGrad">中的id完全一致，包括大小写——#grad ≠ #Grad。
URL里的括号必须是英文半角，中文全角括号（如（#grad））会导致引用失败；另外，<defs>必须出现在引用它的图形元素之前，DOM顺序很重要。
调试建议：先给图形加个临时纯色（如fill="pink"）确认元素存在且位置正确，再换回url(#xxx)。
stop 的 offset 超出 0%–100% 会被截断
<stop offset="-10%" stop-color="white"/>和<stop offset="150%" stop-color="black"/>不会报错，但实际只从0%到100%过渡，首尾颜色会被“撑满”，容易误判为渐变没生效。
多个<stop>必须按offset递增排列，比如0%、50%、100%。如果顺序错乱（如100%写在0%前面），行为未定义：Chrome可能自动重排，Firefox可能跳过某些stop，导致颜色突变或缺失。
最易被忽略的一点：<defs>本身不占渲染空间，也不触发 layout，但它定义的资源 ID 必须在引用前完成声明——把<defs>放在 SVG 结尾，而图形在开头引用，就会失效。
