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

Advertisements

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

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

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);
}

レスポンシブ対応をする！

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点を追加します。

<clipPath>にclipPathUnits=”objectBoundingBox”
<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