動態地方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

回答

相關問題