动态地方SVG与JS

视口的中间

我一直在这里的代码打转转： https://stackoverflow.com/a/22580176/1738522 动态地方SVG与JS

它使用JavaScript来确定，以适应350像素宽度或最大的最大范围内的字体大小80px高度。这是代码

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

这工作完全，除了它不视口的中心内定位文本。通常情况下，由于我们知道文本大小和视口，所以很容易，但由于文本大小受宽度或高度的限制，因此我们不知道确切的最终数字。

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

来源

2017-03-02 Jimmy

如果你想设置字体大小及中心举行的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>

来源

2017-03-02 20:29:01

嗨！感谢您的答复。我注意到JS与这个问题有点不同，是否有任何理由？就我看到的主要区别是'''text-anchor =“middle”x =“50％”y =“50％”'''但是当我将它添加到我的代码中时，它不起作用某些原因https://jsfiddle.net/spadez/8uvw1xn6/3/ – Jimmy

替换为JS，如示例中所示，删除变换。 –

但是，麻烦的是你的JS（不知道为什么）在尝试使用自定义字体时摔倒了，而原来的JS可以与谷歌字体兼容，并保持宽度为350px宽（例如：https：//jsfiddle.net/spadez/ 3pydzeu4 /） – Jimmy

动态地方SVG与JS

回答

相关问题