在Internet Explorer中的svg文本中的空格

我试图通过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,' ');
       });

这是一个jsfiddle链接。

---

在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>

---

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

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

链接地址: http://www.djcxy.com/p/42011.html

上一篇: Whitespaces in svg text in Internet explorer

下一篇: Why isn't this CSS3 animation working in Firefox and Internet Explorer?