Rotating and Translating an SVG element

by Dhanck

HTML

<!-- Learn about this code on MDN: https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/transform -->

<svg width="180" height="200"
  xmlns="http://www.w3.org/2000/svg" 
  xmlns:xlink="http://www.w3.org/1999/xlink">

  <!-- This is the element before translation and rotation are applied -->
  <rect x="50" y="50" height="100" width="100" style="stroke:#000; fill: #0086B2" fill-opacity="0.2" stroke-opacity="0.2"></rect>

  <!-- Now we add a text element and apply rotate and translate to both -->
  <rect x="50" y="50" height="100" width="100" style="stroke:#000; fill: #0086B2" transform="translate(30) rotate(45 50 50)"></rect>
  <text x="60" y="105" transform=" rotate(45 50 50)"> Hello Moz! </text>

</svg>

CSS

text {
  font: 1em sans-serif;
}