更新するコンテンツの画像が正方形・長方形以外の形のとき、どうコーディングしようか迷うことがありますね。
ただの円形なら CSS で丸める、背景が単色なら切り抜く部分を透明にした png や svg を画像の上に重ねるなどで対応できますが、どちらも難しい場合は SVG での切り抜きがおすすめです。
ただ、記述の仕方によって、IEで表示されなかったりスマホで拡大・縮小できなかったりと検証が面倒…。
そういったポイントを押さえ、全モダンブラウザで表示できる方法をご紹介します！
①イラストレーターで切り抜きたい形のパスから SVG を書き出し
普通に書き出ししたあと、 SVG ファイルをテキストエディタで開き、要らない記述は全部削除しておきましょう。
例えばこんな感じ。
1 2 3 4 5 6 7 8 9 10 11 12 13 | <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 300"> <defs> <style>.cls-1{fill:none;}</style> </defs> <title>circle1</title> <g id="レイヤー_2" data-name="レイヤー 2"> <g id="レイヤー_1-2" data-name="レイヤー 1"> <g id="circle1"> <path id="path" d="M275,～（略）～100.1Z"/> </g> </g> </g> </svg> |
↓いらない部分を削除↓
1 2 3 | <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 300"> <path d="M275,～（略）～100.1Z"/> </svg> |
必要なのはパス情報だけで、g タグ（ai データのグループから作られたもの）や style はほぼ不要。
②HTML に SVG タグを記述し、clipPath を作成
切り抜きに使用するパスを clipPath として用意します。
svg を img タグで読み込むのではなく、HTML に直書きです。
1 2 3 4 5 | <svg width="0" height="0" style="position: absolute; top: 0; left: 0;"> <clipPath id="clip01"> <path d="M275,～（略）～100.1Z"/> </clipPath> </svg> |
・この SVG 自体は非表示にしたいので、「width=”0″ height=”0″ style=”position: absolute; top: 0; left: 0;”」で消しています。
・切り抜きに使用する path（circle や polygon など図形によってタグは異なります）を clipPath というタグで囲い、任意の id を付けておきます。
③切り抜く画像に clipPath を適用
②で用意した clipPath（例では #clip01）を、切り抜きたい画像に適用させます。
1 2 3 | <svg width="300" height="300" viewBox="0 0 300 300"> <image xlink:href="（画像のパス）" width="100%" height="100%" preserveAspectRatio="xMidYMid slice" clip-path="url(#clip01)"/> </svg> |
・SVG タグの viewBox には①で作成した元々の SVG ファイルに書かれているサイズを指定します。
・width には viewBox 内の3つめの数字、height には viewBox 内の4つめの数字が入ります。
img タグに対して css（clip-path）でクリッピングする方法がありますが、IEで効きません。
そのため、svg の image というタグを使用しています。
画像を拡縮可能にするために、image タグに「width=”100%” height=”100%” preserveAspectRatio=”xMidYMid slice”」を指定します。
あとは、SP版になったら画面幅いっぱいに拡大・縮小する形にしたいので、CSS に下記を記載します。
普通の画像の場合と同じですね。
1 2 3 4 5 6 | @media screen and (max-width: 640px) { svg { width: 100%; height: auto; } } |
▼サンプルの全コードはこちら
1 2 3 4 5 6 7 8 9 10 11 | <!-- クリップパス用SVG --> <svg width="0" height="0" style="position: absolute; top: 0; left: 0;"> <clipPath id="clip01"> <path d="M275,100.1c-3.9-6-2.5-14.8-5.8-19.9S256.7,71.9,253.3,67s-3.3-14.9-7.2-19.5-13.2-5.2-18.5-8.8-8.3-11.7-15.1-14-19.3.5-29.6-1.3-18.2-8.7-28.1-9.2S135.5,20,126.1,21s-20.9-2.7-29.6.4-15.1,13.1-22,19.3c-4.3,3.9-12.9,4-17.3,8.5s-3.9,13-7.8,17.7S36.8,73,33.4,77.8,31.5,91.5,29,96.5s-11,10.6-11.5,15.7,4.3,12.4,3,19.2-8.3,10.9-9.4,17.2,4.2,12.9,3.8,19.1-6.2,12.8-5.3,18.8S18,196.7,21.1,202c1.4,2.4-1.9,8.5.2,11.8s8.6,2.3,10.5,5.3-1,9,1,11.8,8.9,1.9,11,4.3.6,9.8,2.8,11.6c6.4,5.5,16.1,5.5,21.6,9.5,7.1,5.1,10.3,14.2,16.2,17.3,7.6,4,16.6,1.1,23.5,2.9s13.5,8.9,21.5,9.8,15-4.7,23.4-3.8,18.3,6.3,28.5,4.4,16.5-9.9,25.7-13.3,20-2,28.2-6.8,12.6-15.1,19.6-21.3,18.1-9.6,23.2-17.3c3.8-5.8,1.4-16.7,3.7-27,1.7-7.9,8.9-15.9,9.6-25.2s-5.1-17.7-5.4-26.4,4.7-18.9,3.2-26.9C287.2,112.6,278.9,106.1,275,100.1Z"/> </clipPath> </svg> <!-- 実際の表示用SVG --> <svg width="300" height="300" viewBox="0 0 300 300"> <image xlink:href="（画像のパス）" width="100%" height="100%" preserveAspectRatio="xMidYMid slice" clip-path="url(#clip01)"/> </svg> |
川端
