Question

我一直在玩这里的代码： https://stackoverflow.com/a/22580176/1738522

它使用javascript来确定字体大小，以适应最大350px宽度或最大80px高度。这是代码

＆＃13;

<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>

＆＃13;

https://jsfiddle.net/spadez/4Lb3sg0m/8/embedded/result/

这非常有效，除非它不会将文本放在视口的中心。通常，因为我们知道文本大小和视口很容易，但是由于文本大小受到宽度或高度的限制，我们不知道确切的最终数字。

TL; RD如何更改此javascript / SVG以将文本动态定位在视口的垂直和水平中心。

Answer 1

如果要设置字体大小并将文本居中放在SVG的中间位置，请尝试以下操作：

regrex_replace

使用JS将SVG动态放置在视口中间

1 个答案: