SVG image is not cropped in IE9

问题

The following code:

<!DOCTYPE html> 
<html> 
    <head> 
        <title>Test.</title> 
    </head> 
    <body> 
        <div style="border: solid 1px black; height:100px; width:100px">
            <svg height="100" width="100" viewbox="00 0 100 100">
                <path id="map1" d="M210 10 L90 10 L90 90 " fill="red"/>
            </svg>
        </div>
</html>

JSFiddle: http://jsfiddle.net/HRsvX/

In Chrome and FF4 displays div with border and part of image that is INSIDE of SVG-object. Everything outside of the svg is not drawn.

IE9 displays WHOLE SVG-image. Is it a feature or a bug? Is there any way to cut the 'outbounding' part of image?

Does Raphael framework handle such case correctly?

回答1:

Edit: In light of my new understanding of the spec, I must correct myself below.

The default style required by the spec for elements in the svg namespace is:

svg, symbol, image, marker, pattern, foreignObject { overflow: hidden }
svg { width:attr(width); height:attr(height) }

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.

来源：https://stackoverflow.com/questions/5971320/svg-image-is-not-cropped-in-ie9

标签

html5

cross-browser

svg