Question

我知道IE中的SVG支持很不稳定，但是人们已经设法从IE9开始正常运行。

我正在创建一个电影院座位选择类型的东西 - 就像预订电影时在这里找到的AMC一样：https://www.amctheatres.com/movies/focus#31347

然而在IE中，我的svg渲染真的很小。我无法理解我的生活。

下面是我的开放svg代码，其中包含几个内部位：

<svg preserveAspectRatio="xMidYMin" height="100%" width="100%" viewBox="0, 0, 440, 380">

    <rect width="440" height="7" style="fill:#333e48;"> <!-- The screen --> 

    <g transform="translate(360, 300)">
        <circle cx="10" cy="10" r="8" class="disabled circle" fill="#c6cacd" data-rowindex="3" data-columnindex="3" data-seatnumber="P18" data-areacategorycode="0000000004" data-areanumber="1"></circle>
    </g>
    ...

Answer 1

所以我最终弄明白了。使用@ paulie_D在评论中提到的文章。

这是一个跨浏览器工作的JSfiddle：http://jsfiddle.net/91b0L2tg/1/

以下是原始文章：https://css-tricks.com/scale-svg/

.svg-container {
   position: relative; 
   height: 0; 
   width: 100%; 
   padding: 0;
   padding-bottom: 100%; 
}

svg {
    position: absolute; 
    height: 100%; 
    width: 100%; 
    left: 0; 
    top: 0;
}

可以使用一点点工作。

它无法工作的原因是因为IE要求容器div将宽度设置为固定宽度而不是100％

SVG在Internet Explorer中没有正确调整大小

1 个答案: