正文 

当前位置： 首页 > 知识 >

Firefox 中的 svg innerHTML 无法显示

     2023-05-07     232

关键词：

【中文标题】Firefox 中的 svg innerHTML 无法显示【英文标题】：svg innerHTML in firefox can not display 【发布时间】：2014-05-25 01:25:26 【问题描述】：

我使用 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   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   fill="yellow" /></g>';
        
        </script>
    </head>

    <body>

    <svg id="container"   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>

【问题讨论】：

从 Firefox 36 开始，这应该可以正常工作。 【参考方案1】：

一种解决方法是将 innerHTML 代码添加为 HTML，而不是 SVG。您只需在 HTML 代码中使用 &lt;div&gt;（而不是 &lt;svg&gt;）作为占位符，然后通过 innerHTML 插入完整的 SVG。

替换：

<svg id="container"  >
</svg>

与

<div id="container" style="width: 100px; height: 100px">
</div>

并将您的 innerHTML 字符串包装在 &lt;svg&gt; 元素中：

var svg = document.getElementById('container');
svg.innerHTML   = '<svg><rect   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   fill="yellow" /></g></svg>';

这应该适用于 Chrome 和 Firefox。这是JSFiddle。

【讨论】：

如你所说；我将我的代码更改为var tempDiv = document.createElement("div"); tempDiv.innerHTML = "&lt;svg&gt;"+svgEles+"&lt;/svg&gt;" var svgNodes = Array.prototype.slice.call(tempDiv.childNodes[0].childNodes); svgNodes.forEach(function(el) container.appendChild(el); ); 这个工作在 chrome 和 firefox 中；并且很容易修复我的旧代码谢谢！

Firefox中的svg变换原点问题

】Firefox中的svg变换原点问题【英文标题】：svgtransform-originproblemsinfirefox【发布时间】：2017-04-1505:27:24【问题描述】：请原谅我糟糕的英语。当我想在Firefox中为SVG设置动画时遇到问题。问题来自“transform-origin”我的代码示例：htt... 查看详情

Firefox 中的 SVG 过滤器转换

】Firefox中的SVG过滤器转换【英文标题】：SVGFilterTransitioninFirefox【发布时间】：2012-11-2507:07:30【问题描述】：我正在尝试将图像从50%灰度滤镜过渡到悬停时的无滤镜状态。但是，过渡在Firefox中不起作用。是否可以仅使用css在Firefo... 查看详情

innerHTML、<form> 和 Firefox

】innerHTML、<form>和Firefox【英文标题】：innerHTML,<form>andFirefox【发布时间】：2012-01-1707:59:07【问题描述】：我在使用Firefox时遇到问题。我所做的工作适用于IE，但不适用于Firefox。我使用innerHTML将div与window.parent中的表单一... 查看详情

内容安全策略正在阻止 Firefox 中的 svg 图标精灵

】内容安全策略正在阻止Firefox中的svg图标精灵【英文标题】：ContentSecurityPolicyisblockingansvgiconspriteinFirefox【发布时间】：2021-11-2918:24:17【问题描述】：我试过在网上搜索，但没有运气。我一直在使用Chrome/Edge在我的网站上工作，... 查看详情

Firefox 浏览器中的 SVG 路径元素缩放转换错误

】Firefox浏览器中的SVG路径元素缩放转换错误【英文标题】：SVGpathelementscaletransitionbuginFirefoxbrowser【发布时间】：2020-06-1803:13:58【问题描述】：我正在尝试通过在其上添加变换比例过渡来在悬停时为svg路径元素设置动画。它在chrom... 查看详情

在 Firefox 中的画布上下文对象上使用 svg 调用 drawImage() 时出现问题

】在Firefox中的画布上下文对象上使用svg调用drawImage()时出现问题【英文标题】：ProblemscallingdrawImage()withsvgonacanvascontextobjectinFirefox【发布时间】：2014-06-2406:15:05【问题描述】：我基本上想将我的SVG转换为PNG图像。因此，我将SVG转... 查看详情

SVG 符号未在 Firefox 中显示

】SVG符号未在Firefox中显示【英文标题】：SVGsymbolsnotbeingdisplayedinFirefox【发布时间】：2015-02-0302:01:19【问题描述】：我目前正在使用SVG符号来显示图标。这适用于IE、Chrome和Safari，但图标不会显示在Firefox中。***上有很多类似的问... 查看详情

