Question

目前我尝试在我的网站上将某些项目名称渲染为svg。我使用webfont，并在第一次加载时，我的脚本计算内联svg的错误宽度，一旦我重新加载我的网站，宽度计算正确。（用于重现错误，足以删除浏览器缓存）

#control-nav li{
 display:none;
 }

有没有办法在第一次访问时获得每个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）尚未完全加载并导致某些字母的宽度计算不正确。

为了避免在加载webfont时需要运行那些'startup81'，'startup82'等功能。为了实现，您可以探索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计算错误的宽度

1 个答案: