Internet Explorerのsvgテキストの空白

Question

Snap.svgを使用してsvgにテキストを追加/書き込みしようとしています。以下のコードは、chrome、firefox、opera、edgeではうまく動作しますが、Internet Explorerでは動作しません。私はutf8としてHTMLファイル内のメタタグに文字セットを入れてみましたが、まだ動作していません。

lines2が引数として渡された場合、Internet Explorerは通常の文字列として とみなします。

 var lines1 = ["a   b", "c d", "e f"]; 
    var lines2 = ["a   b", "c d", "e f"]; 
     Snap("#svg").text(10, 0, lines).attr({ 
      fill: "black", 
      fontSize: "18px" 
     }).selectAll("tspan").forEach(function(tspan, i) { 
      tspan.attr({ 
       x: 0, 
       dy: 20 
      }); 
      tspan.node.innerHTML = tspan.node.textContent.replace(/ /g,' '); 
     }); 

ここにはのリンクがあります。

Answer 1

innerHTMLをSVG要素に使用することは普遍的にサポートされていません。実際には最新のブラウザバージョン用です。

textContentを使用し、代わりにHTML Latin1エンティティの代わりにnbspのUnicode文字を使用します（ASCII 160）。それは働いていた

var lines = ["a   b", "c d", "e f"] 
 
Snap("#svg").text(10, 0, lines).attr({ 
 
    fill: "black", 
 
    fontSize: "18px" 
 
}).selectAll("tspan").forEach(function(tspan, i) { 
 
    tspan.attr({ 
 
    x: 0, 
 
    dy: 20 
 
    }); 
 
    tspan.node.textContent = tspan.node.textContent.replace(/ /g,'\u00a0'); 
 
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/snap.svg/0.4.1/snap.svg-min.js"></script> 
 

 
<svg id='svg'></svg>

Answer 2

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

多分私の解決策は、Internet Explorerを使用して問題を解決するために、このDOCTYPE宣言を追加しようと参考になります。