<clipPath>

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2021.

<clipPath>SVG の要素で、 clip-path プロパティで使用されるクリッピングパスを定義します。

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

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)" xlink: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>

仕様書

Specification
CSS Masking Module Level 1
# ClipPathElement

ブラウザーの互換性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
clipPath
clipPathUnits
systemLanguage

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

関連情報