CODEWITHSUNDEEP
cssinternet-explorersvg
am_
am_

Reputation: 2418

container div height does not scale to match height of child SVG in IE

I have a container div that has a SVG inside of it:

<!DOCTYPE html>
<body>
    <div class="container">
        <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="50" height="200">
    <rect x="0" y="0" width="50" height="200" />
    </svg>
    </div>
</body>

And the following CSS:

svg
{
    width: 100%;
    height: 100%;
}
div.container
{
    width: 100%;
    background-color: red;
}

In firefox, chrome etc. the container div will match the height of the svg. However this isn't the case for IE (I tested it in IE9). Removing the width/height: 100% from the svg style block will fix this, however I need these styles in order to scale my SVG (I've left out preserveAspectRatio in the SVG element in this example jsfiddle).

Here is the jsfiddle: http://jsfiddle.net/Cx5jR/

I was thinking that I could use zoom:1 to force IE to recognize hasLayout on the div element, but this didn't work.

Any ideas?

Here's a screenshot from how the rendering looks in IE9 - notice that the div (red background) doesn't scale beneath the SVG (black rectangle) height.

IE9 bug svg scale bg

Upvotes: 5

Views: 9887

Answers (1)

ASGM
ASGM

Reputation: 11381

The SVG currently lacks a viewBox attribute, which is needed for consistent cross-browser rendering. The lack of viewBox, combined with setting the width and height of the SVG to 100% in the CSS seems to be the root of the problem.

Here is a jsfiddle that has consistent rendering across Chrome and IE9: http://jsfiddle.net/Cx5jR/3/.

The following is added to the <svg> tag: viewBox="0 0 50 200" (starting X coordinate, starting Y, ending X, ending Y)

And height and width in the CSS for the <svg> are removed.

Upvotes: 3

Related Questions