UPDATE：2024.7.3
- CATEGORY
【CSS】SVGで画像を切り抜いていく！
Contents
タイトルの通り、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>
ポイントは以下。
・viewBoxを残し、svg自体は見えなくするため「width:0;height0;」を記述
・2行目、4行目を追記
・2行目のtransformは「1/幅」と「1/高さ」をしています
・2行目、4行目を追記
・2行目のtransformは「1/幅」と「1/高さ」をしています
CSSを記述
切り抜きたいimg要素に対して、以下のように「clip-path」を記述します。img{
clip-path: url(#mask);
}結果
ででーん！
これでレスポンシブに対応した切り抜きの完成です！
おわり！
それでは。
<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>