火狐浏览器中的SVG innerHTML无法显示

Question

火狐浏览器中的SVG innerHTML无法显示

3

我使用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>

- user3522022

从Firefox 36开始，这应该可以正常工作。 - Robert Longson

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- helderdarocha · Accepted Answer

一个解决方法是将innerHTML代码作为HTML添加，而不是SVG。你可以通过在你的HTML代码中使用

（而不是

替换为：

<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。