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ではdasharrayスタイルが適用されますが、svgは変更されません。

Answer 1

私はあなたの例をとり、それをInternet Explorerに置き、動作しませんでした。それから、私はあなたが望む効果を得るために、さまざまなプロパティを使い始めました。私がdasharrayの変更をグラフィカルに反映させる唯一の方法は、 'd'属性をリセットすることです：elPath.setAttribute('d',elPath.getAttribute('d'));これはdasharrayを必要に応じて表示しましたが、アニメーションを破壊しました。変更を表示するもう1つの方法は、 '1008.58,100％'のように、dasharrayに2番目のコンマ区切りパラメータを追加することですが、目的の効果も作成されません。

私は、Internet Explorerが1つの値ストロークダッシュアレイをうまく扱っていないと結論づけなければなりません。おそらく別の解決方法を探すべきです。

私は実際にそれではなく、このようなパスの円で働かせた：

<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、エッジのみでは動作しません（SVG animation is not working on IE11を参照）

コードを更新し、ここCodePenでそれを保存：http://codepen.io/anon/pen/wGPwYq