Question

你能告诉我为什么我的代码在Internet Explorer（Edge和11）中不起作用吗？我想用javascript添加到svg元素子元素。

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>

<body>

<svg id="planer-canvas" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" baseProfile="full">

</svg>

<script>
    const NS = 'http://www.w3.org/2000/svg';
    var planer = document.getElementById('planer-canvas');

    var elem = document.createElementNS(NS, "circle");
    elem.setAttributeNS(null, "cx", 10);
    elem.setAttributeNS(null, "cy", 10);
    elem.setAttributeNS(null, "r", 10);
    elem.setAttributeNS(null, "stroke", "black");
    elem.setAttributeNS(null, "stroke-width", 2);
    elem.setAttributeNS(null, "fill", "yellow");
    elem.setAttributeNS(null, "id", "close-circle");

    planer.append(elem);
</script>
</body>

</html>

适用于Chrome和Firefox，因此IE会抛出错误：

SCRIPT438: Object doesn't support property or method 'append'

有人有过类似的问题吗？你能开导我吗？

这里的codepen： https://codepen.io/anon/pen/ppWwBg#anon-login

我做错了什么？

Answer 1

Internet Explorer或Edge不支持

append：https://developer.mozilla.org/en-US/docs/Web/API/ParentNode/append

更改为：

planer.appendChild(elem);

...，所有浏览器都支持。

使用Internet Explorer生成动态SVG

1 个答案: