Question

我试图将一些包含几个空格的文本添加到svg文本元素中。我完全不屑一顾，因为当有一个以上的空格后，它们被正确地添加到元素中但没有显示在浏览器窗口中。

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

Significant whitespace in SVG embedded in 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将使用该值，因此您不需要再次设置它。

在svg文本元素中添加带有空格的文本

1 个答案: