Question

我试图在SVG路径中显示动画虚线。使用d3动态生成路径，并且动画可以在两个方向上。它在除IE之外的所有浏览器中工作。 Fiddle Link 我的问题类似于SVG animation is not working on 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;
}

Answer 1

最后的手段是使用一些javascript魔法！

list()

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

Answer 2

IE不支持所有SVG元素的CSS动画。你必须修改SVG元素的内联属性

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

2 个答案: