2

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/

freiksenet
  • 3,569
  • 3
  • 28
  • 28

2 Answers2

2

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").

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

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

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

Paul LeBeau
  • 97,474
  • 9
  • 154
  • 181
  • I tried copy pasting raw SVG code to html page and opening it and it doesn't work. Also SVG used to work with different SVG markup. – freiksenet May 08 '14 at 08:34
-1

Embedding SVG into ReactJS

In the above link, Ben Alpert shows a way to include markup directly into the page without react preprocessing the element, using dangerouslySetInnerHTML.

This attribute doesn't have much documentation yet, but it is found on the following page: http://facebook.github.io/react/docs/jsx-gotchas.html

See the following issue for more details on lack of documentation for this function: https://github.com/facebook/react/issues/413

Community
  • 1
  • 1
Joshua Purcell
  • 43
  • 5
  • It works with the method I use above, you don't need dangerouslySetInnerHTML. The problem is SVG in Firefox, not React. – freiksenet May 08 '14 at 08:33