What is the "transform" attribute and associated transformation functions?

When drawing a graphical object, you can specify a sequence of transformation functions through the "transform" attribute.

Here is the syntax of specifying the "transform" attribute on a graphical object element:

<{object} transform="function_1() function_2() ... function_n()" ...>
  ...
</{object}>

When the above object is being rendered to the canvas, the object coordinate system will be transformed by applying all transformation functions in the backward order starting from function_n() first.

Here is an HTML document, transformations.html, that has a SVG image with transformation functions specified in the "transform" attribute:

<html><body>
<svg xmlns="http://www.w3.org/2000/svg" 
  style="background-color: #dddddd"
  width="200" height="200" viewBox="-50 -50 100 100">
  <line x1="-50" y1="0" x2="50" y2="0" stroke="black" stroke-dasharray="4"/>
  <line x1="0" y1="-50" x2="0" y2="50" stroke="black" stroke-dasharray="4"/>

  <rect cx="0" cy="0" width="30" height="20" fill="yellow"
    transform="scale(2,1) translate(0,-15) rotate(45,0,0)" />
</svg>
</body></html>

When you open the above HTML file, transformations.html, in a Web browser, you see a rectangle object gets rotated, translated, and scaled:

⇒ Transform Group of Objects Using "g"

⇐ Transformation of Object Coordinates

⇑ Transformation of Object Coordinates

⇑⇑ SVG (Scalable Vector Graphics)