如何将基于objectBoundingBox的SVG径向渐变转换为userSpaceOnUse坐标？

首先得明确objectBoundingBox和userSpaceOnUse的核心区别：前者的坐标是相对于应用渐变元素边界框的比例（元素左上角对应(0,0)，右下角对应(1,1)），后者则直接使用SVG画布的绝对坐标。

已知你的矩形参数：

• 位置：x=50，y=100
• 尺寸：width=200，height=100

转换公式（对应径向渐变的每个参数） #

• 水平坐标（cx、fx）：元素x值 + 比例参数 × 元素width
• 垂直坐标（cy、fy）：元素y值 + 比例参数 × 元素height
• 渐变半径（r）：根据SVG规范，objectBoundingBox模式下的r是元素边界框对角线一半的比例，公式为：比例参数 × (√(width² + height²) / 2)

代入你的参数计算 #

1. cx：50 + 0.3 × 200 = 110
2. cy：100 + 0.4 × 100 = 140
3. fx：50 + 0.1 × 200 = 70
4. fy：100 + 0.2 × 100 = 120
5. r：0.3 × (√(200² + 100²) / 2) ≈ 33.54（如果不需要高精度，也可以近似为33.5）

转换后的完整SVG代码 #

<svg width="300" height="300">
  <defs>
    <radialGradient id="MyGradient" gradientUnits="userSpaceOnUse" cx="110" cy="140" r="33.54" fx="70" fy="120">
      <stop offset="0%" stop-color="red" />
      <stop offset="50%" stop-color="blue" />
      <stop offset="100%" stop-color="black" />
    </radialGradient>
  </defs>
  <rect fill="url(#MyGradient)" stroke="black" stroke-width="5" x="50" y="100" width="200" height="100"/>
</svg>

小提示：有些场景下开发者会简化半径计算，用r = 比例参数 × max(width, height)（这里就是0.3×200=60），但这不符合SVG规范，渐变范围会比原效果偏大，建议优先遵循规范的对角线计算方式。

内容的提问来源于stack exchange，提问作者user1283776