CSS动画和动画方向在IE11中不起作用

debugcn 发表于 Dev

杰瑞

我正在尝试在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;
}

阿尔文·K。

不得已的方法是使用一些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>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。