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

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

var startup81=功能（evt）{
var svgNS=”http://www.w3.org/2000/svg";
var txtNode=document.createTextNode（“D”）；
text=document.createElements（svgNS，“text”）；
setAttributeNS（null，“x”，5）；
setAttributeNS（空，“y”，130）；
setAttributeNS（空，“样式”，“字体系列：MatryoshkaL；字体大小：185px；”）；
setAttributeNS（null，“fill”，“url（#pattern81）”）；
text.appendChild（txtNode）；
document.getElementById（“main81”）.appendChild（文本）；
var宽度；
宽度=文本。getComputedTextLength（）+3；
var elem=evt.target；
元素setAttribute（“宽度”、+Math.round（宽度））；
}        

有没有办法获得第一次访问时呈现的每个svg的宽度

---

谢谢你的帮助

我试着用你的代码片段为这里的每个字母制作一个小演示-。 它不加载webfont文件（由于CORS），并且不需要第二次加载来定义正确的大小

因此，我的假设是，当您的

onload=“startup81（evt）”

在svg元素上运行时，webfont文件（即

http://marcdasing.de/wp-content/themes/typo/webfonts/2E3E39_0_0.eot

在CSS中）尚未完全加载，这会导致某些字母的宽度计算不正确

为了避免在加载webfont时需要运行那些“startup81”、“startup82”等函数。要实现这一点，您可以探索两个选项： 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） 或者使用

如果您将执行此转换的代码放在此处而不是您网站的链接，会更加方便。抱歉，我编辑了我的第一篇文章并添加了我的代码谢谢，带有超时的想法非常好。我就是不知道该把它放在哪里。我为每个字母运行上面的代码，那么是否可以将超时代码直接放在代码段中的某个位置？如果我将您的代码包装到我的函数中，它就不再工作了。好吧，我想出来了，不可能只将javascript设置为延迟，因为浏览器将为svg宽度设置其标准值。svg是在websites html部分创建的，现在我只需在javascript中创建svg，并将计时器设置为500毫秒，效果非常好。谢谢

$(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
})