Javascript 在Internet Explorer中的svg上使用AppendChild是错误的
我遇到了这个宝石的问题:Javascript 在Internet Explorer中的svg上使用AppendChild是错误的,javascript,google-chrome,internet-explorer,svg,microsoft-edge,Javascript,Google Chrome,Internet Explorer,Svg,Microsoft Edge,我遇到了这个宝石的问题: 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 = 1
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;
}
函数CmdRefresh(cmd){
var svg=document.createElement('svg');
setAttribute(“viewBox”、“0 3200 1800”);
setAttribute(“宽度”,window.innerWidth);
setAttribute(“height”,window.innerHeight);
var x=160;
对于(变量i=0;i
我故意在这个项目中使用香草JavaScript。它在铬合金中工作良好。我在输出中得到:
<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>
....
这正是我所期望的(我遗漏了大部分图像标签)。它在Edge中不起作用。Edge将“图像”转换为“img”,但失败了。此错误于2016年8月被确认,至今尚未修复。()我再次尝试使用Internet Explorer,结果显示:
....
但在Internet Explorer中编辑标记会显示以下内容(滚动查看未包含子项的结束标记):
很明显,这个标签不能有孩子。这里的解决方案是什么?使用createElement()等说“去死吧”?我犯了错误吗?微软又做了一个吗?有人能给我一个线索吗?您不能在资源管理器中使用createElement创建SVG元素,您必须使用CreateElements,即
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元素,您只需在SVG中添加appendChild,这样即使在现代浏览器中也会更有效,因为您可以避免将所有内容序列化为字符串并再次返回。差不多
document.body.appendChild(svg);
啊哈!这是有道理的。虽然我知道innerHTML行不通,但我还是屈服于将SVG视为HTML而不是XML的诱惑。我到家后要试一试。这也可能绕过Edge的img/图像缺陷。
img.setAttributeNS('http://www.w3.org/1999/xlink', 'href', "/img/Card_" + card + ".svg");
document.body.appendChild(svg);