<clipPath>

使用コンテキスト

属性

clipPathUnits

<clipPath> 要素のコンテンツの座標系を定義します。 値の型: userSpaceOnUse | objectBoundingBox; デフォルト値: userSpaceOnUse; アニメーション: 可

DOM インターフェイス

この要素は SVGClipPathElement インターフェイスを実装しています。

例

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

<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>

/* r 幾何プロパティを実装しているブラウザー向けに CSS を少し追加 */

@keyframes openYourHeart {
  from {
    r: 0;
  }
  to {
    r: 60px;
  }
}

#myClip circle {
  animation: openYourHeart 15s infinite;
}

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

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

仕様書

ブラウザーの互換性

関連情報

• クリッピングとマスクの SVG 要素: <mask>
• CSS の clip-path プロパティ
• CSS クリッピング入門
• CSS マスクモジュール