Question

这个奇怪的问题，IE不想在我的HTML中遵守SVG的视箱大小。

viewBox="0 0 1000 563"

它适用于我尝试的所有其他浏览器，但在Windows上的IE上失败（我运行Win 8.1 w / IE 11.0）。它似乎在Win10上的IE / Edge上工作，即使在IE＆lt; 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>

Internet Explorer

3 个答案: