SVG：更改 dy 属性不会更改父文本元素的边界矩形高度

Question

目标是垂直和水平对齐一组tspan元素。

但是，父容器不考虑 dy 值。

这会导致对齐问题。

如果您使用此 Codepen 的 dy 值，文本容器的高度始终保持不变：https://codepen.io/anon/pen/WLpvrG?editors=1111。

如何获得 tspan 元素的准确边界矩形？

<svg id="textBox1" class="textBox" x="0%" y="0%" width="100%" height="25%">
  <rect class="background" x="0%" y="0%" width="100%" height="100%" fill="gray" fill-opacity="0.5" />
  <text class="tspanGroup" x="0" y="0"><tspan x="50%" dy="0em" text-anchor="middle">tspan line 0</tspan><tspan x="50%" dy="1.5em" text-anchor="middle">tspan line 1</tspan><tspan x="50%" dy="1.5em" text-anchor="middle">tspan line 2</tspan></text>
</svg>

Answer 1

dy 属性表示沿 y 轴的偏移。它并不表示调整大小。因此，如果您在 first <tspan> 元素上更改该值，您只是将其向上或向下移动。由于容器包裹着元素，因此只要移动它们，它就不会改变大小。

如果你想将文本垂直和水平居中，我建议你看看这里的第二个答案：How to place and center text in an SVG rectangle。我真的没有看到复制/粘贴它的意义，哈哈。

好的，我花了一点时间让它开始工作，但现在你开始了：

// Wait for document to load so the elements don't return undefined
document.addEventListener("DOMContentLoaded", function(event) {
	// Center the text
	centerText();

	setTimeout(function() {
		// Change font sizes
		document.getElementById('size1').style.fontSize = "12px";
		document.getElementById('size2').style.fontSize = "16px";
		document.getElementById('size3').style.fontSize = "20px";

		// Center the text again
		centerText();
	}, 3000);
});

function centerText(){
	// Get the elements
	const container = document.getElementById('textBox1');
	const textEle = document.getElementById('txt');

	// User getBBox for SVG element data
	const cBox = container.getBBox();
	const tBox = textEle.getBBox();

	// Get width / height of container SVG
	const contHeight = cBox.height;
	const contWidth = cBox.width;

	// Get width / height of TEXT element
	const txtHeight = tBox.height;
	const txtWidth = tBox.width;

	// Set the attributions correctly to center text
	textEle.setAttribute("x", (contWidth/2)-(txtWidth/2));
	textEle.setAttribute("y", (contHeight/2)-(txtHeight/2));
}

<svg id="rootBox" width="375" height="812" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
	<svg id="textBox1" class="textBox" x="0" y="0" width="100%" height="25%">
		<rect class="background" x="0%" y="0%" width="100%" height="100%" fill="gray" fill-opacity="0.5" />
		<text class="tspanGroup" x="50%" y="50%" dominant-baseline="middle" text-anchor="middle" id="txt">
			<tspan x="50%" dy="0em" id="size1">tspan line 0</tspan>
			<tspan x="50%" dy="1.5em" id="size2">tspan line 1</tspan>
			<tspan x="50%" dy="1.5em" id="size3">tspan line 2</tspan>
		</text>
	</svg>
</svg>