SVG梯度单元与梯度变换--不相同的梯度

Question

我试图找出从梯度转换到梯度单位的转换。我得到了不同的梯度分布。为什么？

<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>

这两个梯度并不相同：

​

​

​

​

Answer 1

因为矩形的左侧和右侧之间的距离并不等于旋转45度时从一个角到另一个角的距离。

1. 左侧和右侧相隔270个单元(默认x2为100%，其他默认为0%)。

1. 的拐角270号*√2单位与

相隔

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