不工作于IE的SVG线动画

Question

我正在使用一个旋转木马，动画的笔画-达沙雷，但它不工作在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中，应用了达沙雷风格，但svg没有改变。

Answer 1

我已经以你为例，并把它放在I中，但它没有起作用。然后，我开始玩各种属性，看看如何才能达到你想要的效果。我唯一能以图形的方式对dasharray进行反映的方法是重置'd‘属性：elPath.setAttribute('d',elPath.getAttribute('d'));，它使dasharray显示按要求显示，但破坏了动画。出现更改的另一种方法是向dasharray添加第二个逗号分隔参数，如‘1008.58%’，但它也不会产生预期的效果。

我必须得出结论，Internet不能很好地处理一种价值冲突--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中不起作用，只有边缘(参见SVG animation is not working on IE11)。

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