今日も早速、表題について解説。SVGでテキストなどを書き出して、線画から塗りといったアニメーションをウェブサイトで実装するのが一時期流行りましたよね。最近になって過去に自分が起こした記事で上記のアニメーションがIEのみ表示されてない、という事態が発覚し、その対応策を講じるにあたって意外と時間を要したので、ここであたらめて説明しておきたいと思います。CSSアニメーションだけで動かしていたもともとSVGで起こしたファイル(SVGのソース)を、WPの固定ページ部分にそのまま貼り付けて、SVGにクラスを付与してそれをCSSに下記のようなソースを記述して動かしていました。}}IE以外では問題なく動いていたんですが、IEだけ動かない。アニメーション要素である「keyframes」をIEに対応させるためにごにゃごにゃ調べてみたけどうまくいかなかったんです。結局頼ることにしたのがこれ笑Vivus.jsでIEでも動かなかったSVGアニメーションを動かそう!使い方もめちゃくちゃ簡単です。header部分にVivus.jsを組み込みます。CDNもあるのでそのまま引っ張ってくることも可能です。用意しておいたSVGファイルのSVGタグにidを適当に付与します。...></g></svg>あとはCSSでもろもろ調整。0;}ここまでくればあとはJSを記述するだけです!footer付近にかかないと私の場合はうまく動きませんでした。</script>同じようにIEだけ動かない!と行き詰った方の参考になればいいなと思います。コメントをキャンセルメールアドレスが公開されることはありません。*サイト次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。codedesignblog。