内联 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 文件（CSS 中的那个 http://marcdasing.de/wp-content/themes/typo/webfonts/2E3E39_0_0.eot）是 尚未完全加载，这会导致某些字母的宽度计算不正确。

为了避免这种情况，您需要运行那些 'startup81'..'startup82'.. 加载 webfont 时的函数。为了实现它，您可以探索 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

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

Inline svg + webfont calculates wrong width

javascript

svg

webfonts