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)
小智 10
将您的标记修改为
<div id="container">
Your svg here
</div>
Run Code Online (Sandbox Code Playgroud)
并添加
document.getElementById("container").innerHTML += "";
Run Code Online (Sandbox Code Playgroud)
在脚本的末尾。