Rotation of the SVG coordinate system distorts angles

Question

Rotation of the SVG coordinate system distorts angles

My comprehension of SVG, particularly the viewport, viewBox, and the user coordinate system, seemed fairly solid.

In the initial example provided below, we utilized a viewBox with a matching aspect ratio as the viewport. As expected, there was no distortion in angles due to the rotation of the user coordinate system.

In the second example, we set the viewbox to a different aspect ratio compared to the viewport. This resulted in a mismatch of shapes' aspect ratios when mapping from viewBox to viewport. Despite this scaling, the bottom-right angle remained undistorted, which is logical considering the origin of the coordinate system at (0,0).

However, in example two, when we rotated the user coordinate system, the bottom right angle became distorted. This contrasted with example one where such distortion did not occur.

Edit 1: To clarify, the concern pertains to the bottom right angle in the final example. Prior to rotation but after stretching with viewBox, the angle measured 90 degrees. After rotation, it deviated from this measure.

Why does a non-uniformly scaled triangle lose its angles upon rotating?

Example One (uniform scale)

body {
  height: 500px;
}

svg {
  width: 400px;
  height: 400px;
  border: 1px solid red;
}

<svg id="s1" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 200 200" preserveAspectRatio="none">
    <style>
      polygon {
        transform: translate(100px, 0px);
        animation: 2s ease-in 1s 1 normal forwards rotate-down;
        fill: green;
      }
      
      @keyframes rotate-down {
        0% {
          transform: translate(100px, 0px) rotate(0deg);
        }
        100% {
          transform: translate(100px, 0px) rotate(45deg);
        }
      }
    </style>
    <polygon points="100,100 100,0 0,100" />
  </svg>

Example Two (non-uniform scale)

body {
  height: 500px;
}

svg {
  width: 600px;
  height: 400px;
  border: 1px solid red;
}

<svg id="s1" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 200 400" preserveAspectRatio="none">
    <style>
      polygon {
        transform: translate(100px, 0px);
        animation: 2s ease-in 1s 1 normal forwards rotate-down;
        fill: green;
      }
      
      @keyframes rotate-down {
        0% {
          transform: translate(100px, 0px) rotate(0deg);
        }
        100% {
          transform: translate(100px, 0px) rotate(45deg);
        }
      }
    </style>
    <polygon points="100,100 100,0 0,100" />
  </svg>

EDIT 2 (images for clarification):

Displayed below is the triangle after adding the viewBox (thus scaling and translating), yet before any rotation. The bottom right angle measures 90 degrees.

https://i.stack.imgur.com/WlR17.png

Here is the triangle after incorporating the viewBox (scaling and translating), and after rotation. Note that the bottom right angle is no longer 90 degrees.

https://i.stack.imgur.com/diTXt.png

EDIT 3:

I have finally uncovered the root cause behind this issue.

Refer below for an explanation detailing the specifics and providing links to relevant resources.

html css svg

Answer 1

Answer №1

With this demonstration, you can clearly see the effects in action.

Simply hover over the SVG element to understand how the angle changes due to the stretching.

body {
  height: 500px;
}

svg {
  width: 200px;
  height: 400px;
  border: 1px solid red;
  transition: 1s width;
}

svg:hover {
  width: 600px;
}

<svg id="s1" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 200 400" preserveAspectRatio="none">
    <style>
      polygon {
        transform: translate(100px, 0px) rotate(45deg);
        fill: green;
      }
    </style>
    <polygon points="100,100 100,0 0,100" />
  </svg>

Answer 2

With this demonstration, you can clearly see the effects in action.

Simply hover over the SVG element to understand how the angle changes due to the stretching.

body {
  height: 500px;
}

svg {
  width: 200px;
  height: 400px;
  border: 1px solid red;
  transition: 1s width;
}

svg:hover {
  width: 600px;
}

<svg id="s1" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 200 400" preserveAspectRatio="none">
    <style>
      polygon {
        transform: translate(100px, 0px) rotate(45deg);
        fill: green;
      }
    </style>
    <polygon points="100,100 100,0 0,100" />
  </svg>

Answer 3

Answer №2

After much investigation, I finally reached a conclusion.

The question I asked following my discovery sheds light on why coordinate transformations have the behavior they do:

SVG rotate after scale: Order of transforms

In response to that question, @TemaniAfif explains how the final transformation matrix is calculated and applied to map graphic element coordinates from the viewport coordinate system to the user coordinate system.

To sum it up, when applying transformations, we essentially duplicate the current user coordinate system and then translate it in relation to the duplicated system. In SVG, the initial user coordinate system (prior to viewBox or any transforms) matches the initial viewport coordinate system.

The chained/nested transforms are executed on the coordinate system from left to right/outside-in order to establish a final coordinate system for mapping graphic elements. It's important to note that nesting transforms have the same impact as chaining transforms on a single element.

How does this process function? Each transformation possesses a pre-defined affine transformation matrix unrelated to CSS/SVG. Various Wikipedia articles illustrate these matrices, such as:

To map an element's coordinates to the ultimate user coordinate system, we multiply the matrices sequentially from left to right (in the order written in the source code) to obtain the final transformation matrix.

It's important to remember that multiplication order of transform matrices matters due to the non-commutative nature of matrix multiplication. Therefore, the sequence in which transformations are listed in the source code is significant.

Ultimately, we apply this final transformation matrix to the x and y coordinates of the element to observe how each coordinate transitions from the viewport coordinate system to the user coordinate system.

For those who find it helpful, envisioning the chained/nested transforms being applied directly to the element itself (instead of user coordinate systems) from right-to-left/inside-out could simplify understanding (i.e., reverse the order of application compared to the coordinate systems).

Whether you mentally visualize transforming the coordinate systems left-to-right before mapping the graphic element, or you modify the element directly by applying transforms right-to-left, the outcome remains consistent.

Key Specifications

Please Note

Whether applying transforms to SVG or HTML elements, the transformation principles remain consistent regardless of the type of element.

Answer 4

After much investigation, I finally reached a conclusion.

The question I asked following my discovery sheds light on why coordinate transformations have the behavior they do:

SVG rotate after scale: Order of transforms