svg径向渐变的焦点由fx/fy（高光起始点）和cx/cy（渐变区域中心）协同控制；fx/fy决定颜色扩散起点，默认与cx/cy重合，分离时可模拟斜射光照、按钮凹凸等立体效果。
SVG 径向渐变（<radialgradient></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 的分工，就能可靠实现立体感、交互反馈等进阶效果。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
