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

Question

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

Вот полный пример: пример JSFiddle

SVG:

<svg class="circular-loader" viewBox="25 25 50 50">
  <circle class="loader-path" cx="50" cy="50" r="20" fill="none" stroke-width="2" stroke-miterlimit="10"/>
</svg>

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

Любая идея?

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

Answer 1

Только 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 так что это больше тире. Поскольку IE11 и ниже не поддерживают анимацию SVG stroke-dasharray а также stroke-dashoffset с CSS-анимацией или переходами, если это не Microsoft Edge build 10240+.

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

https://greensock.com/drawSVG

Answer 2

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

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

Answer 3

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

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

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

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

Answer 4

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

У меня был полный 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 = '<svg id="'+id+'" '+svgattrs+'>'+item.html()+'</svg>';
        item.remove();
        $(svgcontent).prepend(html);        
    });
}

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

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

И это все!