<!-- 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="rotate(45 100 100)"></rect>
<text x="60" y="105" transform="translate(30) rotate(45 50 50)"> Hello Moz! </text>
</svg>
text {
font: 1em sans-serif;
}