All geek questions in one place

Firefox does not display SVG correctly, other browsers

I am new to the world of SVG and D3, learning how I implement. In the face of problems with one of the sites I'm currently working on.

Requirements:
We want to create our own chart (similar to a histogram) that has a set of bars that represent my data points, and some icons are embedded in these columns depending on the type of data in the histogram. The graph represents a person’s achievements throughout their career. When hovering the panel, we show a custom pop-up window with a brief description of the panel (see the example below). Some bars have an extra arrow representing whether the panel represents the view that the user is currently holding.

Progress made:
As you can see my profile in the TIMELINE section.

So what's wrong?
Everything works fine (as seen from the screenshots) in Chrome. All other browsers display a graph without icons. You can view my profile in Chrome and Firefox.

I copied the d3 generated SVG HTML code and pasted it into jsfiddle to test it on all browsers and found that all browsers render it: (ignore the colors, I did not apply CSS to it, but icons appear) http://jsfiddle.net / EbpPG / 1 /

See JS fiddle link

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

Can someone take a look at him and let me know what mistake I am making?

+4
2

, SVG. . , - jQuery append :

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

HTML-, . (, Chromium .)

Firebug . HTML . HTML DOM, , namespaceURI.

, DOM, , d3,

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

Firefox DOM Inspector, , , , HTML, SVG, .

, decodeHTMLEntities, , , , , .

d3, , - UA, , jsfiddle.

+1

Source: https://habr.com/ru/post/1528245/

More articles:


All Articles