HTML怎么做svg渐变_HTML svg linearGradient渐变推荐

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 的组合使用：

• 用 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"/>

真正容易被忽略的是：渐变 ID 的引用必须严格匹配，包括大小写和特殊字符；url(#myGrad) 和 id="mygrad" 不会关联。另外，内联 SVG 中若用 JS 动态修改 x1 等属性，记得调用 setAttribute()，而不是操作 CSS 样式。