SVG PacMan 中的鬼眼在 Firefox 中正确渲染，但在其他浏览器中不正确

】SVGPacMan中的鬼眼在Firefox中正确渲染，但在其他浏览器中不正确【英文标题】：GhosteyesinSVGPacManarerenderedcorrectlyinFirefox,butnotinotherbrowsers【发布时间】：2021-06-2104:41:47【问题描述】：我的SVGPacMan的GitHub存储库可在此处获得：https://g... 查看详情

组件属性未在 innerHTML html 中呈现

】组件属性未在innerHTMLhtml中呈现【英文标题】：ComponentpropertynotrenderingintheinnerHTMLhtml【发布时间】：2022-01-2006:39:37【问题描述】：我在innerHTML的帮助下将一个svg文件渲染到我的组件中。我的svg文件有一些在我的组件中定义和设置... 查看详情

为啥innerHTML =“”在Firefox中很慢

】为啥innerHTML=“”在Firefox中很慢【英文标题】：WhyisinnerHTML=""slowinFirefox为什么innerHTML=“”在Firefox中很慢【发布时间】：2010-10-1105:11:08【问题描述】：我正在测试将html元素动态添加到DOM的不同方法的速度。我已经构建了... 查看详情

javascript中的innertext和innerhtml

(1)几乎所有DOM元素都有innerText和innerHTML属性（注意大小写），分别是元素标签内内容的文本表示形式和HTML源代码。(2)在firefox下，不支持innerText，可以用textContent属性。也可以用innerHTML设置普通文本。(3)用innerHTML也可以替代createEl... 查看详情

SVG 和 JQuery GIF 填充在 Firefox 上运行速度较慢

】SVG和JQueryGIF填充在Firefox上运行速度较慢【英文标题】：SVGandJQueryGIFfillrunningsloweronFirefox【发布时间】：2019-07-1908:48:53【问题描述】：我构建了一个交互式SVG，其填充属性会随着悬停在每个组上而发生变化。它在Chrome和IE中的我... 查看详情

safari不支持svg的innerhtml方法的解决方案

因为低版本的safari浏览器不支持svg下的innerHTML方法而我们的移动端h5页面引用了d3.js插件，而d3中使用了innerHTML我们的解决方案是不修改d3的任何原代码，去重写innerHTML方法从gitHub上找到了一个小插件，简单修改即可实现https://githu... 查看详情

Nuxt 不会在 Firefox 中将内联 SVG 作为 Vue 组件加载，我该怎么办？

】Nuxt不会在Firefox中将内联SVG作为Vue组件加载，我该怎么办？【英文标题】：Nuxtwon\'tloadaninlinedSVGasVuecomponentinFirefox,whatshouldIdo?【发布时间】：2021-07-2107:05:50【问题描述】：SVG是作为组件从源代码复制粘贴到.vue文件中的，它可以... 查看详情

从 Firefox 扩展中清除 innerHTML 的最佳方法

】从Firefox扩展中清除innerHTML的最佳方法【英文标题】：BestwaytopurgeinnerHTMLfromaFirefoxExtension【发布时间】：2018-01-1616:15:48【问题描述】：我正在运行web-extlint并返回一些类似这样的错误：UNSAFE_VAR_ASSIGNMENTinnerHTML的不安全赋值出于安... 查看详情

无法在 Firefox 中设置 IFrame 的 document.body.innerHTML

】无法在Firefox中设置IFrame的document.body.innerHTML【英文标题】：Cannotsetdocument.body.innerHTMLofIFrameinFirefox【发布时间】：2011-12-1107:49:28【问题描述】：我一直在寻找一种跨浏览器的方式来以编程方式设置IFrame的innerHTML。（如http://roneiv.... 查看详情

Firefox SVG 图形模糊

】FirefoxSVG图形模糊【英文标题】：FirefoxSVGgraphicsblurry【发布时间】：2012-02-1518:19:11【问题描述】：我有一个带有SVG徽标/图像的响应式网页设计，它的容器是动态的。所有主流浏览器似乎都支持SVG真的很好。我的SVG是动态的，所... 查看详情

Firefox 不显示 SVG

】Firefox不显示SVG【英文标题】：FirefoxnotdisplayingSVG【发布时间】：2014-03-0614:16:03【问题描述】：我注意到Firefox在此页面上没有显示SVG徽标-http://silodrome.com-它可以在IE10+以及Chrome和Safari中正常运行，没有任何问题。用于徽标的CSS... 查看详情