Firefox SVG image is cut off when I use external stylesheet

Question

Given the SVG file at http://dpaste.com/756156/ when I display it in a <object> or <embed> tag, about half the time it loads in Firefox the bottom portion of the image is cut off. Using inline CSS renders it fine, and Chrome and IE9 render properly as well.

I've seen suggestions to add width and height attributes of "100%" to the SVG tag, but that hasn't helped. Any ideas?

Answer 1

Having just suffered this issue myself [svg being clipped in firefox] I found a solution. It's a bit random and has no logic, but it fixed the issue for me.

My svg was a simple "cloud" shape drawn with Illustrator using bezier curves. No matter how many times I drew it, the right-hand side (kind of a bubble shape) was being clipped by the browser. No amount of adjusting parameters (such as viewBox, x, y, width, height) would fix it. - It was still clipped. In fact by adjusting these parameters it became obvious that it wasn't caused by any of them.

The solution was to add more data to the curve. I simply added another anchor-point on the curve that was being clipped, and hey presto it rendered properly in firefox.

Random but true. Hope this helps

Answer 2

This might be caused by Firefox rendering the SVG before loading the stylesheet, then not realizing that it needs to update it. Try changing the classname of the SVG tag in the onload event (JavaScript), as suggested by this page: http://ajaxian.com/archives/forcing-a-ui-redraw-from-javascript

If that doesn't work? Try completely regenerating the element with elm.parentNode.innerHTML += '' as suggested in the comments to this StackOverflow question: https://stackoverflow.com/a/2922034/638544