Javascript SVG 크기 조정 작업이 크롬에서는 가능하지만 사파리에서는 수행되지 않습니다.

SVG에서 텍스트의 크기를 조정하여 특정 크기에 맞도록 설계된 코드가 있습니다.Javascript SVG 크기 조정 작업이 크롬에서는 가능하지만 사파리에서는 수행되지 않습니다.

크롬에서는 정상적으로 작동하지만 다른 브라우저에서는 작동하지 않는 것 같습니다 (IE11과 Safari를 사용해 보았습니다). 내가 잘못 가고 어디 http://hiven.com/momo.html이

사람이 말해 주시겠습니까 :

이이 그것이 URL에서 실행되는 코드

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

은? 크롬에서는 텍스트를 350px로 크기를 조정하지만 그렇지 않은 경우에는 크기를 조정합니다.

출처

2017-03-02 Jimmy

가 크롬, 파이어 폭스, 오페라에 나를 위해 확인을 작동합니다. 글꼴이 Sonsie One 일 때 IE는 작동하지 않지만 그렇지 않으면 작동합니다. (Safari에서 테스트 할 수 없음) –

이 문제는 글꼴로드시기에 의해 결정됩니다. (I 사파리와 같은 웹킷 렌더링 엔진을 가지고 주현절 WEB에서 테스트.) 글꼴로드의 완성, resize 방법은 대체 글꼴 스타일에 따라 작동하기 전에 window.onload 이후

이라고합니다, 따라서 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 크기 조정 작업이 크롬에서는 가능하지만 사파리에서는 수행되지 않습니다.

답변

관련 문제