我遇到了这个 gem 的问题:
function CmdRefresh(cmd) {
var svg = document.createElement('svg');
svg.setAttribute("viewBox", "0 0 3200 1800");
svg.setAttribute("width", window.innerWidth);
svg.setAttribute("height", window.innerHeight);
var x = 160;
for (var i = 0; i < cmd.Cards.length; i++) {
var suit = Math.floor(cmd.Cards[i] / 13);
var rank = cmd.Cards[i] % 13;
var card = "CDHS"[suit] + "A23456789TJQK"[rank];
var img = document.createElement('image')
img.setAttribute("width", 505);
img.setAttribute("height", 707);
img.setAttribute("x", x + i * 225);
img.setAttribute("y", 676);
img.setAttribute("href", "/img/Card_" + card + ".svg");
svg.appendChild(img);
}
document.body.innerHTML = svg.outerHTML;
}
我特意为这个项目坚持使用 vanilla JavaScript。它在 Chrome 中运行良好。我在输出中得到这个:
<svg viewBox="0 0 3200 1800" width="1920" height="551">
<image width="505" height="707" x="160" y="676" href="/img/Card_C9.svg"></image>
<image width="505" height="707" x="385" y="676" href="/img/Card_D3.svg"></image>
....
</svg>
这是我所期望的(我遗漏了大部分 image 标签)。它在 Edge 中不起作用。 Edge 将“图像”转换为“img”,但失败了。此错误已于 2016 年 8 月确认,但仍未修复。 ( https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/8545675/ ) 我再次尝试使用 Internet Explorer,显示如下:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 3200 1800" width="1920" height="911"></svg>
<img width="505" height="707" x="160" y="676" href="/img/Card_C9.svg" />
....
但是在 Internet Explorer 中编辑标签显示了这一点(滚动以查看未包含子项的结束标签):
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 3200 1800" width="1920" height="911" />
显然这个标签不能有 child 。这里的解决方案是什么?对使用 createElement() 等说“去他妈的”?我做错了吗?微软做了另一个吗?有人可以给我线索吗?
最佳答案
您不能使用 createElement 在资源管理器中创建 SVG 元素,您必须使用 createElementNS 即
document.createElementNS('http://www.w3.org/2000/svg', 'svg')
对于 svg 元素,和
document.createElementNS('http://www.w3.org/2000/svg', 'image')
用于图像元素。
在 Explorer 时代,它们都是这样工作的,即 createElement 仅用于 HTML 元素。许多人都犯了这个错误,以至于较新的浏览器调整了 createElement 以在 SVG 文档中创建 SVG 元素,在 HTML 文档中创建 HTML 元素,而不是始终创建 HTML 元素。
Explorer 还将要求您使用 setAttributeNS 方法在 xlink 命名空间中创建 href 属性。
img.setAttributeNS('http://www.w3.org/1999/xlink', 'href', "/img/Card_" + card + ".svg");
最后我预计 Explorer 将不支持使用 innerHTML 创建 SVG 元素,你需要简单地使用 appendChild 附加你的 SVG,即使在现代浏览器中这也会更有效,因为你避免将所有内容序列化为字符串并且再次回来。有点像
document.body.appendChild(svg);
关于javascript - 在 Internet Explorer 中对 svg 使用 AppendChild 是错误的,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54086762/