Firefox中的svg innerHTML无法显示 [英] svg innerHTML in firefox can not display
本文介绍了Firefox中的svg innerHTML无法显示的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
<！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'）;
$ b $ svg.innerHTML ='< rect width =100height =60fill =green/>'
+'< circle cx =10cy =19r =20fill =blue>< / circle>'
+'< text x =15y =20fill =white> hello world< ; / text>'
+'< g transform =translate（0，70）>< rect width =100height =20fill =yellow/>< g取代;';
}
< / script>
< / head>
< body>
< svg id =containerwidth =100pxheight =100pxhttp://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> 作为占位符，并通过 innerHTML 插入完整的SVG。
替换：
< svg id =containerwidth =100pxheight =100px>
< / svg>
与
< div id =containerstyle =width：100px; height：100px>
< / div>
将 innerHTML code $< svg> 元素：
var svg = document.getElementById容器'）;
svg.innerHTML ='< svg>< rect width =100height =60fill =green/>'
+'< circle cx =10cy =19r =20fill =blue>< / circle>'
+'< text x =15y =20fill =white> hello world< ; / text>'
+'< g transform =translate（0，70）>'
+'< rect width =100height =20fill =yellow />< / g>< / svg>';
这可以在Chrome和Firefox中使用。这是 JSFiddle 。
i use innerHTML to add svg element,it works fine in chrome but in firefox it can not display; thanks so much for any ansower
<!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>
解决方案
A workaround is to add the innerHTML code as HTML, and not SVG. You can do that simply by using a <div> (instead of <svg>) in your HTML code as the placeholder, and insert the full SVG via innerHTML.
Replace:
<svg id="container" width="100px" height="100px">
</svg>
with
<div id="container" style="width: 100px; height: 100px">
</div>
And wrap your innerHTML string within an <svg> element:
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>';
This should work in both Chrome and Firefox. Here's a JSFiddle.
这篇关于Firefox中的svg innerHTML无法显示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
