<clipPath>

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

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

例

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 (en-US) プロパティで参照している要素、または参照している要素の子) のバウンディングボックスは、クリッピングされていない場合と同じでなければなりません。

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

属性

clipPathUnits (en-US)

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

グローバル属性

コア属性

最重要なもの: id

スタイル付け属性
class (en-US), style (en-US)
条件処理属性

最重要なもの: requiredExtensions, systemLanguage (en-US)

プレゼンテーション属性

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

利用メモ

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

仕様書

Specification
CSS Masking Module Level 1
# ClipPathElement

ブラウザーの互換性

BCD tables only load in the browser

関連情報