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.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 находится в режиме совместимости, если вы добавите метатег