Question

我正在为客户做一个网站，我需要在建筑物的图片上放置特定的鼠标悬停区域。而不是映射坐标，我认为最简单的方法是在SVG中勾勒每个楼层，并在每个形状上执行鼠标悬停。

这在Chrome和Firefox中效果很好，但当然IE让我失望了。 SVG在IE中不会响应。这是要查看的网站：http://633w5th.com/availability/

这里是SVG和附带的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不希望成为容器的整个宽度。对此有什么修正吗？

Answer 1

是的，我认为Paulie_D就在这里。

我有同样的问题，我通过制作一个简单的包装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>

没有div，它在FF和Chrome中运行良好，但在IE中，图像显得非常小。

编辑：忽略after-render-mouse-drag-scaling，它是一个AngularJS指令。

Answer 2

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

您需要在整个父div上设置一个高度。

响应式SVG即不工作

2 个答案: