javascript - svg 附加文本元素 - 给我错误的宽度

Question

我正在通过 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());

Answer 1

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

我通过设置属性将引用点(“对齐点”)设置到文本元素的右上角解决了这个问题:

capt.setAttribute("文本 anchor ", "结束");capt.setAttribute("alignment-baseline", "hanging");

这样我就不必减去元素的宽度并添加元素的高度!