Using the SVG matrix Function

---

Combining Multiple SVG Functions

You can specify a set of SVG functions by means of a space-separated list or by means of a set of nested SVG g elements. For example, suppose you wanted to apply an SVG translate function followed by an SVG scale function to a rectangle. You can accomplish this pair of transformations with the following SVG code fragment:

<g transform="translate(100,100) scale(.5)"> <rect x="0" y="0" width="150" height="50"       style="fill:yellow;stroke:blue"/> </g> 

You can accomplish the same pair of transformations with the following SVG code fragment as well:

<g transform="translate(100,100)">   <g transform="scale(.5)">     <rect x="0" y="0" width="150" height="50"           style="fill:yellow;stroke:blue"/>   </g> </g>

---