SHIDEN DESIGN BLOG

thumnail_20170401

SVGのmaskとDrawSVGを使って、ブラシや筆で書き殴るようにテキストを表示する方法

SponsorLink

最近ちょこちょこ見かける様になった、キャチコピーや見出しをブラシや筆で書き殴るように表示させるアレです。
 

 
何をやっているかと言うと、SVGのmaskを使ってstroke-widthを太く設定したpathで文字を書いた画像の文字の部分を隠した後、そのpathを動かして文字を書いてる風に見せているだけです。
 
pathを動かす方法として、CSS3のstroke-dasharrayとstroke-dashoffseを使用してもいいのかもしれませんが、IEに対応していないのでSVGアニメーション系のjQueryプラグインとして有名な、DrawSVGを使用する事にしました。
 
先にillustratorで画像を配置してSVGファイルを作ると後の作業が楽になるんで、その方法とあわせて紹介しようと思います。
 

 

画像を用意する

 
先ずは、表示させたい文字の画像を用意します。
ブラシで書いたような、少しかすれた感じの手書き風フォントを探すか、もしくは自分で書いてPhotoshop等でPNG形式の画像を作成します。
 
この時、実際にサイトで表示させたいBOXのサイズをキャンバスのサイズに設定してください。
また、多少の余白を持たせていた方が、後の作業がやりやすくなります。
 
今回のサンプルでは「Dreamers Brush」と言うフォントを使用しました。
 

 

SVGファイルを用意する

 
illustratorを起動し、キャンバスのサイズを画像と同じ大きさで設定します。
上記で作成した画像を配置し、画像を配置したレイヤーをロックした後、新規レイヤーを作成します。
img_0217040101
 
 
作成したレイヤーに、ペンツールで画像の文字の中心にパスを作成していきます。
DrawSVGでは、ここで作成したパスの順に処理されるので、書き順が気になる場合は、書き順通りに作業していきます。
img_0217040102
 
 
見やすいように、緑色ししていますが、いろは何色でもかまいません。
パスの作成が済んだら、文字が隠れるように線の太さや位置を調節していきます。
img_0217040103
 
 
SVGで保存して準備は終わりです。
 

SVGのmaskでマスキングする

 
SVGファイルをブラウザで開き、ソースを表示します。
画像へのリンクも済んでいます。
パスは画像のあるディレクトリに合わせて変更してください。

 
 
要らないタグやクラスを消して、必要なタグを追加していきます。
 
pathのスタイルは、個別に調整できるようにしたいのでstyleタグは消して、pathにstyleタグの中身を当てていきます。

 
 
次に、pathをmaskタグで囲み委任のidを付けます。
clipPathと似ていますが、clipPathは背景の切り抜きで、maskは背景のマスキングです。
photoshopやillustratorのクリッピングパスとレイヤーマスクを想像してみると、違いが解かりやすいかと思います。
 

 
 
画像をgタグで囲みmaskのidを指定します。
gタグはdivタグみたいなモノだと考えてください。

 
 
これでSVGの編集は完了です。
全てまとめると、以下のようになっているかと思います。

 
 

DrawSVGの設定

 
マスキングしたpathをDorawSVGを使用して動かしていきます。
複数のSVGを用意している場合は、変数名を委任の変数名に変え、SVGタグではなくidを指定してください。

 
 
これだけです。
 
durationはアニメーションにかかる時間をミリ秒(1000=1秒)で設定します。
好みで設定してください。
 
easingもイージングのプラグインを別途読み込む事で、豊富な設定が可能なようです。
今回のサンプルではlinearで特に問題なかったんでプラグインは使用していません。
 
ブラウザで動作を確認して上手くマスクをがかかっていないところは、SVGのstroke-widthをいじって調節してください。
 
 

 
 

最後に

 
この記事では文字を書いてる風にとしましたが、文字じゃなくても色々と応用が効くと思います。
 
 

SponsorLink

Related Articles