SVGの注意ポイントと線を引くアニメーション

2015-01-26
SVG

どうも、もりさんです。
年が明けてからだいぶ経ってしましました。
今回は、実践で起きたSVGの注意ポイントをまとめてみたいと思います。

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で行っています）

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

別画面で見る