Manul Tech

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


fill と clip rect

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

See the Pen Mask(1) by Satoru Tamura (@manulneko) on CodePen.12708

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

See the Pen Mask(2) by Satoru Tamura (@manulneko) on CodePen.12708

photo by Sander van der Wel

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

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

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


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


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

See the Pen Mask(3) by Satoru Tamura (@manulneko) on CodePen.12708

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

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

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

See the Pen Mask by Satoru Tamura (@manulneko) on CodePen.12708

ACOMMENT

  1. GLakeisha

    Your’s is a point of view where real ingellitence shines through.

    REPLY