SVG слишком мал в Internet Explorer

У меня возникла эта странная проблема, когда IE не хочет подчиняться размеру окна просмотра SVG в моем HTML.

viewBox="0 0 1000 563"

Он работает во всех других браузерах, которые я пробовал, но не работает в IE в Windows (я использую Win 8.1 с IE 11.0). Похоже, он работает в IE/Edge на Win10, даже в режиме совместимости с 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 внизу: (см. меньший SVG в IE. По умолчанию высота 150 пикселей.) введите здесь описание изображения

РЕДАКТИРОВАТЬ: 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>

web svg internet-explorer height imagemap
person Stian Berg Larsen    schedule 02.09.2015    source источник
comment
Добавьте атрибуты ширины и высоты к элементу svg.   -  person Robert Longson    schedule 02.09.2015
comment
Он должен быть отзывчивым. Высота заливки зависит от ширины.   -  person Stian Berg Larsen    schedule 02.09.2015
comment
С viewBox он будет реагировать, даже если у вас есть высота и ширина. Вы можете сделать высоту и ширину в процентах.   -  person Robert Longson    schedule 02.09.2015
comment
Дам ему еще одну попытку и дам вам знать. Спасибо пока :)   -  person Stian Berg Larsen    schedule 02.09.2015
comment
Вы также можете проверить css-tricks.com/scale-svg и tympanus.net/codrops/2014/08/19/making -svgs-отзывчивый-с-css   -  person CBroe    schedule 02.09.2015
comment
высота и ширина в svg не работают. проценты не дают результата, и установленные значения не реагируют в моих тестах. Проверим эти ссылки CBroe   -  person Stian Berg Larsen    schedule 02.09.2015
comment
Не могу заставить его работать. Я читал эти статьи раньше, но я просто не могу заставить их работать. Определение высоты и с для родительского div работает, но мне нужно иметь возможность установить ширину = 100%, а высота должна быть такой, какой она должна быть, чтобы соответствовать svg. Точно так же, как Firefox или Chrome их отображают.   -  person Stian Berg Larsen    schedule 02.09.2015
comment
Установка родительской оболочки с padding-bottom работала только после установки самого SVG как абсолютного.   -  person Stian Berg Larsen    schedule 02.09.2015

Ответы (3)


arrow_upward
3
arrow_downward

Я использовал 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();
});
person Ben Hoffmann    schedule 08.08.2017

arrow_upward
0
arrow_downward

Я попытался решить эту проблему, используя все советы из опубликованных статей и других статей, которые я нашел при поиске решения. Ничто, казалось, не работало для меня.

Я решил это (вероятно, не лучшим способом), выполнив следующие действия:

Родительскому div был присвоен нижний край с процентным соотношением, чтобы сохранить соотношение сторон, а сам svg должен был быть позиционирован абсолютно.

person Stian Berg Larsen    schedule 02.09.2015

arrow_upward
0
arrow_downward

Попробуйте включить свой svg как объект и задать ему ширину 100% с помощью CSS.

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