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 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 のリファレンスページをご覧ください。