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

У меня действительно простая анимация загрузки, которая отлично работает на 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.

ОТВЕТЫ

Ответ 1

Только Microsoft Edge будет поддерживать переходы и анимацию CSS SVG, особенно stroke-dasharray.

Пожалуйста, ознакомьтесь с документами Microsoft для разработчиков:

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

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

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

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

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

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

https://greensock.com/drawSVG

Ответ 2

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

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

Ответ 3

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

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

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

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

Ответ 4

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

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

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

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

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

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

Script:

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.

И что это!