从 javascript 更改后如何重绘 SVG（Internet Explorer 和 Edge）

Question

有谁知道如何在更改内容后强制 IE 和 Edge display/refresh 嵌入 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>

Answer 1

Plunker

JS:

var x = 0; 

function onClick() {        
  var div = document.getElementById('svg');
  Update(div);
}

function Update(div){

  x++;

  div.innerHTML = '<svg><circle r="' + x + '" cx="' + x +'" cy="' + x + '" fill="red" /></svg>';

  if (x < 100)
  {
    setTimeout(function() {
      Update(div);
    }, 100);  
  }

  console.log(div.innerHTML);
}

HTML:

<body>
  <button type="button" onclick="onClick();" >Display red circle</button>
    <div id="svg">
    </div>
</body>

将 SVG 包装在容器中然后更新容器的内容似乎可行。

Answer 2

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

请看这个： update SVG dynamically

Answer 3

将您的标记修改为

<div id="container">
  Your svg here
</div>

并添加

document.getElementById("container").innerHTML += "";

在脚本的末尾。

Answer 4

正如@rzelek 所提到的，如果您使用 svg.appendChild() 添加元素而不是分配给 svg.innerHTML.

，SVG 图像将自行更新

但有一个警告：您必须在使用 document.createElementNS() 创建的元素上指定 http://www.w3.org/2000/svg 命名空间，而不是正常的 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);

JSFiddle

从 javascript 更改后如何重绘 SVG（Internet Explorer 和 Edge）

How to redraw SVG after change from javascript (Internet Explorer and Edge)

javascript

explorer

svg

microsoft-edge