Raphael JSで画像をマスクする

手軽にSVGを操作できるRaphael JSを利用して、画像をマスクするテスト。
マスクする形はベジェ曲線で自由な形にしたい。

fill と clip rect

Raphael JSで作成したオブジェクトに簡単に画像を表示させるのは「fill」で指定する方法。

でもこの方法だと背景画像がリピートしてしまって、今回やりたいことには合わない。
他の方法は画像にclip-rectで指定する方法。

でもこの方法だと矩形にしか切り抜けない。
ではどうするのかと、Raphael JSのドキュメントから探してみた。

Raphael JS ver2.1.2ではできないっぽい

うん、おしまい。ってのもアレなので、何か方法はないものかと検索しまくった。
結果、以下のサイトを見つけてSVGにはマスクの機能自体はあることがわかった。
（SVGについてはほとんど何の知識もなかったんだよね）

svg要素の基本的な使い方まとめ
10.画像の合成

じゃあなんとかなるんじゃねのって事で、ひたすら試す。
上記参考サイトを見ると、マスク対象にclip-path="url(<マスクのID>)"を付与してやればよさそう。
そんで、マスクはdefsってタグでくくればいいのかな。
でもdefsって何なのよと調べてみたら、非レンダリング要素で、外部からの参照用なんだって。よし、それを生成しよう。
でも今までRaphael JS頼みでSVG Elementの生成なんてしたことなかったから、また調べる。調べっぱなし。

おおにしあきらの日記
document.createElementNSの使い道

こちらの記事によると、「createElementNS」でできるのだそうな。
これを参考に、画像はRaphael JS、マスクは自力でという方法でやってみる。

何とか出来たけど、Raphael JSで実装してもらえれば嬉しい。そのうちやってくれるよね、きっと。

おまけ：動くマスクのサンプル

せっかく出来たから、もうちょっと進んでサインカーブでウニョウニョ動くマスクのサンプルを作ってみた。思ったよりは重くない印象。