在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

我使用javascript来检测父元素的宽度/高度，然后将SVG w / h设置为相同。我将代码添加到$（window）.resize事件中，以便在调整浏览器窗口大小时动态调整SVG。

function updateSVG() {
    var svg = $('#mySVG').first();
    if (svg != undefined && svg.length > 0) {
        var vb = svg.attr('viewBox');
        if (typeof (vb) == "string") {
            var c = vb.split(' ');
            if (c.length >= 4) {
                requestAnimationFrame(function () {
                    var w = c[2];
                    var h = c[3];
                    var pw = svg.parent().width();
                    svg.width(pw);
                    svg.height(pw*w/h);
                });
            }
        }
    }
}
$(window).resize(function() {
    updateSVG();
});

Answer 2

我试图使用发布的文章中的所有提示以及我在搜索解决方案时找到的其他方法来解决这个问题。似乎没有什么对我有用。

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

父div给出了填充底部百分比以保持纵横比，并且svg本身必须绝对定位。

Answer 3

尝试将svg作为对象包含在内，并使用CSS将其宽度设置为100％。

<object  style="width: 100%" type="image/svg+xml" class="full-width"  data="yoursvg.svg">Your browser does not support SVGs</object>