svg innerHTML in firefox can not display

Question

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

Answer 1

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.