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