度量值尚未在javascript中创建SVG文本

我正在尝试创建一个函数，用于测量SVG元素中文本元素的大小。我在Stack Overflow中找到的代码示例不起作用，并且给出的宽度为零。如果我延迟测量，我可以得到文本，但不是马上。这是如何解决的

var-messureSVGtext=函数（文本、svg、选项）{
var text=document.createElements（svgns，“text”）；
text.style.fontFamily=options.font；
text.setAttribute（“样式”，
字体系列：“+options.font+”+
字体大小：“+options.fontSize+”px
);
var textNode=document.createTextNode（文本）；
appendChild（textNode）；
appendChild（文本）；
//这行不通
console.log（text.clientWidth）；
//确实如此
setTimeout（函数（）{
console.log（text.clientWidth）；
}, 100);
}

您可以获取元素的“计算样式”，然后从中检查宽度和高度

为元素指定一个

id

属性，并在将其附加到DOM后，尝试以下操作：

var elem1 = document.getElementById("text_elem");
var style = window.getComputedStyle(elem1, null);

console.log(style.width, style.height);

---

工作示例 SVG

---

要使用该示例，请将SVG放在HTML

中，并将JavaScript放在SVG下方的

标记中-也放在

中，这样会得到相同的结果。当我想检查宽度和高度时，宽度和高度为零，但过了一段时间后大小才正确。问题是，我不想在获取值之前等待任意时间。这个解决方案可以是异步的，但是我需要它被添加到DOM中的那一刻。我很高兴你花时间来尝试解决这个问题。但是在我正在构建的东西中，忙碌的等待是不可接受的（可能会说它不存在于任何东西中）。@Lindell：：答案是用一个工作样本更新的，它是即时工作的（没有等待）。。。不需要修改，它工作了。当DOM准备好时制作一个事件触发器，然后监听该事件。我的回答假设JS只在所需的DOM元素就绪时运行。请评论我是否应该用事件监听器更新答案。阅读答案下面的评论。
<svg
    xmlns="http://www.w3.org/2000/svg"
    version="1.1"
    width="640"
    height="480"
    viewBox="0 0 640 480"
    style="display:block">

    <text id="svg_text" x="20" y="50" style="font-family:Arial; font-size:36px; fill:#BADA55">Hello World!</text>

</svg>

function getCompStyle(oid, cbf)
{
    var obj, stl, itv;

    obj = document.getElementById(oid);
    itv = setInterval(function()
    {
        stl = window.getComputedStyle(obj, null);

        if (stl && (stl.width.indexOf('0') != 0))
        {
            clearInterval(itv);
            cbf(stl);
        }
    },0);

}

getCompStyle('svg_text', function(style)
{
    console.log(style.width);
});