javascript - SVG 线条动画在 IE 中不起作用

Question

我正在使用为 stroke-dasharray 设置动画的旋转木马，但它在 IE 中不起作用。

我的 SVG:

 <svg class="facts__svgs" viewBox="-10 -10 220 220" data-facts-stoke-svg="">
 <path d="M200,100 C200,44.771525 155.228475,0 100,0 C44.771525,0 0,44.771525 0,100 C0,155.228475 44.771525,200 100,200 C155.228475,200 200,155.228475 200,100 Z" stroke-dashoffset="651"></path>
 </svg>

我的改变笔画的JS:

function calculateDashArray(percentage) {
    return (dashOffset * 2) - (segmentOfDashOffset * percentage) - 20;
}

function animateFactsSVG(percentage) {
    elPath.style.strokeDasharray = calculateDashArray(percentage);
}

在除 IE 之外的所有程序中都有效。在 IE 中，应用了 dasharray 样式，但 svg 没有改变。

Answer 1

我已将您的示例放入 Internet Explorer 中，但没有成功。然后我开始尝试各种属性，看看如何才能达到您想要的效果。我可以使 dasharray 中的更改以图形方式反射(reflect)的唯一方法是重置“d”属性:elPath.setAttribute('d',elPath.getAttribute('d')); 这使得dasharray 按要求显示，但破坏了动画。使更改出现的另一种方法是向 dasharray 添加第二个逗号分隔的参数，例如“1008.58,100%”，但它也不会产生预期的效果。

我不得不得出结论，Internet Explorer 不能很好地处理一个值 stroke-dasharray，您可能应该寻找另一种解决方案。

我实际上是用一个圆而不是像这样的路径让它工作:

<svg xmlns="http://www.w3.org/2000/svg" style="width:100%;height:100%" >
    <circle cx="100" cy="100" r="100" stroke="green" stroke-width="1" fill="none" style="stroke-dasharray:228,628;transition: all .6s ease;"  ></circle>
</svg>
<script>
    var el=document.getElementsByTagName('circle')[0];
    var circumference=2*Math.PI*(+el.getAttribute('r'));
    function animatePercentage(per) {
       el.style.strokeDasharray=(per/100*circumference)+','+((1-per/100)*circumference);
    }
    setInterval(function() {
        animatePercentage(70);
    },2000);
</script>

虽然没有动画。该值会在 IE 上立即更改。显然这在 Internet Explorer 中不起作用，仅在 Edge 中起作用(参见 SVG animation is not working on IE11 )

更新代码并将其保存在此处的 CodePen 中:http://codepen.io/anon/pen/wGPwYq