clip-path

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨2017年3月⁩.

clip-path 表示属性は、クリップパスを、それが関連付けられている要素と定義、または関連付けます。

メモ: プレゼンテーション属性であるため、 clip-path には対応する CSS プロパティの clip-path があります。両方が指定された場合、 CSS プロパティの方が優先されます。

この属性は、次の SVG 要素で使用することができます。

例

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

html

<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
  <clipPath id="myClip" clipPathUnits="objectBoundingBox">
    <circle cx=".5" cy=".5" r=".5" />
  </clipPath>

  <!-- Top-left: Apply a custom defined clipping path -->
  <rect
    x="1"
    y="1"
    width="8"
    height="8"
    stroke="green"
    clip-path="url(#myClip)" />

  <!-- Top-right: Apply a CSS basic shape on a fill-box
       geometry. This is the same as having a custom clipping
       path with a clipPathUnits set to objectBoundingBox -->
  <rect
    x="11"
    y="1"
    width="8"
    height="8"
    stroke="green"
    clip-path="circle() fill-box" />

  <!-- Bottom-left -->
  <rect
    x="1"
    y="11"
    width="8"
    height="8"
    stroke="green"
    clip-path="circle() stroke-box" />

  <!-- Bottom-right: Apply a CSS basic shape on a view-box
       geometry. This is the same as having a custom clipping
       path with a clipPathUnits set to userSpaceOnUse -->
  <rect
    x="11"
    y="11"
    width="8"
    height="8"
    stroke="green"
    clip-path="circle() view-box" />
</svg>

使用上のメモ

値	`<url>` \| [ `<basic-shape>` \|\| `<geometry-box>` ] \| `none`
既定値	`none`
アニメーション	可

<geometry-box>: <basic-shape> が要素にどのように適用されるかを伝える追加情報です。 fill-box は、オブジェクトの境界ボックスを使用することを示します。 stroke-box は、ストロークで拡張されたオブジェクトの境界ボックスを使用することを示します。 view-box は、最も近い SVG ビューポートを参照ボックスとして使用することを示します。

メモ: clip-path の構文の詳細については、 CSS プロパティ clip-path のリファレンスページをご覧ください。