如何将SVG的gradientTransform转换为JavaFX渐变参数

我明白你在开发SVG转JavaFX节点库时遇到的这个渐变转换难题——尤其是SVG的gradientTransform怎么映射到JavaFX渐变的参数上，确实挺绕的。我来一步步拆解这个问题，帮你理清思路。

首先，先把无gradientTransform的基础对应关系理清楚，这是后续处理的前提：

• 基础映射（无transform时）
  • JavaFX的center直接对应SVG的cx、cy
  • JavaFX的radius直接对应SVG的r
  • 关于focus-angle和focus-distance：
    • 如果SVG没指定fx、fy，焦点和中心重合，所以focus-angle为0°，focus-distance为0%
    • 如果SVG指定了fx、fy，focus-angle是从中心(cx,cy)到焦点(fx,fy)的角度（用atan2(fy - cy, fx - cx)计算后转成度数），focus-distance是焦点到中心的距离除以SVG的r（因为JavaFX的这个参数是相对半径的比例，范围0到1）

接下来是核心的gradientTransform处理——本质上，这个属性是对SVG渐变的整个坐标系做仿射变换，所以我们需要把SVG渐变的所有关键参数（中心、焦点、半径）都应用这个变换，再映射到JavaFX的参数中。具体步骤如下：

1. 解析gradientTransform为仿射变换矩阵 #

SVG的gradientTransform是由多个变换函数（比如translate、skewX、scale、rotate）组合而成的，这些函数都可以转换成3x3的仿射变换矩阵（齐次坐标）。注意：SVG的变换顺序是从右到左应用的，比如skewX(20) translate(-35, 0)，实际是先执行translate(-35, 0)，再执行skewX(20)。

举个例子，你提供的skewX(20) translate(-35, 0)对应的矩阵计算后，对任意点(x,y)的变换公式为：
x' = x - 35 + y * tan(20°)（tan(20°)≈0.3640），y' = y

2. 对SVG渐变的关键元素应用变换矩阵 #

把SVG径向渐变的所有关键点和尺寸都用上面的变换公式计算：

• 中心坐标：将SVG的cx、cy代入变换公式，得到JavaFX的center坐标
• 焦点坐标：如果SVG指定了fx、fy，同样代入变换公式；如果没指定，焦点和变换后的中心重合
• 半径/椭圆尺寸：SVG的r是圆形半径，经过仿射变换后会变成椭圆。你需要计算变换后椭圆的x、y半轴长度：
  比如原SVG中从中心出发的x方向向量(cx + r, cy)，变换后得到的点与变换后中心的距离就是椭圆的x半轴；y方向向量(cx, cy + r)变换后与中心的距离是y半轴。

3. 计算JavaFX渐变的最终参数 #

基于变换后的坐标和尺寸，计算JavaFX需要的参数：

• center：直接用变换后的中心坐标（比如你例子中得到的101.4px 100px）
• focus-angle：如果变换后焦点和中心不重合，计算从中心到焦点的角度（用atan2(fy' - cy', fx' - cx')转成度数）
• focus-distance：变换后焦点到中心的距离，除以椭圆的对应半轴长度（得到比例值）
• radius/椭圆尺寸：用变换后的x、y半轴长度，在JavaFX CSS中用ellipse <x-radius> <y-radius>来定义

用你提供的例子实际验证 #

你给出的带transform的SVG径向渐变：

<svg viewBox="0 0 420 200" xmlns="http://www.w3.org/2000/svg">
  <radialGradient id="gradient" gradientUnits="userSpaceOnUse" cx="100" cy="100" r="100" gradientTransform="skewX(20) translate(-35, 0)">
    <stop offset="0%" stop-color="red" />
    <stop offset="100%" stop-color="blue" />
  </radialGradient>
  <rect x="0" y="0" width="200" height="200" fill="url(#gradient)" />
</svg>

按照上面的步骤计算后，对应的JavaFX CSS渐变应该是：

radial-gradient(ellipse 100px 106.4px at 101.4px 100px, red 0%, blue 100%)

（这里的106.4是y半轴的近似值，由变换后的y方向向量距离计算得到）

最后补充一句：线性渐变的gradientTransform处理逻辑是完全一致的——把SVG的渐变起点、终点应用变换矩阵，直接作为JavaFX线性渐变的起点和终点即可。

内容来源于stack exchange