SVGを使ったクリッピングマスク

SVGを利用して画像をいろいろな形でクリッピングマスクをする方法を紹介します。今回は「clipPath」というタグを使ってCSSと組み合わせてマスクをする方法を見ていきます。

テキストを使ってマスクをする方法

SVGを使えば、テキストベースで画像をマスクすることができます。「text」というタグを使うことで、テキストの形でマスクをかけることができます。

<img src="photo.jpg" class="text-mask" />
<svg>
<clipPath id="svgTextPath">
<text x="50" y="200">Flower</text>
</clipPath>
</svg>

まず、マスクをかけたい画像を配置します。次にテキストを配置します。SVGでテキストを描画するには、textタグを使って描画します。xやyといった属性はテキストをどの位置に配置するかの座標になります。そして、テキストをclipPathタグで囲みます。idはCSS側で読み込む際に使用するので、好きなid名をつけておきます。

今度は、CSS側でマスクを制御していきます。

.text-mask {
  clip-path: url(#svgTextPath);
}

上記のように、「clip-path」というプロパティを使ってSVG側でつけたidを読み込ませて、画像に適用させてあげればクリッピングマスクの完成です。

好きな形でマスクをする方法

パスを使えば、好きな形でマスクをかけることもできます。星形でマスクをした例を見ていきます。

<img src="photo.jpg" class="star-mask" />
<svg>
<clipPath id="svgStarPath">
<polygon fill="none" points="94.765,38.792 123.765,97.552 188.609,106.974 141.688,152.712 152.765,217.295 94.765,186.803 36.766,217.295 47.842,152.712 0.92,106.974 65.765,97.552 "/>
</clipPath>
</svg>

やり方はテキストのときと同じで、textタグの代わりにpolygonタグを使っているだけです。星形は多角形なのでpolygonタグで描画しています。この部分は描画する形で「path」や「circle」などの使用するタグが変わります。
あとは、同じようにCSSで指定をすれば完成です。