Overflow: Visible on SVG

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.

Leave a Comment