Geek Answers Handbook

Exported SVG file displayed differently in browsers

I’m having trouble understanding the reasons why this file will be displayed differently in browsers (Chrome: only axes are displayed, Safari and FF display main content and axes).

This is the figure that was exported from the DC.js example page , the first digit using SVG-crowbar2 .

Basically, Crowbar just looks for any external CSS rules applied to the SVG element and applies them as inline css. The question is, do css rules make elements appear differently?

+4
source share
2 answers

The problem seems to be causing the item #yearly-bubble-chart-clip > rect. It has a built-in styles that are installed widthand heightin auto. In Chrome, this overrides attributes widthand heightresults in a clipping path of 0pixels by 0pixels.

If you remove these styles, for example, it will work in Chrome.

<rect width="888" height="198" transform="translate(-0, -0)" style="overflow-x:visible;overflow-y:visible;perspective-origin:0px 0px;-webkit-perspective-origin:0px 0px;transform-origin:0px 0px;-webkit-transform-origin:0px 0px;"/>

JSFiddle example

+3
source

Yours chart-bodyseems to appear in Chrome if you delete width:auto;and height:auto;from rectin the click path yearly-bubble-chart-clip.

+3
source

More articles:


All Articles