Internet Explorer 中的 SVG 太小答案

【问题标题】：SVG too small in Internet ExplorerInternet Explorer 中的 SVG 太小
【发布时间】：2015-11-27 22:42:12
【问题描述】：

遇到了一个奇怪的问题，即 IE 不想在我的 HTML 中遵守 SVG 的视图框大小。

viewBox="0 0 1000 563"

它适用于我尝试过的所有其他浏览器，但在 Windows 上的 IE 上失败（我运行带有 IE 11.0 的 Win 8.1）。它似乎可以在 Win10 上的 IE/Edge 上运行，即使在 IE

我真的不明白如何解决这个问题，但我读过 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>

【问题讨论】：

为 svg 元素添加宽度和高度属性。
它应该是响应式的。根据宽度填充高度。
有了 viewBox，即使你有高度和宽度，它也会响应。您可以设置高度和宽度百分比。
会再试一次，让你知道。到目前为止谢谢:)
您可能还想查看css-tricks.com/scale-svg 和tympanus.net/codrops/2014/08/19/making-svgs-responsive-with-css

标签： internet-explorer web svg height imagemap

【解决方案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();
});

【讨论】：

【解决方案2】：

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

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

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

【讨论】：

【解决方案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>

【讨论】：