SVG中心文本与反应

Question

首先，是的，我已经搜查，我看到了许多其他答案。但他们没有为我工作。

我希望能够将文本居中在我的SVG中。因为我必须能够把它放在左边，中心或右边（水平和垂直方向），所以我尝试了一点点泛化，并以编程方式计算x和y。

下面是一个例子：https://codesandbox.io/s/ll6ppwkyq7

您可以在结果的文本不垂直居中看到。

红框是文本的边界框。

黑盒子是我应该居中的盒子。

Answer 1

的元素的X之间的关系的坐标和文本的右位置的坐标是不一样的ÿ一个元件和底部位置的坐标的。事实上，它是倒过来的。

这是因为垂直方向，文本位于元素的底部，y坐标从上到下，而水平坐标与文本的方向相同。

使用您正在使用的GetBBbox（）方法时很容易看到。例如，当在坐标0处为x和y添加文本元素时，您会看到getBBbox会给你一个x = 0但是为负的y。

console.log(document.getElementById('testbbox').getBBox());

<svg id="testbbox"><text x=0 y=0>test</text></svg>

所以已经，计算居中文本将需要不同。你现在拥有的是：

outerRect.x - ((outerRect.width - innerRect.width)/2) 

这可以工作，因为你认为内部矩形从0开始，而不是这种情况。你的边界框在垂直方向是负的。因此，完整的公式应该是这样的：

outerRect.x - innerRect.x - ((outerRect.width - innerRect.width)/2) 

哪个在您的例子是：

x - bboxx + ((width - boxWidth)/2) 

凡BBOX是X的getBBox（）

你可以使用基线，但dy在tspan，它使计算有点复杂，不知道这是一个好方法。因为无论如何getBBox在计算中考虑了基线，所以并不是必须的。

另外，如果你看看这里，基线的文字应该是占主导地位的基线，而不是alignement基线：https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/dominant-baseline

看看它是如何影响边框，尤其是ÿ坐标：

console.log(document.getElementById('central').getBBox()); 
 
console.log(document.getElementById('top').getBBox());

<svg id="central"> 
 
<text y=10 dominant-baseline="central" >test</text> 
 
</svg> 
 
<svg id="top"> 
 
<text y=10 dominant-baseline="top" >test</text> 
 
</svg>

见最终结果是： https://codesandbox.io/s/52wl31l8zn