レスポンシブ対応をしながら、Clippathでsvgを使ってクリッピング!

Advertisements

clippathとは、指定をした特定の形に切り抜くためのCSSプロパティです。
svgのパスデータなどを使うことができ、クリッピングをすると、切り抜いた外側は表示されません。
改めて理解を深めたかったので、レスポンシブ対応の仕方も含めて、clippathについての使い方をまとめてみました。

  1. clippathの基本の使い方
  2. clip-sourceの利用
  3. レスポンシブ対応をする!
  4. clippathのジェネレーター
  5. ブラウザのサポート状況は?
  6. まとめ

1 clippathの基本の使い方

切り抜きたい画像にたいして、clippath:〇〇;でパスの形を指定します。
例えば、下記のような書き方です。


<p class="sample"><img class="clip-me" src="A.png" alt=""></p>

img{
width:100%;
height:auto;
object-fit:cover;
}
.sample{
width:150px;
height:150px;
}
.clip-me{
clip-path: circle(50% at center); 
}

基本的な形の指定

切り抜くための基本的な形は、以下のような指定ができます。

inset()

inset( Top Right left Bottom (round 〇〇 );
内側へオフセットします。roundを追加すると、角丸指定になります
clip-path: inset(10px 20px 10px 20px round 5px);

circle()

circle(円の半径  at 位置);
円形の指定になります。
clip-path: circle(50px at center);
clip-path: circle(50% at 50% 50%);

ellipse()

ellipse(横方向 縦方向 at 位置);
楕円形の指定になります。
clip-path: ellipse(50% 35% at 50% 50%);

polygon()

polygon( x1 y1,x2 y2, …);
多角形の指定になります。それぞれ、角になる点の位置をx,yで示します。
clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%);

path()

任意のパスの指定になります。
clip-path: path(‘M 10,30 A 20,20 0,0,1 50,30 A 20,20 0,0,1 90,30 Q 90,60 50,90 Q 10,60 10,30 z’); 

Advertisements

2 clip-sourceの利用

1はそのまま直接指定したクラスに切り抜きを反映させるやり方ですが、
インラインのsvgを別の箇所で用意しておき(clip-source)、
id名をつけておいて、clip-path: url(#ID名);で呼び出すことも可能です。

注意点として、別の場所で用意しておくsvgは、width=”0″ height=”0″としておき、
単体としての表示がされないようにしておきます。
下記のような書き方になります。


<img class="clip-me" src="A.png" alt="">
<svg width="0" height="0">
  <defs>
    <clipPath id="clipshape">
     <path d='M0,100C0,44.8,44.8,0,100,0s100,44.8,100,100C200,44.8,244.8,0,300,0s100,44.8,100,100c0,100-66.7,200-200,300
		C66.7,300,0,200,0,100z'>
    </clipPath>
  </defs>
</svg>

.clip-me{
clip-path: url(#clipshape);
}

3 レスポンシブ対応をする!

path()を使い、ハートマークのインラインsvgを用意して切り抜いてみました。


  <p class="sample"><img class="clip-me" src="a.jpg" alt=""></p>
<svg  width="0" height="0" viewBox="0 0 400 400">
	<defs>
	  <clipPath id="clipshape">
		<path  d='M0,100C0,44.8,44.8,0,100,0s100,44.8,100,100C200,44.8,244.8,0,300,0s100,44.8,100,100c0,100-66.7,200-200,300
		C66.7,300,0,200,0,100z'>
		</clippath>
	</defs>
</svg>


.clip-me{
clip-path: url(#clipshape);
}

%で切り抜きのサイズ指定している円形などとは異なり、path()で上記のように指定した画像の方は、
切り抜きのサイズが固定されており、
そのままだとレスポンシブ非対応で、幅が狭まった際に切れてしまうようです。

path()の時にもレスポンシブ対応をしたいので、下記の2点を追加します。

  1. <clipPath>clipPathUnits=”objectBoundingBox”
  2.  <path>transform=”scale( 1/ViewBoxのwidth幅 , 1/ViewBoxのheight幅)”

<p class="sample"><img class="clip-me" src="a.jpg" alt=""></p>
<svg  width="0" height="0" viewBox="0 0 400 400">
	<defs>
	  <clipPath id="clipshape" clipPathUnits="objectBoundingBox">
		<path transform="scale(0.0025,0.0025)" d='M0,100C0,44.8,44.8,0,100,0s100,44.8,100,100C200,44.8,244.8,0,300,0s100,44.8,100,100c0,100-66.7,200-200,300
		C66.7,300,0,200,0,100z'>
		</clippath>
	</defs>
</svg>

clipPathUnits=”objectBoundingBox”を追加することで、
切り抜くパスのサイズを、切り抜きたい要素のサイズに応じて相対的に変える設定が可能になります。

その時、切り抜きたい画像の左上を(0,0)、右下を(1,1)の位置とすると、
切り抜くパスを0-1の範囲に収める必要があるため、transform=”scale()”で縮小します。
例えばパスの大きさ(viewbox)がw100px, h150pxだったら、
それぞれ1/100 1/150 でtransform=”scale(1/100, 1/150)”を指定します。

Advertisements

4 clippathのジェネレーター

svg形式の画像やclippathのデータを作るのに、ジェネレーターサイトを使って作るのも簡単でおすすめです。

1 Squircley!

シンプルな角丸の長方形をつくるサイトです。
機能としては少ないけれど、親しみを感じる形が可愛らしい印象です。

2 Haikei

名前の通り、背景画像に使われそうなパス画像の制作ができます。
うまく使えばとてもモダンなサイトになりそう。

3 clippy

名前の通り、クリッピングをしたい時にピッタリのサイトです。
基本的な形を作りたい時は特に活躍しそうです。

5 ブラウザのサポート状況は?

IE以外は基本的に対応していますが、
Chrome とsafari、Edgeは、url(#foo)で内部のSVGを呼び出すのは対応しているものの、
外部のSVG呼び出しには対応していない(2021年10月の時点)ため、その点は使用する際に注意が必要です。

6 まとめ

photoshopなどでもう切り抜きが済んでいる画像を使っている場合、
その目的で使うことは少なさそうなclippath ですが、
手段のひとつとして知っておくのもアリかなと思いました。

さらに、animationと組み合わせて使うことも可能なため、
改めて時間があるときにまとめてみたいと思います。

SVGのその他の記事はこちら

Advertisements

Similar Posts