3

我试图将一些包含多个空格的文本添加到 svg 文本元素。我完全绝望,因为当一个接一个以上的空格时,它们会正确添加到元素中,但不会显示在浏览器窗口中。

这里的这个人在文本元素中使用空格,当我静态复制它时它工作正常,但是当用 js 添加文本时,空格消失了!

嵌入在 HTML 中的 SVG 中的重要空白

如何将带有空格的文本动态添加到 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);
4

1 回答 1

13

您需要使用setAttributeNS在 xml 命名空间中设置一个属性,所以在您的情况下......

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

如果xml:space在文本上设置,则子 tspan 将使用该值,因此您无需在您的情况下再次设置它。

于 2011-12-08T10:22:31.457 回答