javascript - 如何使用 javascript 为 SVG 文本元素提供固定的高度和宽度？

Question

我有多个不同高度和宽度的矩形，我需要在矩形的左上角显示文本，无论文本的宽度是多少，它都应该以矩形宽度的 50% 进行调整。

这是我尝试过的代码。

 rectBbox = rectElem.getBBox();
 textBbox = textElem.getBBox();
 scale = rectBbox.width / textBbox.width;
 X = parseFloat(rectBbox.x) 
 Y = parseFloat(rectBbox.y) 
 textElem.setAttribute("transform", "translate(" + X + "," + Y + ") scale(" + scale + ")");

我的 svg 看起来像

<svg>
<g id="maingroup">
<g id="firstchild">
<rect></rect>
<text></text>
</g>
<g id="nthchild">
<rect></rect>
<text></text>
</g>
<g>
</svg>

如何缩放它，以便无论矩形或文本的大小如何，文本都会在矩形宽度的 50% 内得到适当调整

Answer 1

在此示例中，我们定位 <text>默认 0,0 的元素。然后我们计算矩形左上角和文本左上角之间的差。

比例部分类似:0.5 * 文本宽度与矩形宽度的比率。

function adjustText(boxElem)
{
  var rectElem = boxElem.querySelector("rect");
  var textElem = boxElem.querySelector("text");

  var rectBbox = rectElem.getBBox();
  var textBbox = textElem.getBBox();
  var scale = 0.5 * rectBbox.width / textBbox.width;
  var translateX = rectBbox.x - textBbox.x; 
  var translateY = rectBbox.y - textBbox.y;

  textElem.setAttribute("transform", "translate(" + translateX + "," + translateY + ") scale(" + scale + ")");
}


adjustText(document.getElementById("firstchild"));
adjustText(document.getElementById("nthchild"));

<svg width="500" height="500">
  <g id="maingroup">
    <g id="firstchild">
      <rect x="20" y="30" width="250" height="100" fill="lightgrey" stroke="black"/>
      <text>Very Very Very Very Very Long Text</text>
    </g>
    <g id="nthchild">
      <rect x="200" y="200" width="200" height="100" fill="lightgrey" stroke="black"/>
      <text>Smaller Text</text>
    </g>
  </g>
</svg>