svg渐变和滤镜需三步到位：defs中定义、url(#id)引用、坐标单位匹配；lineargradient用百分比控向，radialgradient须显式设fx/fy；滤镜宽高宜≥200%，链路顺序不可乱；渐变与滤镜嵌套可提升立体感。
SVG 渐变和滤镜不是“加个属性就出效果”的简单开关，而是需要结构定义、坐标对齐、引用绑定三步到位的声明式系统。关键在 <defs></defs> 里先定义，再用 url(#id) 显式调用，漏掉任一环都会静默失效。
渐变色必须放在 里，且坐标单位要匹配
线性渐变和径向渐变都不能直接写在图形标签内部——必须嵌套在 <defs></defs> 中，否则浏览器直接忽略。
-
linearGradient：方向靠
x1 y1 x2 y2控制。推荐全用百分比（如x1="0%" y1="0%" x2="100%" y2="0%"），避免像素值在缩放时错位；若改用userSpaceOnUse，需确保viewBox已正确定义 -
radialGradient：
cx cy fx fy r全部显式写出，哪怕值是"50%"。省略fx/fy会导致高光偏移，做按钮悬停或球体效果时特别明显 - 每个
<stop></stop>建议设 3–4 个，中间插入灰阶过渡色（如#fff → #f5f5f5 → #e0e0e0），比两色直推更自然；stop-opacity可用于边缘虚化
滤镜要设够宽高，链路顺序不能乱
滤镜本质是一条图像处理流水线，输入（SourceGraphic）、加工（feOffset/feGaussianBlur等）、输出（feBlend）必须按逻辑串联，且容器尺寸不足会裁剪效果。
-
width和height建议设为"200%"或更大（如"160%"），尤其带阴影/发光时，否则边缘被截断 - 标准阴影链路：
feOffset→feGaussianBlur→feColorMatrix（调暗/染色）→feBlend（叠回原图）。其中stdDeviation小于 2 是硬边，8–12 是柔影，20+ 易糊成光晕 - 外发光推荐用
feFlood + feMerge：先模糊原图，再用feFlood填纯色，最后合并——比单纯模糊更可控、配色更自由
渐变 + 滤镜协同：让简单图形有立体感
单独渐变显得平，只套滤镜容易脏，真正提升质感的是二者嵌套使用——比如把渐变作为图形填充，再给该图形加滤镜强化边界或添加光影。
- 文字加外发光：文字
fill设为线性渐变，再通过filter添加feGaussianBlur + feFlood发光层 - 金属按钮模拟：用径向渐变制造高光区（
fx="30%" fy="30%"），再叠加微偏移阴影（dx="-2" dy="-2"）和浅色模糊，避开 WebKit 对feSpecularLighting的兼容问题 - 遮罩需求别硬套 CSS：
mask-image支持有限，稳妥做法是 SVG<mask> + <lineargradient></lineargradient></mask>，灰度渐变控制显示区域（#fff显示，#000遮挡）
颜色矩阵（feColorMatrix）快速实现调色效果
不用写复杂矩阵也能调色，type 属性提供预设模式，安全又高效：
-
type="sepia" values="0.8"：80% 褐色复古感 -
type="saturation" values="0.4"：降低饱和度，呈现低彩灰调 -
type="luminanceToAlpha"：把亮度转为透明度，常用于生成 Alpha 遮罩 - 组合使用更实用：比如先
luminanceToAlpha提取明暗，再接feFlood + feBlend上色，做出水墨晕染效果
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
