Responsive SVG in ie not working

Question

I'm doing a site for a client where I need to have specific mouse-over areas on a picture of a building. Instead of mapping coordinates, I thought it would be easiest to just outline each floor in an SVG and do a mouseover each shape. The

This works great in Chrome and Firefox, but of course IE fails me. The SVG will not be responsive in IE. Here's the site to take a look: http://633w5th.com/availability/

and here's the SVG and accompanying CSS:

<div class="building">
    <div class="floorSelector">...</div>
    <div class="floorNum">...</div>
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 792 1224" preserveAspectRatio="xMinYMin meet">
        <path class="under" fill="rgba(255,255,255,1)" d="M459.1,1155.4v11.8c-59.3,55.6-143,28-143,28l-8.8-21.9c0,0-17.6-13.6-24.4-34.6l-0.3-23.8l-7.8-22V1078 l8.8,22.5l-1,13.4c0,0-2,24.2,25,44.4l8.5,25.5C316.2,1183.8,399,1211.5,459.1,1155.4z" style="fill: rgb(185, 185, 185);"></path>
        <!--35 more layers of '.under' paths-->
        <image overflow="visible" enable-background="new    " width="250" height="847" xlink:href="/wp-content/uploads/2013/11/building.png" transform="matrix(1.4451 0 0 1.4451 215.3625 0)"> </image>
        <path class="over" fill="rgba(255,255,255,1)" d="M459.1,1155.4v11.8c-59.3,55.6-143,28-143,28l-8.8-21.9c0,0-17.6-13.6-24.4-34.6l-0.3-23.8l-7.8-22V1078 l8.8,22.5l-1,13.4c0,0-2,24.2,25,44.4l8.5,25.5C316.2,1183.8,399,1211.5,459.1,1155.4z" style="display: none;"></path>
        <!--35 more layers of '.over' paths-->
        <rect class="rect" x="527.7" y="1160.7" fill="#ffffff" width="2.3" height="2.7"></rect>
        <!--35 more layers of rectangles-->
        <!--The rectangles are needed for jQuery to find positions-->
    </svg>
</div>

The CSS

.building {
    width:33%;  
    float:left;
    position:relative;
}
.building svg {
    width: 145%;
    margin-left: -75px;
}
.under {
    fill:rgba(0,0,0,0.3);
}
.over {
    display:none;   
}
@media only screen  and (max-width : 1200px) {
    .building {
        width:100%;
    }        
    .building svg {
        width: 240%;
        margin-left: -66%;
    }
}

the .building div is what controls the width of the building, but the SVG does not want to be the full width of the container for some reason. Are there any fixes for this?

Answer 1

Yeah, I think Paulie_D is right on here.

I had the same problem and I solved it for IE by making a simple wrapper div:

<div id="draw-zone-wrapper" style="width: 600px; height: 468px;">
  <svg id="draw-zone" after-render-mouse-drag-scaling xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" viewBox="0 0 720 480" preserveAspectRatio="xMidYMid meet">
    <!-- svg content -->
  </svg>
</div>

Without the div, it worked fine in FF and Chrome but in IE the image came out very small.

Edit: Ignore the after-render-mouse-drag-scaling, it's an AngularJS directive.

Answer 2

My understanding is that IE has a default height of 150px.

You'd need to set a height on the overall parent div.