I am trying to figure out conversion from gradienttransform to gradientunits. I am getting different gradient distribution. Why?

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

These 2 gradients are not the same:

CodePudding user response：

because the distance between the left side and right side of a rectangle does not equal the distance from one corner to the opposite corner when you rotate it 45 degrees.

1. the left and right sides are 270 units apart (default x2 is 100% the others default to 0%).

2. the corners 270 * √2 units apart

So the distance between x1,y1 and x2,y2 is different in each case given that the rotation transform is distance invariant.