CSS анимация и анимация не работают в IE11

Я пытаюсь показать анимированные пунктирные линии в пути SVG. Путь генерируется динамически с использованием d3, и анимация может быть в обоих направлениях. Работает во всех браузерах, кроме IE. Скриптовая ссылка Моя проблема похожа на анимацию SVG, которая не работает в IE11. Но я не мог получить решение оттуда.

<path id="pathOriginal" class="animation" style="animation-direction:reverse" d="M535,73C33.75,73 33.75,-20 -467.5,-20" stroke="red" stroke-width="1.5px" fill="none">


    @keyframes dash {
    from {
        stroke-dashoffset: 1000;
    }
    to {
        stroke-dashoffset: 0;
    }
    }
@-webkit-keyframes dash {
    from {
        stroke-dashoffset: 1000;
    }
    to {
        stroke-dashoffset: 0;
    }
}
.animation {
    stroke-dasharray: 4;
    stroke-dashoffset: 4;
    animation: dash 50s linear infinite;
    -webkit-animation: dash 2s linear infinite;
}
Источник

2 ответа

Решение

В крайнем случае - использовать магию JavaScript!

var myPath = document.getElementById('pathOriginal');

var i = 1000;
var intervalID = window.setInterval(myCallback, 20);

function myCallback() {
  // Your code here
  if (i == 0) { i = 1000}
  myPath.setAttribute('stroke-dashoffset', i);
  --i;
}
<svg width="500" height="500" id="svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">

<g transform="translate(200,200)">
<path id="pathOriginal" class="animation" style="animation-direction:reverse" d="M535,73C33.75,73 33.75,-20 -467.5,-20" stroke="red" stroke-width="1.5px" fill="none" stroke-dasharray="4">
</path>
</g>
</svg>

Источник

IE не поддерживает CSS анимацию на всех элементах SVG. Вы должны изменить встроенные атрибуты элементов SVG

Источник
Другие вопросы по тегам