SVG добавление текстового элемента - дает мне неправильную ширину - PullRequest
Новая
       36

SVG добавление текстового элемента - дает мне неправильную ширину

2 голосов
/ 05 декабря 2011

Я добавляю текстовый элемент в SVG через JavaScript. Однако после добавления я хочу установить координаты 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());

Ответы [ 2 ]

0 голосов
/ 12 декабря 2013

Есть ошибка: http://code.google.com/p/chromium/issues/detail?id=140472

это просто предварительная инициализация некоторых функций, которые вычисляют ширину текста, поэтому вы должны вызывать эту функцию раньше (я уверен, что есть несколько дополнительных строк, которые можно удалить): 

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);

    }

$ ("svg") - Селектор Jquery

0 голосов
/ 07 декабря 2011

ОК, проблема в том, что браузер не вычисляет правильную ширину при использовании другого шрифта.Не установка шрифта приводит к правильной ширине.

Я решил проблему, установив контрольную точку («точку выравнивания») в верхнем правом углу текстового элемента, задав атрибуты:

capt.setAttribute («text-anchor», "конец");capt.setAttribute ("alignment-baseline", "висит");

Таким образом, мне не нужно вычитать ширину и добавлять высоту элемента!

...