我使用innerHTML添加svg元素，它在chrome中工作正常，但在firefox中无法显示；非常感谢您的回答
<!DOCTYPE html>
<html>
<head>
<title>SVGInnerHTML demo</title>
<meta charset="utf-8" />
<script src="svginnerhtml.js"></script>
<script>
alter = function () {
var svg = document.getElementById('container');
svg.innerHTML = '<rect width="100" height="60" fill="green" />'
+ '<circle cx="10" cy="19" r="20" fill="blue"></circle>'
+ '<text x="15" y="20" fill="white">hello world</text>'
+ '<g transform="translate(0, 70)"><rect width="100" height="20" fill="yellow" /></g>';
}
</script>
</head>
<body>
<svg id="container" width="100px" height="100px" http://www.w3.org/2000/svg>
</svg>
<p>
<button onclick="alter()">set .innerHTML</button>
<button onclick="alert(document.getElementById('container').innerHTML)">get .innerHTML</button>
</p>
</body>
</html>
解决方法是将innerHTML 代码添加为HTML，而不是SVG。您可以简单地通过使用来做到这一点<div>（代替<svg>) 在 HTML 代码中作为占位符，然后通过以下方式插入完整的 SVGinnerHTML.
Replace:
<svg id="container" width="100px" height="100px">
</svg>
with
<div id="container" style="width: 100px; height: 100px">
</div>
并包裹你的innerHTML一个内的字符串<svg>元素：
var svg = document.getElementById('container');
svg.innerHTML = '<svg><rect width="100" height="60" fill="green" />'
+ '<circle cx="10" cy="19" r="20" fill="blue"></circle>'
+ '<text x="15" y="20" fill="white">hello world</text>'
+ '<g transform="translate(0, 70)">'
+ '<rect width="100" height="20" fill="yellow" /></g></svg>';
这应该适用于 Chrome 和 Firefox。这是一个JSFiddle.
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
