javascript - 内联 svg + webfont 计算错误的宽度

Question

目前我正在尝试在我的网站上将一些项目名称呈现为 svg。我使用 webfont，在第一次加载时，我的脚本计算出内联 svg 的错误宽度，一旦我重新加载我的网站，宽度就会正确计算。 (为了重现错误，删除浏览器缓存就足够了)

<script>     
            var startup81 = function (evt) {
                var svgNS = "http://www.w3.org/2000/svg";
                var txtNode = document.createTextNode("D");
                text = document.createElementNS(svgNS,"text");
                text.setAttributeNS(null,"x",5);
                text.setAttributeNS(null,"y",130); 
                text.setAttributeNS(null,"style","font-family:MatryoshkaL; font-size:185px;");
                text.setAttributeNS(null,"fill","url(#pattern81)");
                text.appendChild(txtNode);                                                
                document.getElementById("main81").appendChild(text);

                var width;
                width = text.getComputedTextLength() +3;
                var elem = evt.target;
                elem.setAttribute("width", + Math.round(width));
            }        
        </script>


        <svg id="main81" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" onload="startup81(evt)" height="168" ><defs id="defs81"><pattern  x="-108" y="-71" id="pattern81" width="200" height="160" patternUnits="userSpaceOnUse" patternTransform="rotate(-35)"><image id="image81" preserveAspectRatio="none" height="160" width="200" xlink:href="http://i.imgur.com/WpE9bNB.jpg"></image></pattern></defs></svg>

有没有办法获取第一次访问时渲染的每个 svg 的宽度？

感谢您的帮助

Answer 1

我尝试用这里每个字母的代码片段制作一个小演示 - http://jsfiddle.net/shershen08/8ujc2toh/ 。它不会加载 webfont 文件(由于 CORS)，并且不需要第二次加载来定义正确的大小。

所以我的假设是，当您的 onload="startup81(evt)" 在 svg 元素上运行时，webfont 文件(即 http://marcdasing.de/wp-content CSS 中的/themes/typo/webfonts/2E3E39_0_0.eot)尚未完全加载，这会导致某些字母的宽度计算不正确。

为了避免这种情况，您需要在加载 webfont 时运行这些 'startup81'..'startup82'..etc 函数。为了实现这一点，您可以探索 2 个选项:1)简单设置合理的超时时间

$(document).ready(function(){
  setTimeout(function(){
    //..
    startup80();
    startup81();
    startup82();
    //all you separate svg functions
    //could be done in more clearer way btw, but it's not the point
  }, 500); // 0.5sec after page DOM is loaded
})

2) 或使用modern browsers APIs to catch that