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

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

0 голосов
/ 02 января 2019

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

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

1 Ответ

0 голосов
/ 02 января 2019

Сначала я получаю ширину текста: 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>
...