SVG可在Chrome中使用，但不能在Firefox中使用 [英] SVG works in Chrome, but not Firefox

问题描述

我已经使用React绘制了一个小的SVG演示，以绘制十六进制网格.它在Google Chrome浏览器中工作正常，但Firefox似乎具有正确的DOM，但未显示元素.我的SVG有什么问题吗?

I've made a small SVG demo using React for drawing hex grids. It works fine in Google Chrome, but Firefox seems to have correct DOM, but is not displaying the elements. Is there anything wrong with my SVG?

http://freiksenet.github.io/hexdrawer-svg/demo/

推荐答案

未渲染的原因是脚本生成的SVG元素具有XHTML命名空间(即"

The reason they are not rendering is that the SVG elements generated by your script have the XHTML namespace (ie. "http://www.w3.org/1999/xhtml"), when they should have the SVG namespace ("http://www.w3.org/2000/svg").

在Chrome中将元素添加到SVG时，默认情况下会使用SVG命名空间，而FF则不是聪明".

When you add elements to an SVG in Chrome it uses the SVG namespace by default, whereas FF is not as "clever".

我不知道ReactJS，所以我不知道是否有解决方法.

I don't know ReactJS, so I don't know whether there is a workaround.

如果使用通用DOM方法(例如document.createElementNS()等)，则可以正确创建它们.

You can create them correctly if you use the generic DOM methods (eg. document.createElementNS() etc).

这篇关于SVG可在Chrome中使用，但不能在Firefox中使用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！