SVG径向渐变的焦点由fx/fy（高光起始点）和cx/cy（渐变区域中心）协同控制；fx/fy决定颜色扩散起点，默认与cx/cy重合，分离时可模拟斜射光照、按钮凹凸等立体效果。

SVG 径向渐变（<radialGradient>）的“焦点”实际由两个关键点控制：圆心（cx/cy）和焦点（fx/fy）。二者分离时，能实现偏移高光、模拟斜射光照等视觉效果。

fx/fy 决定渐变起始点（视觉“高光中心”）

fx 和 fy 指定渐变颜色从哪一点开始扩散，即“焦点”。它默认与圆心（cx/cy）重合；一旦显式设置且位置不同，颜色过渡就从 fx/fy 出发，向圆周延伸，形成不对称光斑。

• 若未设置 fx/fy，浏览器自动取 cx/cy 值
• fx/fy 支持百分比（如 "20%"）或绝对数值（如 "50"），单位与 gradientUnits 一致
• 当 fx/fy 落在渐变圆外，高光会拉伸偏移，产生强烈透视感（常用于按钮凹凸效果）

cx/cy 定义渐变作用区域的几何中心

cx 和 cy 是渐变椭圆的中心坐标，影响整个渐变范围的定位。它不决定“起始色在哪”，而是划定“渐变画布”的锚点。

• 默认值为 "50%"，即容器水平/垂直中点
• 配合 fx/fy 错位使用时，cx/cy 可保持区域稳定，仅移动光源感——例如固定按钮边界，只调 fx 模拟鼠标悬停时的光点滑动
• 若用 objectBoundingBox（默认），所有值按引用元素宽高归一化（0–1）；若用 userSpaceOnUse，则按 SVG 坐标系像素值理解

实际配置建议与常见陷阱

要精准控制焦点效果，需协同设置单位、坐标和引用关系：

立即学习“前端免费学习笔记（深入）”；

• 优先使用 gradientUnits="objectBoundingBox"（默认），便于响应式设计；此时 cx="0.5" cy="0.5" fx="0.3" fy="0.4" 表示中心居中、高光偏左上
• 避免 fx/fy 超出 cx±r 太多，否则高光过度拉伸失真；可搭配 r（半径）微调覆盖范围
• 动画焦点时，只对 fx/fy 做 CSS transition 或 SMIL 动画，cx/cy 通常保持静态
• 注意：Firefox 和旧版 Safari 对 fx/fy 超出边界的支持更稳健，Chrome 在某些缩放场景下可能渲染轻微偏差

焦点配置本质是解耦“光源位置”与“受光区域中心”，掌握 fx/fy 与 cx/cy 的分工，就能可靠实现立体感、交互反馈等进阶效果。