Internet Explorer中svg文本中的空白位置

我試圖通過Snap.svg在svg中追加/寫入文本。下面的代碼在Chrome，Firefox，Opera和Edge中工作正常，但不能在Internet Explorer中工作。我曾嘗試把字符集作爲utf8放在html文件中的元標記中，但它仍然不起作用。Internet Explorer中svg文本中的空白位置

如果lines2作爲參數傳遞，那麼Internet Explorer會將視爲普通字符串。

 var lines1 = ["a   b", "c d", "e f"]; 
    var lines2 = ["a&nbsp;&nbsp;&nbsp;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,'&nbsp;'); 
     });

這是一個jsfiddle的鏈接。

來源

2016-11-26 Amit Kumar

在SVG元素上使用innerHTML未得到普遍支持。只適用於最新的瀏覽器版本。

使用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>

來源

2016-11-26 19:47:30

它的工作！謝謝.... –

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

也許我的解決方案將是有益的嘗試添加該DOCTYPE聲明，以解決Internet Explorer中的問題。

來源

2016-11-26 16:54:42 Varsha

Internet Explorer中svg文本中的空白位置

回答

相關問題