svg アニメーション（１）ー CSSによるアニメーション
こんにちは、コモノの山本です。
たまに海外のサイトなんかで、手書き文字が書かれていくようなアニメーションがあるかと思いますが、svgとcssを使うと、わりと簡単に実装出来てしまうのはみなさんご存知でしたでしょうか？
svgは拡大縮小に耐えられる画像の表示方法として、最近結構取り入れているサイトも増えてきていますが、なんといってもcssやjsを使って色々なエフェクトを取り入れることができるのが、svgのおもしろいところかと思います。
svgで手書き文字が書かれるエフェクトを作るのは、大雑把に言えばたったの４ステップです！
まず最初に概要を説明してしまいますと、太さが一定の文字の場合であれば、svgのプロパティであるstroke-dasharrayとstroke-dashoffsetを使って、cssのanimationを適用することで簡単に線が描かれていくアニメーションが実装できることは結構みなさんご存知なのではないかと思いますが、今回ご紹介する方法は、一定の太さで描かれる線にsvgのclipPathを適用して輪郭をつけてしまうという合わせ技になります。それでは、以下で順番にご紹介しますね。
1. 手書き文字のアウトラインを作成する
まずは、イラストレーターを使って、手書き文字の輪郭を作成します。今回は第一弾ですし、慣例にしたがって（？）、「Hello World!」で行きたいと思います。（※ FontはGoogle FontsのPacifico Regularをつかいました使いました）
手書き文字のデザインを決めたら、全体をアウトライン化し、パスファインダーで合体させて最後に全体を複合パス化してください。また、svgで書き出す際にidとなるので、レイヤーにはわかりやすい名前をつけておいてください。さらに、可能な場合はオブジェクトメニューからパスの単純化をある程度適用してアンカーポイントを減らしてあげると、生成されるインラインのsvgのコードの長さが少し短くなります。
2. 手書き文字のストロークを作成する
手書き文字の輪郭ができたら今度は、パスツール等を駆使して、別レイヤーに文字のストローク部分を作成します。この時もレイヤー名は書き出したときにわかりやすいような名前をつけてください。ここでのポイントは、輪郭の一番太い部分に合わせた太さのパスで、輪郭の内側が綺麗に塗りつぶされるようにすることと、文が分かれていたり、複数行になっている場合もストロークをつなげてしまうことです。
ストロークが分かれている場合は、cssのアニメーションを適用したとき複数のパスの先頭から同時にアニメーションが適用されるので順番に書かれるようにする場合は、パスを繋げてしまってください。
3. svgコードを出力して、ストロークにclipPathを適用する
ここまでできたら、今度はイラストレーターの「別名で保存メニュー」からsvgを選択して、保存の画面に進み、保存ウィンドウ下部の「svgコード…」をクリックすると、別画面でsvgコードが表示されるのでこのなかのの部分をコピーして表示させたい箇所に貼り付けてください。
ここからが少しだけややこしいかもしれませんが、svgとして出力されたコードを利用して、文字の輪郭を切り抜くためのclipPathを定義します。
clipPathの定義方法は、まず、の直後に、clipPathと書き換えるか全体を
これでclipPathの定義はできましたので、次にストロークにclipPathを適用します。clipPathを適用するときは、適用したい対象のオブジェクトやグループのタグにclip-path="url(#クリップパスのid)"を指定してあげればOKです。（※clipPathではなくclip-pathなので注意！）
ここまでできればストローク部分が輪郭で切り抜かれているのがブラウザでも確認できるはずです。
4. cssでアニメーションを実装する
ここまできたらもう簡単、あとはcssでアニメーションをつけて上げるだけです。
svgでパスが描かれていくように見せるアニメーションは、先述のstroke-dasharrayと、stroke-dashoffsetというプロパティを使います。
まず、stroke-dasharray。これは指定したsvgのパスを破線にするというものなのですが、ここに、ストロークの長さを超える値の破線を指定することもできます。これに、stroke-dashoffsetを使って、破線の開始位置をストロークの長さ分ずらしてあげることで、最初、破線の空白部分が表示された状態にし、stroke-dashoffsetの値をアニメーションさせると、線が描かれて行くかのように見せることができます。
See the Pen SVG Handwrite-Text by Shinji Yamamoto (@commono_yamamoto) on CodePen.
※アニメーションが表示されていない場合は「RESULT」ボタンを押してください。
線が交差する部分などはパスを調整してあげるか太さを変えたストロークを分けて別々にアニメーションさせるともっときれいに見せられるとは思いますが、今回はここまで！
javascriptやjQuery等と組み合わせると、もっと色々できると思いますのでもし機会があれば試してみてくださいね！
※ 追記
その後、検証でこの方法はieには対応していないことがわかりました。。
ieにも対応したjQueryをつかった実装について続編がありますので、
こちらもごらんいただけますと嬉しいです！
→ svgアニメーション（2）— setIntervalを使ったアニメーション
