如何通过HTML的SVG的linearGradient和radialGradient添加渐变-html教程-PHP中文网

svg渐变必须定义在标签内并用url(#id)引用才生效；需配坐标对（如x1="0%" y1="0%" x2="100%" y2="0%"为水平渐变），百分比值更安全；的cx/cy/fx/fy不可省略以防偏移；fill/stroke必须用url(#id)且id严格匹配大小写。

如何通过html的svg的lineargradient和radialgradient添加渐变

必须把渐变定义在 <defs></defs> 里，再用 url(#id) 引用，否则不生效。

linearGradient 必须配 `<defs></defs>` 和坐标对

直接写 <lineargradient></lineargradient> 在 <svg></svg> 根下但不在 <defs></defs> 内，浏览器会忽略它。常见错误是漏掉 <defs></defs> 或写错闭合标签（比如只写了 <lineargradient></lineargradient> 没有）。

坐标决定方向：

x1="0%" y1="0%" x2="100%" y2="0%" → 水平渐变（左到右）
x1="0%" y1="0%" x2="0%" y2="100%" → 垂直渐变（上到下）
x1="0%" y1="0%" x2="100%" y2="100%" → 对角渐变

注意：百分比值更安全，像素值（如 x1="10"）在缩放或响应式场景下容易错位。

radialGradient 的 `cx`/`cy` 和 `fx`/`fy` 不是可有可无

省略 cx、cy 时默认为 "50%"，看似省事，但一旦父容器尺寸变化（比如 SVG 宽高设为 100%），中心点可能偏移——尤其当元素不是居中绘制时。

fx 和 fy 控制焦点位置，影响“光晕”感强弱：

anything-to-html

将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。

下载

fx="50%" fy="50%"：标准同心圆渐变
fx="20%" fy="30%"：焦点偏左上，右侧颜色过渡拉长

漏掉 fx/fy 不报错，但视觉效果和预期可能差很远，尤其做按钮悬停或图标高光时。

fill/stroke 必须用 `url(#id)`，不能直接写颜色

写成 fill="red" 或 fill="#ff0" 会覆盖渐变；写成 fill="url(#myGrad)" 才生效。注意：

ID 名称要严格匹配，大小写敏感（#grad ≠ #Grad）
URL 中的括号是英文半角，不能用中文全角符号
如果 SVG 是内联在 HTML 中，ID 不会跨 <svg></svg> 作用域；但如果是 <img src="icon.svg">，外部定义的渐变无法被引用

常见调试方式：先给图形加个纯色 fill="pink" 确认元素存在，再换回 url(#xxx)。

stop 的 `offset` 超出 0%–100% 会截断，不是报错

offset 可以设为负数或大于 100%，但超出范围的部分不会渲染——比如 <stop offset="-10%" stop-color="white"></stop> 和 <stop offset="150%" stop-color="black"></stop>，实际只从 0% 到 100% 过渡，首尾颜色会被“撑满”。这容易让人误以为渐变没起作用。

多个 <stop></stop> 可以精细控制中间色阶，但要注意顺序：offset 必须递增，否则行为未定义（Chrome 可能按顺序重排，Firefox 可能跳过）。

最易被忽略的一点：渐变定义本身不占渲染空间，<defs></defs> 里的内容不会显示，也不触发 layout，但它的 ID 必须在引用前声明——把 <defs></defs> 放在 SVG 后面，引用会失效。