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

【问题标题】：How to give a fixed height and width to SVG text element using javascript?如何使用 javascript 为 SVG 文本元素提供固定的高度和宽度？
【发布时间】：2019-07-12 15:25:15
【问题描述】：

我有多个不同高度和宽度的矩形，我需要在矩形的左上角显示一个文本，无论文本的宽度是多少，都应该调整为矩形宽度的 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% 范围内得到适当调整

【问题讨论】：

标签： javascript jquery svg

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

【讨论】：

【解决方案2】：

首先我需要计算文本的宽度 (txtlength) 和框的宽度 (w)。我想缩放文本，所以我正在计算比例let thescale = w / (2*txtlength);。 // 这将以矩形宽度的 50% 缩放文本。接下来，使用 setAttributeNS 设置转换属性的值。请注意，文本没有以 SVG 画布原点为中心的 x 和 y 属性。

let txtlength = txt.getComputedTextLength()
let w = theRect.getBBox().width;

let c = {x:50,y:25}// the center of the rect

let thescale = w / (2 * txtlength);// 50% of rect's width
//scale the text and translate in the center
txt.setAttributeNS(null, "transform", `scale(${thescale},${thescale}) translate(${c.x/thescale},${c.y/thescale})`)

svg{border:1px solid; width:120vh}

text{font-size:10;
     dominant-baseline: middle;
     text-anchor: middle}

<svg viewBox="0 0 100 50">
  <rect id="theRect" x="10" y="10" width="80" height ="30" stroke="black" fill="none" />
  <text id="txt" dominant-baseline="middle" text-anchor="middle">A very long text, sooo long </text>
</svg>

【讨论】：