質問: https://jsfiddle.net/ndm_/kx26mhjh/ SVGの円のアニメーションを色々試しているのですが、 chrome、ff、safariでは動くのですが、 IE全般で上手く動きません... 検証ツールで見てみると、アニメーションの処理自体は行われており、 CSSで設定しているstroke-widthなどのsvg属性が反映されていないようです。 (検証ツールでON/OFFしてみると反映されます) ここから詰まってまして... お心当たりのある方、アドバイスをいただければと思います。 よろしくお願いいたします。
回答: 調べてみました. 結果IE11では`circ`ノードにstyle要素, style属性経由で**静的に**`stroke-dashoffset`プロパティが設定されていた場合, **そのあとの値の変更が無視されてしまう**ようです. この場合, 初期化時にSnap.svg経由で後から`stroke-dashoffset`を(動的に)指定するようにすると上手く行くようです. ``` .circ { fill: rgba(255, 255, 255, 0); stroke-width: 20px; stroke-linecap: round; stroke-dasharray: 1509 1511; -stroke-dashoffset: 1510;/*無効化*/ } ``` ``` var circ = Snap('#circ'), speed = 1000, easing = mina.bounce; circ.attr("strokeDashoffset","1510");//scriptから設定する $('#trigger li').on('click', function() { var i = $('#trigger li').index(this); //以下省略 ``` 動作例