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

Question

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

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

- haemse

正如您所看到的，我甚至将xml:space="preserve"设置为svg <text>元素和<tspan> ...然后将文本节点附加到tspan，tspan附加到文本元素，然后将其附加到svg ... 然而...仍然会消除连续的空格... 呃... - haemse

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Robert Longson · Accepted Answer

您需要使用setAttributeNS在XML命名空间中设置属性，因此在您的情况下...

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

如果文本中设置了xml:space属性，那么子元素的tspan将使用该值，因此在您的情况下无需再次设置它。