0

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

当 rect 被创建并附加到父 g 元素中时。我正在创建一个显示新创建的矩形编号的文本元素。我将此文本定位到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

0

首先我得到文本的宽度：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>

于 2019-01-02T15:19:03.630 回答