addClassで、SVGタグにクラスを付与できない

例えば、ユーザー操作のタイミングで、SVGアニメーションをしたいと考えます。
そこで、CSSのtransitionでアニメーションを設定しておいて、イベントのときにClassを付与することにします。

しかし、<svg>タグに、jQueryのaddClassでClassを付けようとしても上手くいきません
removeClassやhasClassなども同様です。
attrやsetAttributeを使えば、設定はできます。

ただ、このまま使用してしまうと、すでに設定されたClassを上書きしてしまうので、工夫が必要になります。
こんな感じでしょうか。

ちょっと面倒ですね…。

スプライトSVGに気をつけよう

スプライトSVGを使用すると、同じ図形でも、個別に色を変えたり、使いまわすことができて便利ですが、注意も必要です。

その色や線の太さといったスタイルを変更しようとするとき、元の図形にスタイルの値があると変更できません
illustratorなどでSVGを作成することが多いと思いますが、塗りのスタイルがあるので、あとで修正しなくてはなりません。

また、図形が複数の部品で構成されている場合、その部品を変更することも、その部品にアクセスすることもできません

線を引くアニメーション

最後に線を引くアニメーションをやってみましょう。
stroke-dasharrayという属性を線の長さと同じに設定し、stroke-dashoffsetを少しずつ減らすと、描かれているように見えます。
このやり方であれば、簡単にできます。
(CSSだけでもできますが、今回はJavaScriptで行っています)

ツクメモのロゴをアニメーションさせてみます。

別画面で見る

奥が深いSVG

レスポンシブやRetinaディスプレイなど、マルチデバイスで多様化しているWebですが、積極的にSVGを使用することで、ある程度フォローできそうです。

SVGの仕様には奥深いものがあり、ブラウザの実装にも差があります。

ライブラリに頼るとしても、基本的なことは知っておきたいですね。
私も、分からないことが多いですが、取り組んでいきたいです。

そんじゃーねー。