css动画和动画方向在IE11中不工作 [英] css animation and animation-direction not working in IE11

问题描述

我想在SVG路径中显示动画虚线。
路径使用d3动态生成，动画可以在两个方向。它在所有浏览器中工作，除了IE。 小提琴链接
我的问题类似于 SVG动画不工作在IE 11 。

I am trying to show animated dashed lines in an SVG path. Path is generated dynamically using d3 and animation can be in both the directions. Its working in all browsers except in IE. Fiddle Link My issue is similar to SVG animation not Working on IE 11 . But I couldn't get the solution from there.

<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;
}

推荐答案

javascript magic！

Last resort is to use some javascript magic!

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>

这篇关于css动画和动画方向在IE11中不工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！