title: How to position a text element to a specific position and resizable in SVG?
body: <p>I am creating a rect element based on input values from <strong>textbox</strong>(getting Height,Width,X and Y from textbox).</p>
  
  <p>When rect is created and appended in parent g element. I am creating a <strong>text</strong> element showing the newly created rect number.I positioned this text to <strong>top left</strong> corner of <strong>rect</strong>.</p>
  
  <p>This is my piece of code(not entire only relevant to question).It is called on <strong>onclick</strong> event of button.</p>
  
  <pre><code>  //Creating &lt;rect&gt; 
     Rect = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
     Rect.setAttributeNS(null, "id", "rectId");
     Rect.setAttributeNS(null, "x", x);   //getting x from textbox
     Rect.setAttributeNS(null, "width", width);   //getting width from 
      textbox
     Rect.setAttributeNS(null, "y", y);   //getting y from textbox
     Rect.setAttributeNS(null, "height", height);  //getting height from 
     textbox
     Rect.setAttributeNS(null, "fill", "none");
     grp.appendChild(Rect);
  
  
     //Creating &lt;text&gt; for Rect Num
     RectNo = document.createElementNS('http://www.w3.org/2000/svg', 'text');
     RectNo.setAttributeNS(null, "id", "textNo");
     numTxt = document.createTextNode("RectNum_"+(any number));
     RectNo.appendChild(numTxt);
     grp.appendChild(RectNo);
  
     scale = (width - (width-13)) / width; //(width of rect)
     posX = x+1;  //(x of rect)
     posY = y+3;  //(y of rect)
  
     RectNo.setAttribute("transform", "translate(" + posX + "," + posY + ") 
     scale(" + scale + ")");
  </code></pre>
  
  <p>Created rect can be of <strong>any size</strong>,so for scaling the text element, I tried above code of transform. But somehow it is not working.What I need is that <strong>no matter how big or small</strong> the rect size is, the <strong>RectNo</strong> text should appear in the <strong>top left-corner of rect</strong> and should get <strong>adjusted(resize height and width)</strong> according to the rect size.</p>