Newly available 条件付きOK。主要ブラウザで対応済みだが、古いバージョンでは未対応の場合がある。フォールバックを検討。

Clip path boxes

SVG要素やCSS要素のクリッピングパスの基準ボックスを指定できます。fill-box はフィル領域、stroke-box はストローク領域、view-box はSVGのビューボックスを基準にします。特にSVG要素のクリッピングで、基準となる座標系を柔軟に選択できるようになります。

クリッピングSVG

対応ブラウザ

機能 デスクトップ モバイル
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
css.properties.clip-path.fill-box
119
119
51
13.1
119
13.4
CSS プロパティ
stroke-box
119
119
51
13.1
119
13.4
view-box
119
119
54
13.1
119
13.4
1+対応 (バージョン) 未対応 ※注釈あり サブ機能の解説は MDN Web Docs (CC BY-SA 2.5)
注釈 1件
実装メモ
  • この値は、Firefox 51 より前では「border-box」のエイリアスとしてサポートされていました。
注釈 1件
実装メモ
  • この値は、Firefox 51 より前では「border-box」のエイリアスとしてサポートされていました。

基本構文

CSS 
.svg-clip {
  clip-path: circle(50%) fill-box;
}
.stroke-clip {
  clip-path: inset(10%) stroke-box;
}

ライブデモ

circle() fill-box

CSS Circle() fill-box demo.

プレビュー全画面表示

Inset() clip

CSS Inset() clip demo.

プレビュー全画面表示

Polygon() clip

CSS Polygon() clip demo.

プレビュー全画面表示

実務での使いどころ

  • SVG要素の精密なクリッピング制御

    SVGのフィル領域やストローク領域を基準にクリッピングパスを適用し、より正確な表示制御ができます。

注意点

  • Baseline: Low のため、古いブラウザではサポートされていない場合があります。フォールバックとして標準の clip-path 値を検討してください。

アクセシビリティ

  • クリッピングは視覚的な効果のみです。クリッピングにより重要なコンテンツが隠れないように注意してください。

参考リンク