Добавление текста с пробелами в текстовый элемент SVG

Question

Я пытаюсь добавить текст, который содержит несколько пробелов в текстовый элемент SVG. Я полностью отчаиваюсь, потому что когда есть несколько пробелов друг за другом, они правильно добавляются к элементу, но не отображаются в окне браузера.

Этот парень использует пробелы в текстовом элементе, и он прекрасно работает, когда я воспроизводю его статично, но при добавлении текста с помощью js пробелы исчезают!

Значительные пробелы в SVG встроены в HTML

Как я могу динамически добавлять текст с пробелами в SVG?

Спасибо за любой ответ!

    var legend = document.createElementNS("http://www.w3.org/2000/svg", "text");
    var tspan = document.createElementNS("http://www.w3.org/2000/svg", "tspan");
    // Set any attributes as desired
    legend.setAttribute("id","legend");
    legend.setAttribute("text-anchor", "middle");
    legend.setAttribute("alignment-baseline", "hanging");
    legend.setAttribute("xml:space","preserve");
    tspan.setAttribute("xml:space","preserve");
    tspan.setAttribute("id","tspanObj");
    var myText = document.createTextNode(legendTxt);
    tspan.appendChild(myText);
    legend.appendChild(tspan);
    legend.setAttribute("x", Math.round(this.options.windowWidth/2));
    legend.setAttribute("y", this.options.upperPadding+this.options.barH+this.options.legendDist);
    this.elements.jSvgElem.append(legend);

Answer 1

Вам нужно использовать setAttributeNS чтобы установить атрибут в пространстве имен XML, так что в вашем случае...

legend.setAttributeNS("http://www.w3.org/XML/1998/namespace", "xml:space","preserve");

Если xml:space Если текст установлен, дочерний элемент tspan будет использовать это значение, поэтому вам не нужно устанавливать его снова в вашем случае.