6.3 Sequences of transformations

It is possible to do more than one transformation on a graphic object. You just put the transformations, separated by whitespace, in the value of the transform attribute.

Example 1

Sequence of transforming a shape

<svg width="100px" height="100px" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <!-- draw axes -->
  <line x1="0" y1="0" x2="0" y2="100" style="stroke:gray"/>
  <line x1="0" y1="0" x2="100" y2="0" style="stroke:gray"/>
  <rect x="10" y="10" height="20" width="15" transform="translate(30,20) scale(2)"
  style="fill:gray; "/>
</svg>

Example 2

Sequence of transforming coordinate system for a group and for a nested groups

<svg width="100px" height="100px" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
   <g transform="translate(30,20)">
      <rect x="-20" y="-10"  height="20" width="15" style="fill:gray;"/>
      <g transform="scale(2)">
          <rect x="10" y="10" height="20" width="15" style="fill:gray;"/>
      </g>
    </g>
</svg>

Example 3

Sequence of transforming is not commutative

<svg width="200px" height="200px" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
  <!-- draw axes -->
   <line x1="0" y1="0" x2="0" y2="100" style="stroke:gray"/>
   <line x1="0" y1="0" x2="100" y2="0" style="stroke:gray"/>
   <rect x="10" y="10" height="20" width="15"
     style="fill:gray; "/>
    <rect x="10" y="10" height="20" width="15" transform="scale(2) translate(30,20)"
     style="fill:gray; "/>
</svg>

Example 4

To get the smae result as in example 3 by transforming a group and a nested group

<svg width="200px" height="200px" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
         <g transform="scale(2)" >
            <rect x="5" y="5"  height="10" width="7.5" style="fill:gray;"/>
            <g transform="translate(30,20)">
                <rect x="5" y="5" height="20" width="15" style="fill:gray;"/>
            </g>
          </g>
      </svg>