3

いくつかの空白を含むテキストをsvgテキスト要素に追加しようとしています。複数の空白が次々に存在する場合、それらは要素に正しく追加されますが、ブラウザウィンドウに表示されないため、私は完全に絶望しています。

この男はここでテキスト要素に空白を使用しており、静的に再現すると正常に機能しますが、jsでテキストを追加すると空白が消えます！

HTMLに埋め込まれたSVGの重要な空白

空白を含むテキストを動的にsvgに追加するにはどうすればよいですか？

どんな答えでもThx！

    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

を使用してxml名前空間に属性を設定する必要があるsetAttributeNSため、この場合は...

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

テキストにが設定されている場合xml:space、子tspanはその値を使用するため、ケースで再度設定する必要はありません。

于 2011-12-08T10:22:31.457 に答える