0

テキストボックスからの入力値に基づいてrect要素を作成しています(テキストボックスから高さ、幅、X、およびYを取得しています)。

rect が作成され、親 g 要素に追加されたとき。新しく作成された rect 番号を示すテキスト要素を作成しています。このテキストをrectの左上隅に配置しました。

これは私のコードです（質問に関連するだけではありません）。ボタンのonclickイベントで呼び出されます。

  //Creating <rect> 
   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 <text> 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 + ")");

作成された四角形は任意のサイズにすることができるので、テキスト要素をスケーリングするために、上記の変換コードを試しました。しかし、どういうわけかそれは機能していません。必要なのは、四角形のサイズがどれほど大きくても小さくても、RectNoテキストが四角形の左上隅に表示され、四角形に従って調整(高さと幅のサイズを変更)する必要があることですサイズ。

4

1 に答える 1