title: SVG Text rotation
body: <p>I have a text with textContent "Design", that was transformed with css to be rotated 90 degree around the center (100,100), so it appears vertically.
  It rotate the entire coordinate system around the center, I want the element (ie “Design”) alone should rotate</p>
  
  <p>Original position:           </p>
  
  <p><img src="https://i.stack.imgur.com/lO1fT.png" alt="enter image description here"></p>
  
  <p>Result:</p>
  
  <p><img src="https://i.stack.imgur.com/psSzs.png" alt="enter image description here"></p>
  
  <p>Expected :</p>
  
  <p><img src="https://i.stack.imgur.com/KdUZ1.png" alt="enter image description here"></p>
  
  <p>SVG:</p>
  
  <pre><code>&lt;svg&gt;
  &lt;text x="70" y="30" width="64" height="16" fill="black" transform="rotate(90,100,100)"&gt;Design&lt;/text&gt;
  &lt;/svg&gt;
  </code></pre>
  
  <p>What is the problem ? why text element x position changed ? how could i rotate the text in fixed x-position ?</p>
  
  <p>i want to rotate a text in fixed x-position ?</p>
  
  <p>Thanks,</p>
  
  <p>Siva</p>