如何从origo开始将圆形的径向渐变从objectboundingbox重写为userspaceonuse？

问题描述

这里有一个以objectBoundingBox坐标表示的径向渐变：

    <svg width="800" height="200" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
      <defs>
        <radialGradient id="myGradient3" cx="75%" fx="75%" cy="25%" fy="25%" r="50%" fr="0%">
          <stop offset="25%" stop-color="gold" />
          <stop offset="75%" stop-color="red" />
        </radialGradient>
      </defs>
    
      <circle cx="100" cy="100" r="100" fill="url('#myGradient3')" />
    </svg>

考虑具有以下不变量的径向渐变示例：

• 径向渐变是圆形的（不是椭圆形的）
• 只有一种形状代表径向渐变。
• 设置了属性cx，cy，fx，fy，fr，r

如果要将属性转换为使用userSpaceOnUseCoordinates，应该重新计算该属性如何？

这是我在伪代码中的最佳尝试

const shapeBox = shape.getBBox() // {x: 0,y: 0,width: 200,height: 200}
userspaceCX = cx * bBox.width // 150 = 75% * 200
userspaceFX = fx * bBox.width // 150 = 75% * 200
userspaceCY = cy * bBox.height // 50 = 25% * 200
userspaceFY = fy * bBox.height // 50 = 25% * 200
userspaceR = r * sqrt(bBox.height^2 + bBox.width^2) // 70.71 = 50% * sqrt(5000) = 50% * sqrt(200^2 + 200^2)
userspaceFR = fr * sqrt(bBox.height^2 + bBox.width^2) // 0 = 0% * sqrt(5000) = 50% * sqrt(200^2 + 200^2)

    <svg xmlns="http://www.w3.org/2000/svg" width="800" height="200">
      <defs>
        <radialGradient id="myGradient3__1" cx="150" fx="150" cy="50" fy="50" r="70.71" fr="0" gradientUnits="userSpaceOnUse">
          <stop offset="25%" stop-color="#ffd700"/>
          <stop offset="75%" stop-color="#f00"/>
        </radialGradient>
      </defs>
      <circle cx="100" cy="100" r="100" fill="url(#myGradient3__1)"/>
    </svg>

但是您可以看到是否运行了代码片段，转换后的图像与原始图像有些不同。

使我无法完成这项工作吗？

解决方法

对角线长度的计算应为

sqrt(bbox.height^2 + bbox.width^2) / sqrt(2)

代替

sqrt(bbox.height^2 + bbox.width^2)