如何将文本元素定位到特定位置并在 SVG 中调整大小？答案

【问题标题】：How to position a text element to a specific position and resizable in SVG?如何将文本元素定位到特定位置并在 SVG 中调整大小？
【发布时间】：2019-05-29 05:17:14
【问题描述】：

我正在根据文本框中的输入值创建一个矩形元素（从文本框获取高度、宽度、X 和 Y）。

当 rect 被创建并附加到父 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文本应该出现在左上角-矩形的一角，应该根据矩形大小调整（调整高度和宽度）。

【问题讨论】：

标签： javascript jquery svg svg-edit

【解决方案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>

【讨论】：