Получить длину пикселя строки в Svg

В настоящее время я работаю с 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>

Ответ 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/

Ответ 2

Прочитав различные подобные темы с интересом и извлекло выгоду из некоторых идей, я создал страницу, которая сравнивает три из Javascript-методов бок о бок. Я отметил результаты в

IE9

Firefox 29.0.1 и

Chrome 34.0.1847.131 м

Вы можете загрузить его в своем браузере и посмотреть, что работает для вас:

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

Ответ 3

Создайте диапазон, присвойте ему необходимые атрибуты, чтобы создать точное представление об этом в документе, измерить его, удалить.

function measureText (string, fontSize, fontType) {
    const text = document.createElement("span");
    document.body.appendChild(text);

    text.style.font = fontType;
    text.style.fontSize = fontSize + "px";
    text.style.height = 'auto';
    text.style.width = 'auto';
    text.style.position = 'absolute';
    text.style.whiteSpace = 'no-wrap';
    text.innerHTML = string;

    const width = Math.ceil(text.clientWidth);
    document.body.removeChild(text);
    return width;
}