SVG-анимация не работает на IE11

У меня очень простая анимация загрузки, которая отлично работает на Firefox и Chrome, но в IE11 она не показывает рисунок SVG.

Вот полный пример: образец JSFiddle

SVG:

   

Анимация, которая является поворотным, работает на IE11, но SVG, который является кругом, не отображается.

Есть идеи?

Я просто не могу понять, что не поддерживается IE11.

Только Microsoft Edge будет поддерживать SVG CSS Transitions и Animation .. особенно stroke-dasharray .

См. Документы разработчика Microsoft:

https://dev.windows.com/en-us/microsoft-edge/platform/status/csstransitionsanimationsforsvgelements

Позволяет использовать CSS-переход и анимацию для элементов SVG.
Исправленная версия: Microsoft Edge build 10240+

Как вы можете видеть в моей вилке вашего примера. Вы не видели вращения погрузчика из-за отсутствия атрибута stroke на элементе circle .

https://jsfiddle.net/z8w4vuau/50/

Вы можете видеть, как он может вращаться. Но вам нужно будет проверить, является ли браузер IE, и отрегулируйте свой stroke-dasharray чтобы он стал более stroke-dasharray . Поскольку IE11 и ниже не поддерживают анимирование SVG- stroke-dasharray и stroke-dashoffset с помощью анимации или переходов CSS, если это не Microsoft Edge build 10240+.

Но если вам нужно решение для перекрестного браузера для анимации SVG, особенно для stroke-dasharray и stroke-dashoffset . Затем изучите использование JS-анимационной библиотеки, такой как GreenSock Animation Platform ( GSAP ). Использование DrawSVGPlugin

https://greensock.com/drawSVG

IE не поддерживает анимацию CSS элементов SVG. Он также не поддерживает стандартные встроенные анимации SMIL, которые есть у SVG.

Если вы конвертируете свою анимацию в родные анимации SVG, вы можете заставить ее работать с помощью библиотеки FakeSmile . В противном случае вам понадобится использовать альтернативный вариант для IE – например, анимированный gif или что-то еще.

Для тех, у кого есть проблемы с этим, у меня есть обходное решение.

У меня был полный SVG с идентификаторами и анимацией CSS, все работали идеально для всех других основных браузеров.

У меня SVG вставлен в HTML, поэтому я могу получить доступ к каждому элементу с помощью анимации CSS.

Чтобы это сработало, вы должны иметь свой SVG с позицией:

 absolute; top: 0px; left: 0px, 

… внутри контейнера .svgcontent (или того, что вы хотите назвать)

Автор сценария:

 var IE = (navigator.userAgent.indexOf("Edge") > -1 || navigator.userAgent.indexOf("Trident/7.0") > -1) ? true : false; objs = [ '#file1', '#file2','#file3','#file4','#file5','#file6','#file7','#file8','#file9','#file10','#file11', '#bottom' ]; if ( IE ){ objs.forEach(function (item) { item = $(item); id = item.attr('id'); svgcontent = item.closest('.svgcontent') svg = item.closest('svg'); svgattrs = ' width='+svg.attr('width')+' height='+svg.attr('height')+' ' html = ''+item.html()+''; item.remove(); $(svgcontent).prepend(html); }); } 

Это берет все элементы в массиве objs и вставляет их как полный SVG за первым (вы можете изменить prepend для append чтобы изменить это поведение).

И SVG будет иметь тот же идентификатор, что и объект, поэтому анимация CSS будет применяться к полному SVG, а не к объекту SVG.

Вот и все!

IE11 поддерживает анимацию CSS3, но не дочерние узлы элемента SVG. Вы можете анимировать сам SVG-узел, поэтому мое решение состоит в разложении частей на отдельные SVG-файлы и анимации с помощью CSS3.

https://codepen.io/getsetbro/full/Bxeyaw/

Это даже будет работать, если IE11 находится в режиме совместимости, если вы добавите метатег

  
  • CSS: прежде чем на встроенном SVG
  • Рисуем SVG на canvasе HTML5 с поддержкой элемента font
  • Двойная изогнутая форма
  • Добавить текст / метку на ссылки в графе D3 force
  • Создание SVG из LaTeX (tikz)?
  • Форма треугольника с фоновым изображением
  • Прозрачная стрелка / треугольник с отступом
  • Преобразование SVG в PDF
  • Нужны ли параметры SVG, такие как «xmlns» и «версия»?
  • Как масштабировать SVG-изображение, чтобы заполнить окно браузера?
  • Круговой рисунок с дуговой дорожкой SVG
  • Interesting Posts

    Невозможно использовать раздел Bootcamp для установки Windows 8

    Как заменить строки, содержащие слэши с sed?

    Предотвратить отображение windows безопасности Windows

    GSON десериализует значение ключа для пользовательского объекта

    Почему Outlook продолжает перемещать электронные письма в обычную папку «Junk»?

    Как избежать вызовов os.system ()?

    как добавить файлы в процесс преобразования web.config?

    PL / SQL ORA-01422: точная выборка возвращает больше запрошенного количества строк

    Как установить matplotlib на OS X?

    Как обеспечить обратную связь по бета-версиям Windows?

    Оптимизация с помощью компилятора Java

    Расхождение между используемой памятью, сообщаемой диспетчером задач и памятью, используемой программами

    Есть ли способ ограничить maxdepth для ls -Rhal?

    Android – способ отображения текстового текста в TextView?

    Похоже, что Firefox и Safari на Mac не могут показать веб-страницу в полноэкранном режиме?

    Давайте будем гением компьютера.