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 January 2021.
元素的表现属性 clip-path
为其定义或关联一条剪切路径。
注意:clip-path
是一个表现属性,可以作为 CSS 属性使用。
作为一种表现属性,clip-path
可以用于任何元素,不过效果最明显的是下列十九种元素:<a>
, <circle>
, <clipPath>
, <ellipse>
, <g>
, <glyph>
, <image>
, <line>
, <marker>
, <mask>
, <path>
, <pattern>
, <polygon>
, <polyline>
, <rect>
, <svg>
, <symbol>
, <text>
, <use>
示例
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)" />
<!-- 右上:应用 CSS 基本形状和 fill-box 几何。
实质上和自定义剪切路径并把 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" />
<!-- 右下:应用 CSS 基本形状和 view-box 几何。
实质上和自定义剪切路径并把 clipPathUnits
设成 userSpaceOnUse 一样 -->
<rect
x="11"
y="11"
width="8"
height="8"
stroke="green"
clip-path="circle() view-box" />
</svg>
Usage notes
值 | <url> | [ <basic-shape> || <geometry-box> ] | none |
---|---|
默认值 | none |
Animatable | 是 |
- <geometry-box>
-
geometry-box 是应用
<basic-shape>
的额外信息,用于区分 CSS 基本形状如何应用于元素上:fill-box
表示将对象的包围框作为参照框;stroke-box
表示将对象的包围框加上描边的范围作为参照框;view-box
表示使用最近的 SVG 视窗作为参照框。
备注: clip-path
语法的更多细节可参考 CSS 属性 clip-path
的参考页面。
规范
Specification |
---|
CSS Masking Module Level 1 # the-clip-path |
浏览器兼容性
BCD tables only load in the browser
See also
- The CSS
clip-path
property