在Internet Explorer中对SVG使用AppendChild是错误的 [英] Using AppendChild on an svg in Internet Explorer is doing the wrong thing

查看:38
本文介绍了在Internet Explorer中对SVG使用AppendChild是错误的的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我遇到了这个宝石的问题:

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

我特意在这个项目中坚持使用普通的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>

这正是我所期望的(我省略了大部分图像标记)。它在Edge中不起作用。Edge将"Image"转换为"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" />

显然,此标记不能有子标记。这里的解决方案是什么?对使用createElement()等人说"去他的"?我是不是搞错了?微软是不是又做了一个?有谁能给我点提示吗?

svg

不能使用createElement在资源管理器中创建推荐答案元素,必须使用createElementNS即

document.createElementNS('http://www.w3.org/2000/svg', 'svg')

用于SVG元素,和

document.createElementNS('http://www.w3.org/2000/svg', 'image')

用于图像元素。

在资源管理器时代,它们都是以这种方式工作的,即createElement仅用于HTML元素。太多人误解了这一点,以至于较新的浏览器已经调整了createElement,以在SVG文档中创建SVG元素,并在HTML文档中创建HTML元素,而不是总是创建HTML元素。

资源管理器还要求您使用setAttributeNS方法在xlink命名空间中创建href属性。

img.setAttributeNS('http://www.w3.org/1999/xlink', 'href', "/img/Card_" + card + ".svg");
最后,我希望资源管理器不会支持使用innerHTML来创建SVG元素,您只需要在SVG后面附加appendChild,这样即使在现代浏览器中效率也会更高,因为您可以避免将所有内容序列化到一个字符串,然后再重新序列化。类似于

document.body.appendChild(svg);

这篇关于在Internet Explorer中对SVG使用AppendChild是错误的的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