こんにちは。まろCです。
今回は、SVGで画像をクリッピングマスクするときに、ほとんどのブラウザできれいに表示される方法をご紹介したいと思います。案件でこのデザインが上がってきたときに調べた情報を共有します。
SVGでクリッピングマスクとは
画像にsvgの図形の形で切り抜くイメージでこのようなブラウザ上で画像加工ができるものです。
この出来上がりを目指してコードを紹介します。
準備するもの
- 画像…すごくかっこいいゴリラの画像を使います！
- svg…今回はこの形で切り抜きます（わかりやすいように背景を黒くしています）
手順
HTMLソース
こちらになります！
See the Pen KrQoWY by maroc (@maroc) on CodePen.
処理のながれ
画像を読み込んだSVGタグと、クリップしたい図形のsvgをHTMLに記述します。ことのき、図形のほうはposition: absoluteとwidth,height: 0をあてて見えないようにしておきます。
そしてCSSのclip-pathで図形のidを指定すればOKです。
ポイント1： 画像をSVGで読み込むこと
imgタグにclip-pathを指定しても、wibkit系以外のブラウザではクリップが効きませんでした。ソースの様に画像もsvgタグで記述することで、多くのブラウザで表現できます。
ポイント2： 1ページに複数画像をクリップさせたい画像があるときはclipPathUnitsを記述
他のサイトでは1ページに一つといった汎用性の低い例ばかりで、記事リスト等でアイキャッチにクリップさせたいんだけどうまくいかずでした。svgタグにclipPathUnits="objectBoundingBox"属性を付与することで、１ページに画像が複数あっても、同じsvgを使いまわしてクリップすることができました。
CSSソース
.cliped, .cliped g {
clip-path: url(”#path”);
}ポイント1： ベンダープレフィクスは記述しない
clip-pathにベンダープレフィクスを当てるとwebkit系、つまりsafariでクリップが効きませんでした。
gulpでauto-pefixerを使っている方は要注意です。
ポイント2： クリップするクラスはsvgに付与する
画像の親要素であるsvgにclip-pathを当てることでうまくいきました。ただし、スマホではクリップされなかったので、svg要素の子要素であるgタグにも当てることでうまくいきました。
2つの要素にclip-pathを当てることでうまく行かなければ、mediaqueryで処理を分けましょう。
まとめ
この方法で、chrome,firefox,safari,ie11,ios,androidでクリップされている事を確認しました。
これで、ナナメにコンテンツがクリップされていても対応できますね！
それでは！
LIGはWebサイト制作を支援しています。ご興味のある方は事業ぺージをぜひご覧ください。
