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

【问题标题】：How to redraw SVG after change from javascript (Internet Explorer and Edge)从 javascript (Internet Explorer 和 Edge) 更改后如何重绘 SVG
【发布时间】：2016-03-31 17:00:35
【问题描述】：

有谁知道在更改内容后如何强制 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>

【问题讨论】：

标签： javascript svg microsoft-edge explorer

【解决方案1】：

将您的标记修改为

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

并添加

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

在脚本的末尾。

【讨论】：

大声笑，它确实有效。虽然在我的情况下这是必需的，因为我使用 document.createElement() 而不是 document.createElementNS()

【解决方案2】：

正如@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

【讨论】：

【解决方案3】：

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

请看一下： update SVG dynamically

【讨论】：

它曾经不合适，但规范发生了变化，现在它应该可以与 SVG 元素一起使用。 Chrome 和 Firefox 已实施新规范，但 IE 和 Safari 尚未实施。
@RobertLongson，没错。这是我问这个问题的主要原因。谢谢。
这个答案链接到的答案只包括链接本身=-D

【解决方案4】：

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 包装在容器中，然后更新容器的内容似乎可行。

【讨论】：

它不能解决我的问题，因为我只需要更新 SVG 的一部分。顺便提一句。如何获取 SVG 的内容？似乎 document.getElementById('svg').innerHTML 不起作用
我更新了 plunk。我可以获得包含 SVG 的 div 的当前 innerHTML。我可以设置包含 SVG 的 div 的内容。我正在异步执行它，它在 IE 中为我工作。
我明白了...但是有没有办法获取/设置
...
看起来您可以整天更改标签的内容，但 IE 并不关心将此更新传递给您的眼球。你首先问这个问题的原因是什么，不是吗？
是的，我真的很想知道它为什么会这样。但老实说，我宁愿寻找“功能”之外的解决方法。