如何改变svg <text>的高度和宽度，如果它大于javascript中svg <rect>的高度和宽度？

Question

    <g id="newGroup" >
        <rect class="newClass" id="svg_106"  x="133.2" y="384.5" width="76.2" height="38.1" />
        <text class="newText" id="svg_110" style="pointer-events: inherit;" transform="matrix(0.7912 0 0 1 111.325 414.395)" x="31.5976" y="-12">This is a very long text text text text text</text>
    </g>

我想调整矩形内的文本。某些文本的宽度大于矩形本身的宽度。我想调整文本以使其适合矩形内。

Answer 1

<text> 元素上的 transform 使事情变得有些复杂。

我要做的是删除转换，然后测量文本的大小。然后你可以给它一个新的变换，适当地缩放它并将它定位在正确的位置。

adjustText("svg_106", "svg_110");


function adjustText(rectId, textId)
{
  var rectElem = document.getElementById(rectId);
  var textElem = document.getElementById(textId);
  // Get the rectangle bounds
  var rectBBox = rectElem.getBBox();
  // Clear the text position and transform so we can measure the text bounds properly
  textElem.setAttribute("x", "0");
  textElem.setAttribute("y", "0");
  textElem.removeAttribute("transform");
  var textBBox = textElem.getBBox();
  // Calculate an adjusted position and scale for the text
  var padding = 5;  // How much horizontal padding between the text and the rectangle sides
  var scale = (rectBBox.width - 2 * padding) / textBBox.width;
  var textX = rectBBox.x + padding;
  var textY = rectBBox.y + (rectBBox.height / 2) - scale * (textBBox.y + textBBox.height / 2);
  // Add a new transform attribute to the text to position it in the new place with the new scale
  textElem.setAttribute("transform", "translate("+textX+","+textY+") scale("+scale+")");
}

.newClass {
  fill: grey;
}

<svg viewBox="0 300 500 200">
  <g id="newGroup" >
    <rect class="newClass" id="svg_106"  x="133.2" y="384.5" width="76.2" height="38.1" />
    <text class="newText" id="svg_110" style="pointer-events: inherit;" transform="matrix(0.7912 0 0 1 111.325 414.395)" x="31.5976" y="-12">This is a very long text text text text text</text>
  </g>
</svg>

Answer 2

您不需要 javascript。我将文本放在<symbol> 中，并使符号适应矩形的大小。但是，您可以使用 javascript 计算 <symbol> 元素的 viewBox。

svg{border:1px solid}
.newClass{stroke:black; fill:none;}
text{fill:black;}

<svg viewBox="130 380 100 50">

  
<symbol id="test" viewBox="0 0 260 19">
  <g id="g">
        <text class="newText" id="svg_110"   dominant-baseline="hanging" >This is a very long text text text text text</text>
  </g>
  </symbol> 
<g id="newGroup" >
        <rect class="newClass" id="svg_106"  x="133.2" y="384.5" width="76.2" height="38.1" />
        <use xlink:href="#test" style="pointer-events: inherit;"  x="133.2" y="384.5" width="76.2" height="38.1"  />
    </g>
  </svg>

在此示例中，我将展示如何使用 javascript 计算 <symbol> viewBox 属性的值。

let bbText = svg_110.getBBox();
test.setAttributeNS(null, "viewBox", `${bbText.x}  ${bbText.y}  ${bbText.width}  ${bbText.height}`)

svg{border:1px solid}
.newClass{stroke:black; fill:none;}
text{fill:black;}

<svg viewBox="130 380 100 50">

<symbol id="test">

        <text class="newText" id="svg_110" dominant-baseline="hanging" > This is a very long text text text text text </text>

  </symbol> 
<g id="newGroup" >
        <rect class="newClass" id="svg_106"  x="133.2" y="384.5" width="76.2" height="38.1" />
        <use xlink:href="#test" style="pointer-events: inherit;"  x="133.2" y="384.5" width="76.2" height="38.1"  />
    </g>
  </svg>

更新

OP 评论说她/他无法更改 SVG，但可以动态添加元素。在下一个示例中，我将动态创建 <symbol> 和 <use> 元素。请重新输入我的代码中的 cmets。

const SVG_NS = 'http://www.w3.org/2000/svg';
const SVG_XLINK = "http://www.w3.org/1999/xlink";
let theText = document.querySelector("#svg_110");
let theRect = document.querySelector("#svg_106");


// create a new symbol element
let symbol = document.createElementNS(SVG_NS, 'symbol');
symbol.setAttributeNS(null, "id", "theSymbol");
newGroup.appendChild(symbol);

// get the size of the bounding box for the text
let bbText = theText.getBBox();
// set the attribute viewBox for the symbol
symbol.setAttributeNS(null, "viewBox", `${bbText.x}  ${bbText.y}  ${bbText.width}  ${bbText.height}`)

// clone the text and append it to the symbol
let txt=theText.cloneNode(true);
symbol.appendChild(txt);

// remove the text 
theText.parentNode.removeChild(theText);


// create a use element
let use = document.createElementNS(SVG_NS, 'use');
// the use element is using the symbol
use.setAttributeNS(SVG_XLINK, 'xlink:href', '#theSymbol');
// also is using the rect's attributes 
use.setAttributeNS(null, 'x', theRect.getAttribute("x"));
use.setAttributeNS(null, 'y', theRect.getAttribute("y"));
use.setAttributeNS(null, 'width', theRect.getAttribute("width"));
use.setAttributeNS(null, 'height', theRect.getAttribute("height"));


newGroup.appendChild(use);

svg{border:1px solid}
.newClass{stroke:black; fill:none;}
text{fill:black;}

<svg viewBox="130 380 150 100">
   <g id="newGroup" >
        <rect class="newClass" id="svg_106"  x="133.2" y="384.5" width="76.2" height="38.1" />
        <text class="newText" id="svg_110" style="pointer-events: inherit;" x="31.5976" y="-12">This is a very long text text text text text</text>
    </g>
</svg>

Answer 3

只需在 JavaScript 中执行此操作：

var rect = document.getElementById("svg_106");
var text = document.getElementById("svg_110");
var aRect = rect.getBoundingClientRect();
var bRect = text.getBoundingClientRect();

if (aRect.top + aRect.height) < (bRect.top)) ||
    (aRect.top > (bRect.top + bRect.height)) ||
    ((aRect.left + aRect.width) < bRect.left) ||
    (aRect.left > (bRect.left + bRect.width) {
        //Do stuff
}