Overflow: Visible on SVG

Question

Is it possible set overflow: visible on <svg> elements?

This simple example on jsfiddle breaks in every browser I have access to, (some versions of Chrome and Firefox) as they act like overflow: hidden.

Can anybody tell me if svg support is simply still too immature to do such simple things, or if I'm doing something wrong in my code?

My practical use of overflow: visible is a range-axis on a graph, where the bottom half of the -0 tick gets cut off.

Answer 1

overflow: visible  
box-shadow : 0px -0px 10000px transparent /*trick for chrome*/

Adding a huge box-shadow to the SVG , or adding the SVG in a DIV with the huge shadow solve it. In Chrome I noticed that the overflow is being clipped to the box-shadow limit.

Answer 2

I assume you mean inline <svg> elements in HTML, if so then this is just an implementation limitation. IE9+ allows overflow:visible on <svg> elements, but so far the other browsers don't AFAIK.

One possible workaround (which is really how it should be done in the first place IMHO) is to specify a viewBox which defines the coordinate system inside the svg. Then you draw stuff inside this coordinate system. If things get clipped (or in other words if the element(s) are outside the viewBox area), then just increase the viewBox width and/or height accordingly.

If you wonder about a good default for your particular viewBox, try [0 0 width height] (where width and height is the size of your svg you have at the moment), then just increase the height until the bottom tick is fully visible.

2014 update: It's still a little bit inconsistent across browsers, but it's getting there. Firefox and IE support overflow:visible on inline svg elements, and Blink (Opera 23/Chrome 36) added support for it too, for the details see bugreport.