Анимация пути в Internet Explorer

Есть ли возможность «Fly-In» svgpath в IE 11?

Нравиться

@keyframes fadeInP {
    from
    {
        stroke-dashoffset:1000;
    }
  to {
    stroke-dashoffset: 0;
  }
}
.animate
{
 animation: fadeInP 10s linear infinite;
}

За

<svg  xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 400 400">
 <path stroke-width='8' class = "animate" fill='none' stroke="#ffffff" d="M 0,0 C 100,10 200,80 300,15 " />
</svg>

Это работает в FF, но не могу найти решение в Интернете, чтобы сделать что-то подобное в IE.

заранее спасибо


html css internet-explorer svg-animate
person RandomDude    schedule 23.07.2014    source источник

Ответы (1)


arrow_upward
22
arrow_downward

К сожалению, я считаю, что единственным решением является использование JS и обновление смещения для каждого кадра.

Анимация SVG с помощью CSS не работает в IE, равно как и анимация SMIL.

демонстрация

JS:

var p = document.querySelector('.animate'), 
    offset = 1000;

var offsetMe = function() {
  if(offset < 0) offset = 1000;
  p.style.strokeDashoffset = offset;
  offset--;
  
  requestAnimationFrame(offsetMe);
}

offsetMe();

Обновление от 26 января 2015 г.: команда IE работает над этим.

Обновление №2 Edge теперь поддерживает это, но только с единицами (то есть stroke-dashoffset: 1000; не будет работать, а stroke-dashoffset: 1000px; будет).

person Ana    schedule 23.07.2014
comment
+1 Замечательное решение. Спасибо, что поделился. Я согласен с ТО, что это очень сложно нагуглить. Это первое простое и работающее решение для IE, которое я видел в Интернете. - person BudBrot; 24.07.2014
comment
@BudBrot Я отправил вопрос об этом github.com/InternetExplorer/Status.IE/ вопросы/117 - person Ana; 24.07.2014
comment
На (веб-сайте разработчиков Майкрософт)[developer.microsoft. com/en-us/microsoft-edge/platform/status/ написано, что он поддерживается начиная с сборки 10240. Вы знаете, что это за версия Edge? Или он поддерживается для всех версий Edge? - person Gust van de Wal; 13.10.2017