使用JS将SVG动态放置在视口中间 [英] Dynamically place SVG in middle of viewport with JS
问题描述
我一直在玩这里的代码：
https://stackoverflow.com/a/22580176/ 1738522
它使用javascript来确定字体大小，以适应最大350px宽度或最大80px高度。这是代码
< div style =background：grey; display ：inline-block;>< svg version =1.2viewBox =0 0 600 400width =600height =400xmlns =http://www.w3.org/2000/svg > < text id =t1y =50style =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 /
这完全有效，除了它不会将文本放在视口的中心。通常，因为我们知道文本大小和视口很容易，但由于文本大小受宽度或高度限制，我们不知道确切的最终数字。
TL; RD如何更改此javascript / SVG以将文本动态定位在视口的垂直和水平中心。
如果要设置字体大小并将文本居中放在SVG的中间位置，请尝试以下操作： / p>
<！DOCTYPE HTML>< html>< body> < div style =background：gray; display：inline-block;>< svg version =1.2viewBox =0 0 600 400width =600height =400xmlns =http： //www.w3.org/2000/svg> < text id =t1text-anchor =middlex =50％y =50％style =fill：white;> MfgfgfgghgY UGLY TEXT< / text>< / svg> <脚本> 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>
I've been playing around with the code here: https://stackoverflow.com/a/22580176/1738522
It uses javascript to determine the font size in order to fit within a max of 350px width or max of 80px height. This is the code
<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/
This works perfectly, except for it doesn't position the text within the centre of the viewport. Normally since we know text size and viewport it would be easy, however since the text size is limited by width OR height, we don't know the exact final figures.
TL;RD How to change this javascript/SVG to dynamically position the text in the vertical and horizontal centre of the view port.
If you want to set font-size and center the text at the middle of the SVG, then try the following:
<!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>
这篇关于使用JS将SVG动态放置在视口中间的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
