SVG Sequence Transformation

by Online Tutorials Library July 14, 2022

Sequences of Transformation

In sequence transformation, you can perform more than one transformation on a graphic object. You can perform the translation and scaling both on a graphic object. The transformation A followed by transformation B will not give the same result as transformation B followed by transformation A.

Sequence of transformation-translate followed by scale

Example:

  <!DOCTYPE html>  <html>  <body>  <svg width=”500″ height=”500″>    <line x1=”0″ y1=”0″ x2=”0″ y2=”100″ style=”stroke: black; stroke-width: 2;”/>  <line x1=”0″ y1=”0″ x2=”100″ y2=”0″ style=”stroke: black; stroke-width: 2;”/>  <rect x=”10″ y=”10″ height=”20″ width=”15″   transform=”translate(30, 20) scale(2)”   style=”fill: red;”/>    </svg>  </body>  </html>  

Test it Now

Sequence of transformations – scale followed by translate

Example:

  <!DOCTYPE html>  <html>  <body>  <svg width=”500″ height=”500″>    <line x1=”0″ y1=”0″ x2=”0″ y2=”100″ style=”stroke: black; stroke-width: 2;”/>  <line x1=”0″ y1=”0″ x2=”100″ y2=”0″ style=”stroke:black; stroke-width: 2;”/>  <rect x=”10″ y=”10″ width=”20″ height=”15″   transform=”translate(30, 20) scale(2)” style=”fill: gray;”/>    <rect x=”10″ y=”10″ width=”20″ height=”15″   transform=”scale(2) translate(30, 20)”   style=”fill: black;”/>    </svg>  </body>  </html>  

Test it Now

Next TopicRotate Transformation

SVG Sequence Transformation

Sequences of Transformation

Example:

Example:

SVG Animation

Data Window in Tableau | Data Types in Tableau

You may also like