Как расположить текстовый элемент в определенной позиции и изменить его размер в SVG?

Question

Я создаю прямоугольный элемент на основе входных значений из текстового поля(получение высоты, ширины,X и Y из текстового поля).

Когда прямоугольник создан и добавлен в родительский элемент g. Я создаю текстовый элемент, показывающий недавно созданный прямоугольник. Я поместил этот текст в верхний левый угол прямоугольника.

Это мой кусок кода (не весь, имеющий отношение только к вопросу). Он вызывается по событию 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 должен появиться в верхнем левом углу прямоугольника и должен быть откорректирован (измените размеры по высоте и ширине) в соответствии с прямоугольником. размер.

Answer 1

Сначала я получаю ширину текста: let txtW = RectNo.getComputedTextLength();

Далее я вычисляю шкалу: scale = (width-13) / txtW;

Я понимаю, что вам нужен пробел в 13 единиц в конце текста.

Также в CSS я использую text{dominant-baseline:hanging} иначе вы получите текст за пределами прямоугольника. Я надеюсь, что это помогает.

let x=10,y=10,width=100,height=50,any_number = 3;

//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", "#d9d9d9");
   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_"+ (Math.random()*100));
   RectNo.appendChild(numTxt);
   
   grp.appendChild(RectNo);

   let txtW = RectNo.getComputedTextLength();

   scale = (width-13) / txtW; 
   posX = x+1;  //(x of rect)
   posY = y+3;  //(y of rect)

   RectNo.setAttribute("transform", "translate(" + posX + "," + posY + ")"+"scale(" + scale + ")");

svg{border:1px solid}
text{dominant-baseline:hanging}

<svg viewBox="0 0 200 100">
  <g id="grp"></g>
</svg>