Question

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

但是，父容器没有考虑dy值。

这会导致对齐问题。

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

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

user: yourType = {};

this.userService.getUserById('some-user-id').subscribe(user => {
  this.user1 = user;
  console.log(user1.route.routePoints); // I see the array in log
});

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>

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

1 个答案: