#コーディング
Clip pathを使って好きな形に画像をくり抜く！！
コーダーのKです。
CSSでは実現が難しいような形に画像をトリミングしたい！という時あるのではないでしょうか。
今回はSVG素材を利用して、用意した図形の形に画像をくり抜く方法をご紹介していきたいと思います。
使用する図形と指定方法
今回はこちらのサイトで適当に図形を生成します。
https://passionhacks.com/blob-maker/?n=1&e=6&gw=6&se=90&c=d1d8e0&o=0
このような図形を作成しました。
こちらのSVGコードを取得すると以下のようになっていました。
|
1 2 3 4 5 |
<svg viewBox="0 0 800 500" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" id="blobSvg"> <g transform="translate(145.14223098754883, 7.19403076171875)"> <path class="blob" d="M464.5,281Q440,312,428.5,342Q417,372,403,406.5Q389,441,354.5,453.5Q320,466,285,475.5Q250,485,217.5,467.5Q185,450,147.5,446Q110,442,86.5,414Q63,386,53.5,351.5Q44,317,31,283.5Q18,250,27,215Q36,180,53.5,150Q71,120,94.5,94.5Q118,69,146,42Q174,15,212,13Q250,11,286.5,17.5Q323,24,346,55.5Q369,87,405.5,98.5Q442,110,457,144Q472,178,480.5,214Q489,250,464.5,281Z" fill="#fd79a8"></path> </g> </svg> |
今回必要なのは<path>のみなので、他の情報は削除して以下のようにします。
（イラストレーターなどで作成した素材の場合も同様になります）
|
1 2 3 |
<svg viewBox="0 0 800 500" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" id="blobSvg"> <path class="blob" d="M464.5,281Q440,312,428.5,342Q417,372,403,406.5Q389,441,354.5,453.5Q320,466,285,475.5Q250,485,217.5,467.5Q185,450,147.5,446Q110,442,86.5,414Q63,386,53.5,351.5Q44,317,31,283.5Q18,250,27,215Q36,180,53.5,150Q71,120,94.5,94.5Q118,69,146,42Q174,15,212,13Q250,11,286.5,17.5Q323,24,346,55.5Q369,87,405.5,98.5Q442,110,457,144Q472,178,480.5,214Q489,250,464.5,281Z" fill="#fd79a8"></path> </svg> |
この型をベースに画像を切り抜くため<clipPath>でパスを囲み、画像に指定するための任意のidを指定します。
今回は”clip”で指定しました。
|
1 2 3 4 5 |
<svg viewBox="0 0 800 500" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" id="blobSvg"> <clipPath id="clip"> <path class="blob" d="M464.5,281Q440,312,428.5,342Q417,372,403,406.5Q389,441,354.5,453.5Q320,466,285,475.5Q250,485,217.5,467.5Q185,450,147.5,446Q110,442,86.5,414Q63,386,53.5,351.5Q44,317,31,283.5Q18,250,27,215Q36,180,53.5,150Q71,120,94.5,94.5Q118,69,146,42Q174,15,212,13Q250,11,286.5,17.5Q323,24,346,55.5Q369,87,405.5,98.5Q442,110,457,144Q472,178,480.5,214Q489,250,464.5,281Z" fill="#fd79a8"></path> </clipPath> </svg> |
また上記のコードはHTMLにインラインで記載する必要があり、そのままだと切り抜きたい型がサイトに表示されてしまうので、
今回は別途、
|
1 |
width="0" height="0" style="position: absolute; top: 0; left: 0;" |
を追加して型を見えなくします。以下のようになります。
|
1 2 3 4 5 |
<svg viewBox="0 0 800 500" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" id="blobSvg" width="0" height="0" style="position: absolute; top: 0; left: 0;"> <clipPath id="clip" transform=""> <path class="blob" d="M464.5,281Q440,312,428.5,342Q417,372,403,406.5Q389,441,354.5,453.5Q320,466,285,475.5Q250,485,217.5,467.5Q185,450,147.5,446Q110,442,86.5,414Q63,386,53.5,351.5Q44,317,31,283.5Q18,250,27,215Q36,180,53.5,150Q71,120,94.5,94.5Q118,69,146,42Q174,15,212,13Q250,11,286.5,17.5Q323,24,346,55.5Q369,87,405.5,98.5Q442,110,457,144Q472,178,480.5,214Q489,250,464.5,281Z" fill="#fd79a8"></path> </clipPath> </svg> |
次に適当なダミー画像を追加し、画像にCSSで
|
1 |
clip-path: url(#clip); |
を指定すると用意した型に沿って画像が切り抜かれます。
しかし、CSSでclip-pathを指定する方法だとIEで効かず、切り抜きがされません。
そちらは以下のように<svg>タグの中の<image>タグで画像を指定する方法で解消されます。
|
1 2 3 |
<svg width="800" height="500" viewBox="0 0 800 500" class=""> <image xlink:href="[画像のパス]" width="100%" height="100%" clip-path="url(#clip)" /> </svg> |
以上、ご紹介した点を踏まえて表示画像を切り抜いてみますと、以下のようになります。
See the Pen
Untitled by SPC-KentaKawase (@SPC-KentaKawase)
on CodePen.
好きな図形を型に画像を切り抜けるclip-path、ぜひ使ってみてはいかがでしょうか。
CATEGORY
TAG
htaccess
補助金
助成金
Webブラウザ
キックオフミーティング
サブディレクトリ
サブドメイン
SSL化
広告審査
TikTok広告
審査落ち
広告ポリシー
CMS
Webサイト制作
プラグイン
ECサイト制作
採用活動
ツール
Google広告
SNS広告
Web広告
セキュリティ
XD
SNS運用
アニメーション
採用サイト
Webデザイナー
Webディレクター
SEO対策
ドメイン
Instagram
YouTube
ECサイト
Wordpress
Webディレクション
Googleアナリティクス
EFO
LPO
Facebook
リスティング広告
コンテンツSEO
Ｗebマーケティング
ライティング
Webデザイン
Photoshop
GoogleAnalytics
アクセス解析
