Значки svg в IE9 отображаются неправильно

Наши значки svg, включенные с помощью тега img, неправильно изменяются, обрезаются или полностью скрываются при отображении в IE9.Значки svg в IE9 отображаются неправильно

Решение в https://gist.github.com/larrybotha/7881691 (установка viewBox, удаление ширины и высоты) не помогает и не включает в себя изображения в качестве фона.

При включении с помощью тега, дисплей SVGs правильно (но тогда они не отображаются в некоторых современных браузерах, таких как хром)

Одна из икон мы используем следующий источник:

<?xml version="1.0" encoding="UTF-8" standalone="no"?> 
<!-- Generated by IcoMoon.io --> 
<svg id="svg2" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" viewBox="0 0 640 640"> 
<metadata id="metadata167"> 
    <rdf:RDF> 
    <cc:Work rdf:about=""> 
    <dc:format>image/svg+xml</dc:format> 
    <dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage"/> 
    <dc:title/> 
    </cc:Work> 
    </rdf:RDF> 
</metadata> 
<path id="path161" fill="#c6c6c6" d="m227.88,640.44c-19.924,0-38.795-9.298-50.887-25.329l-163.69-216.1c-21.298-28.12-15.756-68.15,12.367-89.45,28.169-21.34,68.155-15.76,89.456,12.37l107.68,142.17,270.79-434.72c18.64-29.909,58.03-39.07,87.98-20.428,29.91,18.596,39.07,58.032,20.39,87.942l-319.85,513.45c-11.13,17.909-30.321,29.131-51.345,30.047-0.96187,0.0458-1.9237,0.0458-2.8856,0.0458z" stroke="#c6c6c6"/> 
</svg>

Любая идея о том, что мы можем сделать, чтобы SVG правильно отображался в IE9?

источник

2015-09-21 Jakub Judas

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

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

Если это не поможет, не могли бы вы поделиться код?

источник

2015-09-21 13:28:25 kieranpotts

Спасибо за ввод. Я просто добавил значок образца к вопросу –

Хмм. Это дает мне хорошо. Я просто сбрасывал все между тегами ' kieranpotts

Я попытался создать пустой html-документ, который содержит только , и он по-прежнему отключается с правой стороны в IE9. Я тестирую его (один из modern.ie) –

Обертывание svg в div и предоставление этой ширины, кажется, отлично работает для меня.

http://codepen.io/anon/pen/qONXzz

.svg-test{ 
    width: 50px; 
}

источник

2015-09-21 13:50:20 Puzzles

Спасибо за ввод - прямое вложение svg works , Он по-прежнему отключается, когда вы включаете его, как в тег img. Значок отображается многократно на странице, поэтому рекомендуется использовать метод, который не требует выделения svg для работы. –

Кажется, что единственный способ для встраивания и изменения размера внешнего файла XML, который работает корректно во всех браузерах является описанный в http://edutechwiki.unige.ch/en/Using_SVG_with_HTML5_tutorial

Так вместо

<img src="./images/icons/icons-complete.svg" style="width: 11px;height:11px;"/>

Вы можете использовать

<svg height="11" width="11" 
         xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> 
    <g transform="scale(0.0172)"> 
     <image x="0" y="0" height="640" width="640" xlink:href="/images/icons/icons-complete.svg"/> 
    </g> 
</svg>

источник

2015-09-22 07:47:38

Значки svg в IE9 отображаются неправильно

ответ

Смежные вопросы