use*_*022 3 firefox svg innerhtml
我使用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.您可以通过在HTML代码中使用<div>(而不是<svg>)作为占位符来完成此操作,并通过插入完整的SVG innerHTML.
更换:
<svg id="container" width="100px" height="100px">
</svg>
同
<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.