Home/ Questions/Q 4617506
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-22T02:08:02+00:00

The following code: <!DOCTYPE html> <html> <head> <title>Test.</title> </head> <body> <div style=border: solid 1px

  • 0

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?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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.

    • 0