html - SVG 在 Internet Explorer 中的大小不正确

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%