Why transforms shift the whole cordinate system instead just moving the element in SVG?

Question

I have seen transforming the graphic in SVG don't affect the object to be transformed but transform the whole coordinate system and then draw the element in that system.

What does this help to achieve instead calculating the new cordinates for current element in consideration?

I think in canvas and CSS, its same behavior so tagging javascript and CSS also.

Answer 1

I am not sure I understand your question, but let me try:

1. The transformed element may not be a grafics element, but a container, for example a <g> element. In that case, all child elements inherit the transformed coordinate system.

2. The element may have associated paint servers (a pattern or a gradient, for example), or filters, masks or clipping paths that have their own sizing and positioning mechanisms. These mechanisms work in the transformed coordinate system.

   Here is an example to illustrate. The first rectangle has a linear gradient, whose gradient vector is defined in user space. The second rectangle is identical, but rotated and translated to the side. The gradient is then moved together with the rectangle.

<svg width="200" height="150">
  <defs>
    <linearGradient id="gradient" gradientUnits="userSpaceOnUse"
        x1="0" y1="50" x2="100" y1="50">
      <stop stop-color="red" offset="0"/>
      <stop stop-color="blue" offset="1"/>
    </linearGradient>
  </defs>
  <rect x="0" y="20" width="100" height="30" fill="url(#gradient)" />
  <rect x="0" y="20" width="100" height="30" fill="url(#gradient)" transform="translate(200, 20) rotate(90)" />
</svg>

3. While the transform attribute only takes userpace coordinates, i. e. unitless numbers, positioning and sizing attributes like x, y, width and height etc. may have unit identifiers like percentage, em or other CSS unit identifiers. That makes it possible to do more versatile positioning.

   For example, the following rectangle will always appear at the same size in the middle of the SVG, regardless of it being resized:

<svg width="100%" height="100%">
  <rect x="50%" y="50%" width="60" height="60" transform="translate(-30, -30)" />
</svg>