title: Rotate rectangle around its own center in SVG
body: <p>I have following piece of code :</p>
  
  <pre><code>&lt;svg&gt;
  
  &lt;defs&gt;
  &lt;rect id = "myRect"
        x = "10"
        y = "10"
        height = "120"
        width = "120"
        stroke-width = "2px"
        stroke = "red"
        fill = "blue" /&gt;
  
  &lt;/defs&gt;
  
  
  &lt;g transform = "translate(100,30)"&gt;
    &lt;use xlink:href = "#myRect" /&gt;
  &lt;/g&gt;
  
  &lt;g transform = "translate(100, 100) rotate(45 ? ?)"&gt;
  
    &lt;rect id = "myRect"
        x = "10"
        y = "10"
        height = "120"
        width = "120"
        stroke-width = "2px"
        stroke = "green"
        fill = "yellow" /&gt;
  &lt;/g&gt;
  
  &lt;/svg&gt;
  </code></pre>
  
  <p>When I translate rectangle without rotation, it is working fine. But when I rotate it, I wanted to rotate it around its center axis point. What should I need to pass to rotate attribute?</p>