SVG Rotate Transformation

by Online Tutorials Library July 14, 2022

Rotate Transformation

Using the rotate transformation, you can rotate the coordinate system by a specified angle.

  <!DOCTYPE html>  <html>  <body>  <svg width=”200px” height=”200px” viewBox=”0 0 200 200″>    <line x1=”0″ y1=”0″ x2=”100″ y2=”0″ style=”stroke: black; stroke-width: 2″/>  <line x1=”0″ y1=”0″ x2=”0″ y2=”100″ style=”stroke: black; stroke-width: 2;”/>    <rect x=”70″ y=”30″ width=”20″ height=”20″ style=”fill: gray;”/>  <rect x=”70″ y=”30″ width=”20″ height=”20″   transform=”rotate(45)” style=”fill: black;”/>    </svg>  </body>  </html>  

Test it Now

Rotation around a center point

Using the rotation, you can also rotate a single object around a point other than the origin.

Example

  <!DOCTYPE html>  <html>  <body>  <svg width=”200px” height=”200px” viewBox=”0 0 200 200″>    <circle cx=”50″ cy=”50″ r=”3″ style=”fill: black;” />  <g id=”arrow” style=”stroke: black;”>  <line x1=”60″ y1=”50″ x2=”90″ y2=”50″ />  <polygon points=”90 50, 85 45, 85 55″ />  </g>    <use xlink:href=”#arrow” transform=”rotate(60, 50, 50)” />  <use xlink:href=”#arrow” transform=”rotate(-90, 50, 50)” />  <use xlink:href=”#arrow” transform=”rotate(-150, 50 50)” />    </svg>  </body>  </html>  

Test it Now

Next TopicScaling Around Center

SVG Rotate Transformation

Rotate Transformation

Rotation around a center point

Example

Struts 2 modelDriven interceptor example

How to restore tabs in Chrome

You may also like