在Internet Explorer中SVG太小

Question

有一个奇怪的问题,IE不想在我的HTML中遵守SVG的视图框大小.

viewBox="0 0 1000 563"

它适用于我尝试的所有其他浏览器,但在Windows上的IE上失败(我运行Win 8.1 w/IE 11.0).它似乎在Win10上的IE/Edge上工作,即使在IE <11兼容模式下也是如此.

我真的不明白如何解决这个问题,但我已经读过IE确实有查看框和大小的问题.但我找不到办法解决它.

如果有人有任何想法我可以解决这个问题,那么请告诉我.

以下是有问题的代码,以及2个显示正确(firefox)和错误呈现(IE)的打印屏幕.

码:

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1000 563">
    <image class="trinn2" width="100%" height="100%" xlink:href="http://dummy.url"></image>
    <a xlink:href="http://dummy.url">
        <path class="  poly  " d="M718,467 L714,414 L656,412 L658,468 Z" id="poly_7557"></path>
    </a>
    <a xlink:href="http://dummy.url">
        <path class="  poly  " d="M588,468 L656,465 L656,411 L585,410 Z" id="poly_7559"></path>
    </a>
    <a xlink:href="http://dummy.url">
        <path class="  poly  " d="M484,410 L484,472 L586,468 L586,410 Z" id="poly_7560"></path></a><path class=" solgt poly  " d="" id="poly_7561"></path>
    <a xlink:href="http://dummy.url">
        <path class="  poly  " d="M846,369 L849,417 L789,416 L769,414 L767,361 Z" id="poly_7562"></path>
    </a>

    ... and so on ...

屏幕从Firefox顶部,IE在底部:(参见IE上较小的SVG.默认为150px高度.)

编辑:PHP代码

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1000 563">
        <image class="trinn2" width="100%" height="100%" xlink:href="<?php echo $left_image_markup; ?>"></image>
        <?php echo $left_facing;?>
         </svg>

Answer 1

我尝试使用发布的文章和我在寻找解决方案时发现的其他文章中的所有提示来解决此问题。似乎没有什么对我有用。

我通过执行以下操作解决了这个问题（可能不是最好的方法）：

父 div 被赋予了一个带有百分比的 padding-bottom 以保持宽高比，并且 svg 本身必须绝对定位。