SVG gradient gradient units vs gradienttransform - 不是同一个梯度

Question

我正在尝试找出从 gradienttransform 到 gradientunits 的转换。我得到不同的梯度分布。为什么？

<svg width="540" height="540" xmlns="http://www.w3.org/2000/svg" >
  <defs>
    <linearGradient id="linear1" gradientTransform="rotate(45 0.5 0.5)" spreadMethod="pad">
      <stop offset="0%" stop-color="gold"/>
      <stop offset="100%" stop-color="blue"/>
    </linearGradient>
    <linearGradient id="linear2" x1="0%" y1="0%" x2="100%" y2="100%" spreadMethod="pad">
      <stop offset="0%" stop-color="gold"/>
      <stop offset="100%" stop-color="blue"/>
    </linearGradient>
  </defs>
  
  <rect fill="url(#linear1)" x="0" y="0" width="270" height="270" />
  <rect fill="url(#linear2)" x="0" y="270" width="270" height="270" />
</svg>

这2个梯度不一样：

Answer 1

因为长方形旋转45度后，左右边的距离不等于一个角到对角的距离。

左右相距270个单位（默认x2为100%，其他默认为0%）
角相隔 270 * √2 个单位

因此 x1,y1 和 x2,y2 之间的距离在每种情况下都是不同的，因为旋转变换是距离不变的。

SVG gradient gradient units vs gradienttransform - 不是同一个梯度

SVG gradient gradient units vs gradienttransform - not the same gradient

svg

gradient