clip-path

**clip-path** 表示屬性定義或將裁剪路徑與它相關的元素關聯起來。

注意：作為表示屬性，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 視口作為參考框。

注意：有關剪輯路徑語法的更多詳細資訊，請參閱 CSS 屬性 clip-path 參考頁面。

規範

規範
CSS 蒙版模組級別 1 # the-clip-path

瀏覽器相容性

BCD 表格僅在啟用 JavaScript 的瀏覽器中載入。

另請參閱

CSS clip-path 屬性