Internet Explorer 中 svg 文本中的空格答案

【问题标题】：Whitespaces in svg text in Internet explorerInternet Explorer 中 svg 文本中的空格
【发布时间】：2017-04-10 18:36:57
【问题描述】：

我正在尝试通过 Snap.svg 在 svg 中附加/写入文本。下面的代码在 chrome、firefox、opera 和 edge 中运行良好，但在 Internet Explorer 中无法运行。我已经尝试将 charset as utf8 放在 html 文件中的 meta 标记中，但它仍然无法正常工作。

如果 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 链接。

【问题讨论】：

标签： internet-explorer svg whitespace snap.svg

【解决方案1】：

不普遍支持在 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>

【讨论】：

【解决方案2】：

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

也许我的解决方案将有助于尝试添加此 doctype 声明，以解决您的 Internet Explorer 问题。

【讨论】：