从 javascript(Internet Explorer 和 Edge)更改后如何重绘 SVG

Pio*_*iak 9 javascript explorer svg microsoft-edge

有谁知道如何在更改其内容后强制 IE 和 Edge 显示/刷新嵌入的 SVG(请参阅下面的代码)

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>Title</title>
        <script type="text/javascript">     
            function onClick() {           
                document.getElementById('svg').innerHTML = '<circle r="50" cx="50" cy="50" fill="red" />';
            }
        </script>
    </head>
    <body>  
        <button type="button" onclick="onClick()" >Display red circle</button>
        <svg id="svg"/>
    </body>
</html>
Run Code Online (Sandbox Code Playgroud)

Art*_*sun 12

svg.appendChild()正如 @rzelek 提到的,如果您添加元素而不是分配给 ,SVG 图像将自行更新svg.innerHTML

但需要注意的是:您必须使用,而不是普通的 ,http://www.w3.org/2000/svg在您创建的元素上指定名称空间。document.createElementNS()createElement()

例子:

const circle = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
circle.setAttribute('r', '50');
circle.setAttribute('cx', '50');
circle.setAttribute('cy', '50');
circle.setAttribute('fill', 'red');
document.getElementById('svg').appendChild(circle);
Run Code Online (Sandbox Code Playgroud)

JSFiddle


小智 10

将您的标记修改为

<div id="container">
  Your svg here
</div>
Run Code Online (Sandbox Code Playgroud)

并添加

document.getElementById("container").innerHTML += "";
Run Code Online (Sandbox Code Playgroud)

在脚本的末尾。

  • 哈哈,它确实有效。虽然在我的例子中这是必需的,因为我使用了“document.createElement()”而不是“document.createElementNS()” (2认同)

rze*_*lek 1

基本上,您不需要重新加载任何内容。事实上,问题是不同的。您将无法使用标准innerHTML方法与 SVG 进行交互。调用 后您的 SVG 未更新innerHTML。此方法仅适用于编辑 HTML 元素。

请看一下这个: 动态更新 SVG

  • 该答案链接到的答案仅包含链接本身=-D (2认同)