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

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

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

$('#svg').attr('class','className');
document.getElementById('svg').setAttribute('class','className');

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

$('svg').attr('class', function(index,className){
    var setClassName = 'newClassName';
    if (className !== undefined){
        var classNameArray = className.split(' ');
        for (var i = 0; i < classNameArray.length; i+=1){
            if (classNameArray[i] === setClassName){
                return;
            }
        }
        return className + ' ' + setClassName;
    }
});

ちょっと面倒ですね…。

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

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

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

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

線を引くアニメーション

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

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

別画面で見る

奥が深いSVG

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

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

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

そんじゃーねー。