linearGradient 必须嵌套在 <defs> 中，因为 SVG 渲染引擎将 <defs> 视为资源仓库，其中定义的渐变、图案等不直接渲染，仅供复用；漏掉 <defs> 会导致渐变被忽略而图形显示默认色。
linearGradient 是 SVG 原生支持的矢量渐变定义方式，不是 CSS 函数，不能直接写在 style 里；它必须放在 <defs> 中，再通过 fill 或 stroke 引用 url(#id) 才能生效。
为什么 linearGradient 必须嵌套在 <defs> 里
SVG 渲染引擎把 <defs> 当作资源仓库——里面定义的 <linearGradient>、<pattern>、<filter> 都不直接渲染，只供复用。漏掉 <defs>，浏览器会忽略该渐变，图形显示为默认色（通常是黑色或透明）。
- 常见错误现象：SVG 图形完全没颜色，或只显示轮廓，控制台无报错但渐变不出现
-
<defs>可以放在<svg>任意位置（开头、结尾、中间），但建议统一放在顶部，便于维护 - 多个图形共用同一个渐变时，只需定义一次
<linearGradient>，节省 DOM 节点和内存
x1/y1/x2/y2 的单位和取值逻辑
这四个属性决定渐变方向线段的起点与终点，它们的解释方式取决于 gradientUnits 属性：
- 默认值是
objectBoundingBox：此时x1="0"表示图形左边界，x1="1"表示右边界，y1="0.5"表示垂直居中——所有值都是 0–1 区间内的比例，与图形实际尺寸无关 - 设为
userSpaceOnUse：此时x1="10"就是用户坐标系里的绝对 x=10，需确保图形坐标系已正确定义（比如设置了viewBox），否则容易偏移或不可见 - 错误用法：
offset="50%"在<stop>中合法，但x1="50%"在objectBoundingBox下也合法；而x1="50px"在objectBoundingBox模式下会被忽略（规范不支持带单位数值）
如何让渐变随图形缩放/旋转自动适配
关键在 gradientUnits 和 gradientTransform 的组合使用：
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 用
gradientUnits="objectBoundingBox"（推荐默认）：图形被scale(2)或rotate(30)时，渐变自动重映射到新包围盒上，保持填充完整 - 需要更精细控制（比如斜切渐变方向），可加
gradientTransform="rotate(45)"，它作用于渐变坐标系本身，不影响图形几何变换 - 避免混用：如果
gradientUnits="userSpaceOnUse"却又对图形做transform，渐变不会同步动，会出现“渐变卡死在原位”的错位感
<stop> 的 offset 和 color 写法陷阱
<stop> 定义颜色断点，它的 offset 是归一化位置，stop-color 是颜色值：
立即学习“前端免费学习笔记（深入）”；
-
offset只接受无单位数值（0、0.5、1）或百分比（"0%"、"50%"），二者等价；写成"0.5px"或"50"（缺%）会导致该<stop>失效 -
stop-color支持所有 CSS 颜色语法：#f00、rgb(255,0,0)、hsla(0,100%,50%,0.8)，但不支持currentcolor - 至少需要两个
<stop>，否则渐变无过渡；可以有多个，比如实现三色平滑过渡：<stop offset="0" stop-color="#ff6b6b"/><stop offset="0.5" stop-color="#4ecdc4"/><stop offset="1" stop-color="#44b5b1"/>
url(#myGrad) 和 id="mygrad" 不会关联。另外，内联 SVG 中若用 JS 动态修改 x1 等属性，记得调用 setAttribute()，而不是操作 CSS 样式。 
