Svg Image Is Not Cropped In Ie9

The following code:

Copy

per http://www.w3.org/TR/SVG/styling.html#UAStyleSheet

So, if you want IE9 to conform you can use:

svg:not(:root) { overflow: hidden; }

As suggested here and here.

The following is true if the default overflow: hidden is overridden:

According to the SVG Spec, SVG handles overflow like any other element when contained within a document that is using CSS. Items inside of the element overflow unless overflow: hidden or overflow:scroll if they exceed the size of the parent.

In your example, I see it as the path exceeds the viewbox defined on the svg element. Since the default overflow is visible, the path will "bleed" beyond the svg element's boundries. Additionally, it bleeds beyond the svg element's parent boundries, etc.

Share