36

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.

Thomas Ahle
  • 30,774
  • 21
  • 92
  • 114

2 Answers2

35

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.

Erik Dahlström
  • 59,452
  • 12
  • 120
  • 139
  • 2
    If I set a viewBox my svg-elements are scaled to fit inside the main svg element. They still don't overflow. Just making the svg bigger to fit the stuff I want to overflow, will break the html layout. – Thomas Ahle Sep 10 '12 at 03:43
  • Maybe what I really needed to know is whether webkit supports this, if the standard specifies it, and if I'm right that webkit used to support it? – Thomas Ahle Sep 10 '12 at 04:01
  • 2
    Ah, I see what you mean now. No you're going to have to workaround the lack of support for `overflow:visible` by increasing the viewport (aka the size of the svg). – Erik Dahlström Sep 11 '12 at 07:25
  • awesome. just like magic. solved most of the bugs I was trying to resolve. – mythicalcoder Jul 29 '15 at 12:56
  • I'm wanting `overflow:hidden` so that the SVG is not visible outside its container. Can we do that? – lmat - Reinstate Monica Oct 25 '22 at 22:07
5
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.

Kim Sant
  • 386
  • 4
  • 7