Использование AppendChild в svg в Internet Explorer делает неправильно - PullRequest
Новая
       8

Использование AppendChild в svg в Internet Explorer делает неправильно

0 голосов
/ 08 января 2019

У меня возникли проблемы с этим самоцветом: 

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>

Что я и ожидал (я пропустил большую часть тегов image ). Это не работает в Edge. Edge превращает «образ» в «img», что не удается. Эта ошибка была подтверждена в августе 2016 года и до сих пор не исправлена. (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 () и др Я сделал ошибку? Microsoft сделала другой? Кто-нибудь может дать мне подсказку?

1 Ответ

0 голосов
/ 08 января 2019

Вы не можете использовать createElement для создания SVG-элементов в Проводнике, вы должны использовать 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.

Explorer также потребует от вас создания атрибутов href в пространстве имен xlink с помощью метода setAttributeNS. 

img.setAttributeNS('http://www.w3.org/1999/xlink', 'href', "/img/Card_" + card + ".svg");

Наконец, я ожидаю, что Explorer не будет поддерживать использование innerHTML для создания элементов SVG, вам просто нужно добавить SVG с помощью appendChild, что будет более эффективно даже в современных браузерах, поскольку вы избегаете сериализации всего в строку и вернуться снова. Что-то вроде 

document.body.appendChild(svg);
...