svg渐变必须定义在内并用url(#id)引用，否则不显示；lineargradient/radialgradient需配齐坐标且闭合，fill/stroke须严格匹配id大小写和英文括号。
SVG渐变必须定义在<defs></defs>里，再用url(#id)引用，否则图形不会显示渐变色——这是最常被忽略的前提，不是浏览器bug，是规范强制要求。
linearGradient 必须嵌套在 中且配齐坐标
<lineargradient></lineargradient>不能直接写在<svg></svg>根下，也不能漏掉闭合标签。它必须放在<defs></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></radialgradient>的cx、cy控制圆心位置，fx、fy控制焦点位置。它们默认都是"50%"，但省略会导致行为不稳定——尤其当SVG宽高设为100%或父容器动态缩放时，中心点容易意外偏移。
常见错误写法：<radialgradient id="grad"></radialgradient>（没写任何坐标属性），结果渐变看起来“歪了”或“太小”。正确做法是显式声明：
-
cx="50%" cy="50%" fx="50%" fy="50%"→ 标准同心圆 -
cx="30%" cy="70%" fx="20%" fy="30%"→ 焦点偏左上，右侧过渡拉长
漏掉fx/fy不报错，但视觉效果和预期差距很大，尤其做按钮悬停高光或图标立体感时，这点极易被忽视。
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
fill/stroke 必须用 url(#id)，ID 大小写敏感
写成fill="red"或fill="#ff0"会直接覆盖渐变；必须写成fill="url(#myGrad)"才生效。其中#myGrad必须与<lineargradient id="myGrad"></lineargradient>中的id完全一致，包括大小写——#grad ≠ #Grad。
URL里的括号必须是英文半角，中文全角括号（如（#grad））会导致引用失败；另外，<defs></defs>必须出现在引用它的图形元素之前，DOM顺序很重要。
调试建议：先给图形加个临时纯色（如fill="pink"）确认元素存在且位置正确，再换回url(#xxx)。
stop 的 offset 超出 0%–100% 会被截断
<stop offset="-10%" stop-color="white"></stop>和<stop offset="150%" stop-color="black"></stop>不会报错，但实际只从0%到100%过渡，首尾颜色会被“撑满”，容易误判为渐变没生效。
多个<stop></stop>必须按offset递增排列，比如0%、50%、100%。如果顺序错乱（如100%写在0%前面），行为未定义：Chrome可能自动重排，Firefox可能跳过某些stop，导致颜色突变或缺失。
最易被忽略的一点：<defs></defs>本身不占渲染空间，也不触发 layout，但它定义的资源 ID 必须在引用前完成声明——把<defs></defs>放在 SVG 结尾，而图形在开头引用，就会失效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
