Javascript svg追加文本元素-给了我错误的宽度

我将通过javascript向svg添加一个文本元素。附加后，我想设置x和y坐标，但是，当使用它计算x时，它返回了错误的文本元素宽度

有趣的是： 在Chrome中，当通过F5或按钮实现页面时，返回错误的宽度，当在地址栏中按enter键时，宽度是正确的-奇怪

下面是小代码：

var capt = document.createElementNS("http://www.w3.org/2000/svg", "text");
    // Set any attributes as desired
    capt.setAttribute("id","capt");
    capt.setAttribute("font-family","Righteous");
    capt.setAttribute("font-size","30px");
    capt.setAttribute("fill", "rgb(19,128,183)");
    var myText = document.createTextNode(this.options.captTxt);
    capt.appendChild(myText);
    this.elements.jSvgElem.append(capt);
    capt.setAttribute("x", this.options.windowWidth-this.options.spacer-document.getElementById("capt").offsetWidth);
    capt.setAttribute("y", this.options.captY+$('#capt').height());

---

好的，问题似乎是浏览器在使用其他字体时没有计算正确的宽度。不设置字体会导致正确的宽度

我通过设置属性将参考点（“对齐点”）设置到文本元素的右上角，解决了这个问题：

capt.setAttribute（“文本锚定”、“结束”）； 船长设置属性（“路线基线”、“悬挂”）

---

这样我就不必减去元素的宽度，再加上元素的高度

好的，问题似乎是浏览器在使用其他字体时没有计算正确的宽度。不设置字体会导致正确的宽度

我通过设置属性将参考点（“对齐点”）设置到文本元素的右上角，解决了这个问题：

capt.setAttribute（“文本锚定”、“结束”）； 船长设置属性（“路线基线”、“悬挂”）

这样我就不必减去元素的宽度，再加上元素的高度

有一个bug：

它只是预先初始化了一些计算文本宽度的函数，所以您应该先调用这个函数（我确信有几行可以删除）：

$（“svg”）-Jquery选择器存在一个错误：

它只是预先初始化了一些计算文本宽度的函数，所以您应该先调用这个函数（我确信有几行可以删除）：

$（“svg”）-Jquery选择器

fixBug = function () {
        var text = makeSVG("text", { x: 0, y: 0, fill: "#ffffff", stroke: '#ffffff'});
        text.textContent = "";
        var svg = $("svg")[0];
        svg.appendChild(text);
        var bbox = text.getBBox();
        var Twidth = bbox.width;
        var Theight = bbox.height;
        svg.removeChild(text);

    }