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

Clip path boxes

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

クリッピングSVG

概要

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

対応ブラウザ

デスクトップ

Chrome 119+
Edge 119+
Safari 13.1+
Firefox 54+

モバイル

Chrome Android 119+
Safari iOS 13.4+
Firefox Android 54+

基本構文

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

実務での使いどころ

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

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

注意点

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

アクセシビリティ

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

参考リンク