コーディングチームツイートコーディングチームの平野です。IE8のサポートが正式に終了したこともあり、これからSVGを使用する頻度が増えてくると思います。個人的な勉強も兼ねて、CSSだけではSVGアニメーションが表示されないIEでの対応方法をご紹介します。setTimeout()requestAnimationFrame()のどちらかを使用して対応します。今回はrequestAnimationFrame()を用い、下記のようなラインアニメーション用のclassを作成しました。}}svgAnimation()がラインアニメーション実行部分になっており、frame毎にstroke-dashoffsetの値を0に近づけていく処理を書いています。補足として、line要素の場合、getTotalLength()では要素の長さが取得できないので、下記のように専用の関数を準備して長さを取得するようにしています。length;};上記のラインアニメーション用のclassを用い、入力した文字がラインアニメーションで表示されるようなアプリケーションを作ってみました。AnimationまとめCSSによるSVGラインアニメーションの実装に比べると作業量は増えてしまいますが、同じ原理を使っているので、stroke-dashoffsetstroke-dasharrayの使い方を知っていれば理解しやすい内容かと思います。基本的な原理を押さえて扱えておくと何かと活用できる場面があるかと思います。