我一直在玩弄这里的代码: https://stackoverflow.com/a/22580176/1738522
它使用 JavaScript 来确定字体大小，以适应最大 350 像素宽度或最大 80 像素高度。这是代码
<div style="background: grey; display: inline-block;">
<svg version="1.2" viewBox="0 0 600 400" width="600" height="400" xmlns="http://www.w3.org/2000/svg" >
<text id="t1" y="50" style="fill: white;">MfgfgfgghgY UGLY TEXT</text>
<script type="application/ecmascript">
var width=350, height=80;
var textNode = document.getElementById("t1");
var bb = textNode.getBBox();
var widthTransform = width / bb.width;
var heightTransform = height / bb.height;
var value = widthTransform < heightTransform ? widthTransform : heightTransform;
textNode.setAttribute("transform", "matrix("+value+", 0, 0, "+value+", 0,0)");
</script>
</svg>
</div>https://jsfiddle.net/spadez/4Lb3sg0m/8/embedded/result/
这工作得很好，只是它没有将文本放置在视口(viewport)的中心。通常，由于我们知道文本大小和视口(viewport)，这很容易，但是由于文本大小受到宽度或高度的限制，我们不知道确切的最终数字。
TL;RD 如何更改此 javascript/SVG 以将文本动态定位在视口(viewport)的垂直和水平中心。
最佳答案
如果您想设置字体大小并将文本居中于 SVG 的中间，请尝试以下操作:
<!DOCTYPE HTML>
<html>
<body>
<div style="background: grey; display: inline-block;">
<svg version="1.2" viewBox="0 0 600 400" width="600" height="400" xmlns="http://www.w3.org/2000/svg" >
<text id="t1" text-anchor="middle" x="50%" y="50%" style="fill: white;">MfgfgfgghgY UGLY TEXT</text>
</svg>
<script>
var width=350, height=80;
var textNode = document.getElementById("t1");
for(var k=1;k<60;k++)
{
textNode.setAttribute("font-size",k)
var bb=textNode.getBBox()
if(bb.width>width||bb.height>height)
break;
}
</script>
</div>
</body>
</html>关于javascript - 使用 JS 动态地将 SVG 放置在视口(viewport)中间，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42564052/