<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 プロパティで使用されるクリッピングパスを定義します。

クリッピングパスは、描画が適用される領域を制限する。概念的には、クリッピングパスで囲まれた領域の外にある部分は描画されません。

例

html, body, svg { height: 100%; }

html

<svg viewBox="0 0 100 100"> <clipPath id="myClip"> <!-- Everything outside the circle will be clipped and therefore invisible. --> <circle cx="40" cy="35" r="35" /> </clipPath> <!-- The original black heart, for reference --> <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" /> <!-- Only the portion of the red heart inside the clip circle is visible. --> <use clip-path="url(#myClip)" href="#heart" fill="red" /> </svg>

css

/* With a touch of CSS for browsers who * * implemented the r Geometry Property. */ @keyframes openYourHeart { from { r: 0; } to { r: 60px; } } #myClip circle { animation: openYourHeart 15s infinite; }

クリッピングパスは、概念的には、参照している要素のカスタムビューポートと同じです。したがって、要素のレンダリングに影響を与えますが、要素の固有の形状には影響を与えません。クリッピングされた要素（<clipPath> 要素を clip-path プロパティで参照している要素、または参照している要素の子）のバウンディングボックスは、クリッピングされていない場合と同じでなければなりません。

既定では、クリップされた領域では pointer-events が発行されません。例えば、半径 10 の円が半径 5 の円でクリッピングされている場合、小さい方の半径の外側では "click" イベントを受け取ることはありません。

属性

clipPathUnits: <clipPath> 要素の内容物の座標系を定義します。 値の型: userSpaceOnUse | objectBoundingBox; 既定値: userSpaceOnUse; アニメーション: 可

利用メモ

カテゴリー	無し
許可されている内容	任意の数、任意の順序の以下の要素。アニメーション要素説明的要素図形要素 `<text>`、`<use>`