it-swarm.com.ru

SVG выдает в ie11

У меня есть div, высота которого установлена ​​равной 320 пикселям, затем для его потомка установлена ​​ширина 100% этого Дочерним элементом этого файла является SVG, для которого я установил ширину в 200% контейнера . В chrome и firefox, которые работают отлично, я получаю хорошее изображение, как это:

 enter image description here

HTML выглядит так:

<div class="kit-template ng-isolate-scope front">
    <div class="svg-document ng-scope">
        <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 259.5 131.4" enable-background="new 0 0 259.5 131.4" xml:space="preserve" class="ng-scope">
            <!-- Removed for brevity -->
        </svg>
    </div>
</div>

и CSS/SASS выглядит так: 

.kit-template {
    overflow: hidden;
    position: relative;   
    height: 320px;

    .svg-document {  
        width: 100%;   
        overflow: hidden;
        margin: 0 auto;
        /*position: absolute;
        bottom: 0;*/

        svg {
            width: 200%;

            path, polyline, polygon, rect {
                cursor: pointer;
            }
        }
    }
}

Как я уже сказал, это прекрасно работает как в Chrome, Firefox, так и в IE Edge. Но в IE11 я получаю это:

 enter image description here

И если я осматриваю элемент, я вижу, что SVG выглядит так, как будто он имеет отступ слева и справа, но я могу заверить вас, что это не так.

Кто-нибудь знает, почему это происходит и как я могу это исправить?

Обновление 1

Я создал очень простую версию для codepen, чтобы вы могли увидеть проблему . Вот она:

http://codepen.io/r3plica/pen/Kdypwe

Посмотрите, что в Chrome, Firefox, Edge, а затем IE11. Вы увидите, что только IE11 имеет проблему.

14
r3plica

Что вы можете сделать, это добавить атрибут height="320" в ваш тег SVG. Поэтому IE может правильно отображаться. Я считаю, что IE11 сбрасывается при использовании ширины 200% в вашем CSS. Но поскольку xml:space="preserve" является значением по умолчанию, установка только высоты сохранит пропорции вашей SVG-оболочки.

Тестовый пример кода в IE11:

http://codepen.io/jonathan/pen/MarvEm

<svg height="320" viewBox="0 0 248.2 142.8" enable-background="new 0 0 248.2 142.8" xml:space="preserve">

Также удалите тег пространства имен XML, так как он не нужен внутри HTML-страницы. Также вы можете удалить некоторые атрибуты SVG, такие как version, xmlns, xmlns:xlink, x и y, так как они также не нужны.

8
Jonathan Marzullo

У меня была проблема отображения изображения SVG в IE11. Проблема заключалась в том, что у внутреннего svg-изображения были упомянуты ширина и высота. Из-за этого он неправильно масштабировался на IE11, и он отлично работал на IE Edge, chrome, firefox, очень хорошо.

<svg xmlns="http://www.w3.org/2000/svg" width="120" height="120" viewBox="0 0 120 120">

Чтобы решить эту проблему, я удалил width = "120" height = "120" и все работает нормально . Когда я заметил, что изображение svg имеет width = "120" height = "120" viewBox = "0 0 120 120 " но в IE11 показывалось только width =" 120 "height =" 120 ".

вывод был:

<svg xmlns="http://www.w3.org/2000/svg" width="120" height="120">

 enter image description here

0
Sandeep M