Javascript 获取Svg中字符串的像素长度

我目前正在使用SVG。我需要知道以像素为单位的字符串长度，以便进行一些对齐。如何获取字符串的长度（以像素为单位）

更新：感谢纳拉比诺维茨。基于他的帮助，我现在可以得到动态添加文本的长度。以下是一个例子：

<svg id="main" 
    xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink"
    version="1.1" 
    width="1020"
    height="620" 
    viewBox="0 0 1020 620"
    onload="startup(evt)">

<script>
    <![CDATA[
        var startup = function (evt) {
            var width;
            var svgNS = "http://www.w3.org/2000/svg";
            var txtNode = document.createTextNode("Hello");
            text = document.createElementNS(svgNS,"text");

            text.setAttributeNS(null,"x",100);
            text.setAttributeNS(null,"y",100);
            text.setAttributeNS(null,"fill","black");
            text.appendChild(txtNode);                                              
            width = text.getComputedTextLength();               
            alert(" Width before appendChild: "+  width);                       
            document.getElementById("main").appendChild(text);
            width = text.getComputedTextLength();
            alert(" Width after appendChild: "+  width)
            document.getElementById("main").removeChild(text);              
        }       
    //]]>
</script>
</svg>

---

我也一直在想这个问题，我惊喜地发现，根据SVG规范，有一个特定的函数可以返回此信息：

---

Working fiddle（仅在Chrome中测试）：

我饶有兴趣地阅读了各种类似的线程，并从中受益，我创建了一个页面，将三种Javascript方法并排进行比较。我注意到了这方面的成果

IE9

Firefox 29.0.1和

铬34.0.1847.131米

您可以将其加载到浏览器中，并查看适合您的内容：

---

.

您使用的是哪种语言？我指的是可缩放的矢量图形。显然，您是在用某种语言处理svg，不是吗？如果不是，我会说，只需使用svg编辑程序打开svg并测量其大小就可以了。除此之外，我想说，在这种情况下，这个问题并不真正属于这里。是的，我使用Javascript。我尝试了这个，它工作了，但是当我尝试将它嵌入到标记中时，结果是0：感谢您的帮助。通过这样做，我将能够得到静态元素的长度，也就是之前定义的元素。下面是我的解决方案，它基于您的帮助来计算动态添加元素的长度：如果使用

CSS

设置文本元素的样式，那么这似乎不起作用；计算的像素宽度对应于文档的默认字体大小。@nrabinowitz这似乎可行，但。。。在使用

snap svg

动态构建

svg

时，我遇到了一些问题。我添加了一个文本元素，并对其应用了一个类-只是为了测量字符串，然后删除了元素…测试了chrome版本48动态添加长度，效果很好。确保从getElementsByTagName返回的数组中获取元素。

// access the text element you want to measure
var el = document.getElementsByTagName('text')[3];
el.getComputedTextLength(); // returns a pixel integer