clip-path
clip-path 表现属性为其相关元素定义或关联一条裁剪路径。
备注：作为一个表现属性，clip-path 也有对应的 CSS 属性：clip-path。两者同时指定时，CSS 属性优先。
你可以和下面的 SVG 元素一起使用该属性：
示例
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>
<!-- 左上：应用自定义的裁剪路径 -->
<rect
x="1"
y="1"
width="8"
height="8"
stroke="green"
clip-path="url(#myClip)" />
<!-- 右上：在 fill-box 几何上应用 CSS 基本形状。
这等同于使用自定义裁剪路径，并将 clipPathUnits
设为 objectBoundingBox -->
<rect
x="11"
y="1"
width="8"
height="8"
stroke="green"
clip-path="circle() fill-box" />
<!-- 左下 -->
<rect
x="1"
y="11"
width="8"
height="8"
stroke="green"
clip-path="circle() stroke-box" />
<!-- 右下：在 view-box 几何上应用 CSS 基本形状。
这等同于使用自定义裁剪路径，并将 clipPathUnits
设为 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 参考页。
规范
| 规范 |
|---|
| CSS Masking Module Level 1 # the-clip-path |