title: SVG Text Rotation Around the Center
body: <p>I have the text with textContent "Design" and text-anchor as start,  that was transformed with css to be rotated 45 degree. so it get rotated. problem is that i need to adjust the (x,y)position of the text after my rotation to display the text between the tick as shown in the Expected  figure. How can i achieve this.</p>
  
  <p>Result:
  <a href="http://imageshack.us/content_round.php?page=done&amp;l=img404/2711/result1h.png" rel="noreferrer">http://imageshack.us/content_round.php?page=done&amp;l=img404/2711/result1h.png</a></p>
  
  <p>Expected:
  <a href="http://imageshack.us/content_round.php?page=done&amp;l=img266/5138/expected1.png" rel="noreferrer">http://imageshack.us/content_round.php?page=done&amp;l=img266/5138/expected1.png</a></p>
  
  <pre><code>    &lt;svg&gt;
      &lt;text x="100" y="100" width="64" height="16" fill="black" transform="rotate(45,100,100)" text-anchor="start"&gt;Design&lt;/text&gt;
      &lt;/svg&gt;
  </code></pre>
  
  <p>Thanks
  Gowri</p>