SVG не отображается в IE11

Я встроил данные SVG файлов непосредственно в свой html. Он отображается в Chrome и Firefox, но в IE11 он вообще не отображается. Ссылка pastebin на SVG http://pastebin.com/eZpLXFfD

Я пробовал добавить META TAG, но безрезультатно. Сначала я подумал, что это может быть проблема с представлением о совместимости с IE, но переключение этой функции тоже не сработало.

<meta http-equiv="X-UA-Compatible" content="IE=8">

Любая помощь? Что еще информация Я могу предоставить, чтобы ответить на этот вопрос

Ответ 1

Звучит так, будто вы не в современном режиме документа. Internet Explorer 11 показывает, что SVG просто отлично, когда вы находитесь в режиме стандартов. Убедитесь, что если у вас есть метатег x-ua-compatible, у вас есть значение "Край", а не более ранний режим.

<meta http-equiv="X-UA-Compatible" content="IE=edge">

Вы можете определить свой режим документа, открыв свои инструменты разработчика F12 и проверив раскрывающийся список режима документа (см. вверху справа, в настоящее время "Край" ) или вкладку эмуляции:

Если у вас нет метатега x-ua-compatible (или заголовка), обязательно используйте doctype, который поместит документ в режим стандартов, например <!DOCTYPE html>.

Ответ 2

У меня была та же проблема с 3 из 4 встроенных svgs, которые я использовал, и они только исчезли (в одном случае, частично) в IE11.

У меня на странице <meta http-equiv="x-ua-compatible" content="ie=edge">.

В конце концов, проблема связана с дополнительными обтравочными контурами в файле svg. Я открыл файлы в Illustrator, удалил обтравочный контур (обычно в нижней части слоев), и теперь они все работают.

Ответ 3

Я понял это! Страница отображалась с использованием режима IE8... has

<meta http-equiv="X-UA-Compatible" content="IE=8">

в заголовке... изменил его на

<meta http-equiv="X-UA-Compatible" content="IE=9">

9 и это сработало!

Ответ 4

У вас есть повторяющиеся атрибуты стиля для каждого элемента.

style="opacity:0.8"

Это, конечно, не отображается в Firefox для меня из-за этой ошибки. Если он отображается в Chrome, лучше всего взломать Chrome.