Firefox doesn't render SVG properly, other browsers do

Question

I am new to the world of SVG and D3, learning as I implement. Facing an issue with one of the websites that I am currently working on.

Requirement:
We want to create a custom graph (similar to bar graph) that has a set of bars that represent my data points and certain icons are embedded into these bars based on the type of bar graph data. The graph is representing a person's achievements throughout their career. On hover of the bar we show a custom popup that has a brief description of the bar (see below for an example). Some bars have an additional arrow that represents whether the bar is representing an experience that the user is currently pursuing.

Progress so far:
As you can see my profile under TIMELINE section.

So, whats wrong?
Everything works fine (as you can see from the screenshots) on Chrome. All other browsers render the graph without the icons. You can view my profile on Chrome and Firefox.

I copied d3 generated SVG HTML code and pasted it in jsfiddle to test it out on all browsers and found that all browsers are rendering it: (ignore the colors, I have not applied CSS to it, but the icons show up) http://jsfiddle.net/EbpPG/1/

See JS fiddle link

Check my profile to see the graph. The logic to generate the graph can be found in chart.js file, createTimelineChart() function.

Can someone have a look at it and let me know what's the mistake I am making?

Answer 1

The problem is obviously how you dynamically generate the SVG. The path element is generated in the wrong namespace. This typically happens when you're using something like jQuery's append with a string:

$('svg').append('<path d="m0,0 h100"/>')

This will generate an HTML-namespaced path element, which does not exist. (Interestingly, Chromium is not even showing it in the developer tools.)

Firebug is good at showing you problems of this kind. In the HTML panel, the wrongly namespaced elements are shown in a lighter color. Right-clicking on them in the HTML panel gives you the option to examine in the DOM panel, and there you can see what the namespaceURI property is.

So, use either plain DOM manipulation methods or, if you're already using d3 anyway,

d3.select('svg').append('svg:path').attr('d','m0,0 h100')

Answer 2

Check out with Firefox DOM Inspector and you'll see that the path element that forms the icon is in the HTML namespace rather than the SVG namespace which would be required for it to appear.

Are you passing this data though decodeHTMLEntities, that might be recreating the element in the wrong namespace, you'll need to step though with a debugger to see when it goes wrong.

If you save the d3 generated page then when it's reread by any UA it will pick the right namespace which is why the jsfiddle works.