Menu
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?
240
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.
72
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
