Whitespaces in svg text in Internet explorer
I am trying to append/write text in svg through Snap.svg. The code below works fine in chrome, firefox, opera and edge, but not working in Internet Explorer. I have tried putting charset as utf8 in meta tag inside html file but it's still not working.
If lines2 is passed as an argument then internet explorer consider as normal string.
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,' ');
});
Here is a jsfiddle link for it.
Using innerHTML on SVG elements is not universally supported. Only really for the latest browser versions.
Use textContent , and instead of the HTML Latin1 entity, use the the unicode character equivalent of nbsp instead (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/42012.html