Javascript SVGサイズ変更作業はクロムではなくサファリではない

SVGのテキストのサイズを変更して特定のサイズに収まるように設計されたコードがいくつかあります。Javascript SVGサイズ変更作業はクロムではなくサファリではない

クロームでうまくいくようですが、他のブラウザではうまくいかないようです（私はIE11とSafariを試しました）。

これはコード

<html> 
    <body> 
    <style> 
@import url('https://fonts.googleapis.com/css?family=Sonsie+One'); 
text { 
    font-family: "Sonsie One"; 
} 
svg { 
    background: #43C6AC; 
} 
</style> 
<svg version="1.2" viewBox="0 0 600 400" width="600" height="400" xmlns="http://www.w3.org/2000/svg"> 
    <text id="t1" style="fill: white;" x="50%" y="50%" text-anchor="middle">Test</text> 
</svg> 
<script> 
function resize() { 
    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; 
    } 
} 
window.onload = resize;  
</script> 
</body> 
</html>

このことは、URLで実行されている：http://hiven.com/momo.html

誰も私が間違っているつもりですどこを教えていただけますか？クロームでは、テキストを350pxにサイズ変更しますが、他のバージョンでは変更しません。

出典

2017-03-02 Jimmy

はクロームやFirefox、Operaで私のために[OK]を動作します。 IEがフォントがSonsie Oneのときは機能しませんが、そうでなければOKです。（Safariでテストできない） –

この問題は、フォント読み込みのタイミングが原因であることが判明しました。（私はSafariのように、エンジンをWebKitレンダリングを持ってエピファニーのWEB上でテスト。）

window.onloadは、フォントの読み込みが完了する前に呼び出されているので、resize方法は、フォールバックフォントスタイルの下で働き、これbboxにより得たテキストサイズが間違っていました。

この問題はフォントロードの完了を待つことで解決されます。しかし、フォントの読み込みの場合、document.fonts.onloadingendまたはdocument.fonts.loadは、WebKitではサポートされていないようです（この場合は影響がありません）。

は、このように私はこのような canvas要素で待機しているシステムを作った（私はこれがベストではないと思います。）

<html> 
    <body> 
     <style> 
    @import url('https://fonts.googleapis.com/css?family=Sonsie+One'); 
    text { 
     font-family: "Sonsie One"; 
    } 
    svg { 
     background: #43C6AC; 
    } 
     </style> 
     <svg viewBox="0 0 600 400" width="600" height="400"> 
      <text id="t1" style="fill: white;" x="50%" y="50%" 
      text-anchor="middle">Test some long text here</text> 
     </svg> 
     <script> 
function resize() { 
    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; 
    } 
} 

//window.onload = resize; 
//waiting font loading 
{ 
    var cnt = 0; 
    function tryResize(){ 
     if(!ready() && cnt < 30){ 
      setTimeout(tryResize, 100); 
      cnt++; 
     }else{ 
      resize(); 
     } 
    } 
    //check the state of font loading 
    var c1 = document.createElement("canvas"); 
    var c2 = c1.cloneNode(false); 
    var ctx1 = c1.getContext("2d"); 
    var ctx2 = c2.getContext("2d"); 
    //set target font and fallback font 
    ctx1.font = "normal 30px 'Sonsie One', serif"; 
    ctx2.font = "normal 30px serif"; 
    var text = "this is test text."; 
    function ready(){ 
     //compare text length. 
     //when the target font loading is complted, 
     //the legth of text will be changed 
     return ctx1.measureText(text).width != ctx2.measureText(text).width; 
    } 
    //start waiting 
    tryResize(); 
} 
     </script> 
    </body> 
</html>

DEMO：http://jsdo.it/defghi1977/ueFO

出典

2017-03-03 08:03:40 defghi1977

Javascript SVGサイズ変更作業はクロムではなくサファリではない

答えて

関連する問題