開発経緯
レスポンシブなSVGを使って写真を切り抜く
- SVGで切り抜くメリット
アイコンや平面形状はほぼSVGを使用しています。
ベクターなので、ピクトと違い使用サイズに制限されないのがいいですね。
せっかくなのでそのシルエットを生かして写真を切り抜いてみましょう。
ではその方法のご案内。
SVG画像のシルエットで
写真をマスキング
アイコンや平面形状はほぼSVGを使用しています。
ベクターなので、ピクトと違い使用サイズに制限されないのがいいですね。
せっかくなのでそのシルエットを生かして写真を切り抜いてみましょう。
ではその方法のご案内。
写真を切り抜く前にまずはシンプルなDIV要素を切り抜いてみます。
下記の様なDIV要素を準備します。クラス名はわかりやすい名前を。
COLOR
次に切り抜きたいSVGファイルを用意します。
今回はハートの形を用意。
切り抜きに使用するコードは<path ***></path>の部分だけです。
最初に作成したDIV要素を先ほど用意したSVGのPATHを使を使って切り抜きます。
使用するCSSプロパティはclip-pathで下記の様に設定し切り抜きます。
.clipping {
width: 288px;
height: 200px;
background: #6effbb;
overflow: hidden;
clip-path: path('M174.33,10.95c-32.37,16.74-48.13,12.~79.52Z');/*適当なsvgファイルのパス*/
}
下記の様になるはずです。
COLOR
それでは次は写真を切り抜いてみましょう。
下記の写真を切り抜きます。
写真を切り抜くためにはDIV要素の中に写真を入れればOK。例ではテキストと差し替えましたが、残してもいいです。

これでOK.ブラウザで見ると下記の様にSVG画像で切り抜かれた写真の完成です。
IMAGE
MDNの解説ページではIMG要素を直接CSSでクリッピングしています。
画像を直接クリッピングしているため、切り抜かれた残りの画像は見えないだけで残っています。
そのため意図しない余白ができることがあります。
上のサンプルの場合、下部に意図しない余白が発生しています。
このページで紹介しているプログラムやビジュアルなどご依頼いただければ実装を賜ります。
お問い合わせはこちら