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

【问题标题】：Get pixel length of String in Svg获取 Svg 中字符串的像素长度
【发布时间】：2012-05-02 12:51:32
【问题描述】：

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

更新：感谢 nrabinowitz。根据他的帮助，我现在可以获得动态添加文本的长度。这是一个例子：

<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，不是吗？
如果没有，我会说只需使用 svg 编辑程序打开 svg 并测量那里的大小就可以了。最重要的是，我想说，在这种情况下，这个问题并不真正属于这里。
是的，我使用 Javascript。我试过这个，它起作用了，但是当我尝试将它嵌入到

标签： javascript image svg

【解决方案1】：

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

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

工作小提琴（仅在 Chrome 中测试）：http://jsfiddle.net/jyams/

【讨论】：

感谢您的帮助。通过这样做，我将能够获得静态元素的长度，即之前定义的元素。这是我基于您帮助计算动态添加元素长度的解决方案：jsfiddle.net/nxhoaf/Qzav3/4
如果文本元素的样式使用CSS，这似乎不起作用；计算的像素宽度对应于文档的默认字体大小。
@nrabinowitz 这似乎可行，但是...我在使用snap-svg 动态构建svg 时遇到了问题。我添加了一个文本元素并对其应用了一个类 - 只是为了测量字符串并在此之后立即删除该元素......
经过测试的 chrome 版本 48 动态添加长度工作正常。确保从 getElementsByTagName 返回的数组中获取元素。

【解决方案2】：

感兴趣地阅读了各种类似的主题并从其中的一些想法中受益，我创建了一个页面，并排比较了三种 Javascript 方法。我在

中记录了结果

IE9

Firefox 29.0.1 和

铬 34.0.1847.131 米

您可以在浏览器中加载它并查看适合您的：

http://bl.ocks.org/MSCAU/58bba77cdcae42fc2f44.

【讨论】：