响应式SVG，即不起作用 [英] Responsive SVG in ie not working

问题描述

我正在为客户做网站，我需要在建筑物图片上有特定的鼠标悬停区域.我认为只绘制SVG中的每个地板轮廓，然后将鼠标悬停在每个形状上，而不是映射坐标.

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

这在Chrome和Firefox中效果很好，但是IE当然使我无法正常工作. SVG将不会在IE中响应.这是要查看的网站: http://633w5th.com/availability/

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/

这是SVG和随附的CSS:

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>

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%;
    }
}

.building div是控制建筑物宽度的元素，但是出于某些原因，SVG不想成为容器的整个宽度.是否有针对此的修复程序?

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?

推荐答案

我的理解是IE的默认高度为150px.

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

您需要在整个父级div上设置高度.

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

这篇关于响应式SVG，即不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！