Question

我试图通过Snap.svg在svg中追加/写入文本。下面的代码在chrome，firefox，opera和edge中运行良好，但在Internet Explorer中不起作用。我已经尝试将charset作为utf8放在html文件中的元标记中，但它仍然无效。

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

Answer 1

不普遍支持在SVG元素上使用innerHTML。仅适用于最新的浏览器版本。

使用textContent，而不是HTML Latin1实体，使用相当于nbsp的unicode字符（ASCII 160）。

＆＃13;

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');
});

＆＃13;

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

＆＃13;

Answer 2

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

也许我的解决方案会有所帮助尝试添加此doctype声明，以解决您使用Internet Explorer的问题。

Internet Explorer中的svg文本中的空格

2 个答案: