SVG gradient gradient units vs gradienttransform - not the same gradient

user_2648673 0
Viewed 76

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:

gradient with gradient transform

gradient with gradient units

gradient svg
1 Answers

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.

user_10380150
Related