<clipPath>
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2015年7月.
<clipPath> は SVG の要素で、 clip-path プロパティで使用されるクリッピングパスを定義します。
クリッピングパスは、描画が適用される領域を制限する。概念的には、クリッピングパスで囲まれた領域の外にある部分は描画されません。
使用コンテキスト
属性
clipPathUnits-
<clipPath>要素のコンテンツの座標系を定義します。 値の型:userSpaceOnUse|objectBoundingBox; デフォルト値:userSpaceOnUse; アニメーション: 可
DOM インターフェイス
この要素は SVGClipPathElement インターフェイスを実装しています。
例
html
<svg viewBox="0 0 100 100">
<clipPath id="myClip">
<!--
円の外側にあるものはすべて切り取られるため、
見えなくなります。
-->
<circle cx="40" cy="35" r="35" />
</clipPath>
<!-- 参照用の元の黒いハート -->
<path
id="heart"
d="M10,30 A20,20,0,0,1,50,30 A20,20,0,0,1,90,30 Q90,60,50,90 Q10,60,10,30 Z" />
<!--
クリップの円の中にある赤いハートの一部だけが、
見えるようになっています。
-->
<use clip-path="url(#myClip)" href="#heart" fill="red" />
</svg>
css
/* r 幾何プロパティを実装しているブラウザー向けに CSS を少し追加 */
@keyframes openYourHeart {
from {
r: 0;
}
to {
r: 60px;
}
}
#myClip circle {
animation: openYourHeart 15s infinite;
}
クリッピングパスは、概念的には、参照している要素のカスタムビューポートと同じです。したがって、要素のレンダリングに影響を与えますが、要素の内在的な形状には影響を与えません。クリッピングされた要素（<clipPath> 要素を clip-path プロパティで参照している要素、または参照している要素の子）のバウンディングボックスは、クリッピングされていない場合と同じでなければなりません。
デフォルトでは、クリップされた領域では pointer-events が発行されません。例えば、半径 10 の円が半径 5 の円でクリッピングされている場合、小さい方の半径の外側では "click" イベントを受け取ることはありません。
仕様書
| Specification |
|---|
| CSS Masking Module Level 1 # ClipPathElement |
ブラウザーの互換性
関連情報
- クリッピングとマスクの SVG 要素:
<mask> - CSS の
clip-pathプロパティ - CSS クリッピング入門
- CSS マスクモジュール