こんにちは、かずです。
タイトルの通り、SVGで自由な形で切り抜き（マスク）を行う方法をご紹介します。
というのも、もちろんGoogle先生に聞けばすぐに出てはきます。
ただ、レスポンシブ対応も含めるとちょっと時間がかかってしまうので備忘録かねてです。
切り抜くSVGと画像を用意します。
というわけでうちの猫ちゃんにも協力してもらいます。
でーん
切り抜くsvgはこちら。
コードは以下。
SVGを整える
レスポンシブに対応するため、先程のsvgのコードを整えます。
<svg viewBox=”0 0 636 512″ style=”width:0;height0;”>
<clipPath id=”mask” clipPathUnits=”objectBoundingBox” style=”transform: scale(calc(1/636), calc(1/512));”>
<path d=”M208.927,30.043C276.151-10.9,363.2-8.4,442.548,27.84c81.341,37.147,141.467,110.248,174.091,163.825,36.752,60.362,18.843,110.937-35.575,165.473-41.007,41.091-92.28,88.328-150.784,123.953-64.861,39.493-147.614,34.768-220.218,18.658C130.286,482.058,52.948,445.011,19.206,389.593-16.008,331.77-.032,247.125,44.64,174.924,81.746,114.966,147.161,67.653,208.927,30.043″ transform=”translate(0 0)”>
</clipPath>
</svg>
ポイントは以下。
・2行目、4行目を追記
・2行目のtransformは「1/幅」と「1/高さ」をしています
CSSを記述
切り抜きたいimg要素に対して、以下のように「clip-path」を記述します。
img{
clip-path: url(#mask);
}結果
ででーん！
これでレスポンシブに対応した切り抜きの完成です！
おわり！
それでは。
JOURNALが気に入ったら「いいね」してね！
<svg xmlns=”http://www.w3.org/2000/svg” xmlns:xlink=”http://www.w3.org/1999/xlink” width=”636″ height=”512″ viewBox=”0 0 635.927 511.607″>
<path d=”M208.927,30.043C276.151-10.9,363.2-8.4,442.548,27.84c81.341,37.147,141.467,110.248,174.091,163.825,36.752,60.362,18.843,110.937-35.575,165.473-41.007,41.091-92.28,88.328-150.784,123.953-64.861,39.493-147.614,34.768-220.218,18.658C130.286,482.058,52.948,445.011,19.206,389.593-16.008,331.77-.032,247.125,44.64,174.924,81.746,114.966,147.161,67.653,208.927,30.043″ transform=”translate(0 0)” fill=”#ccc”/>
</svg>