<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; アニメーション: 可

グローバル属性

コア属性

最重要なもの: id

スタイル付け属性

class, style

条件処理属性

最重要なもの: requiredExtensions, systemLanguage

プレゼンテーション属性

最重要なもの: clip-path, clip-rule, color, display, fill, fill-opacity, fill-rule, filter, mask, opacity, shape-rendering, stroke, stroke-dasharray, stroke-dashoffset, stroke-linecap, stroke-linejoin, stroke-miterlimit, stroke-opacity, stroke-width, transform, vector-effect, visibility

利用メモ

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

仕様書

Specification
CSS Masking Module Level 1
# ClipPathElement

ブラウザーの互換性

BCD tables only load in the browser

関連情報