CSS参考手册
可缩放矢量图形 | Scalable Vector Graphics
clip-path
这是一种实验技术
由于该技术的规格不稳定,请查看各种浏览器的兼容性表格以供使用。另外请注意,随着规范的变化,实验技术的语法和行为在未来版本的浏览器中可能会发生变化。
大clip-path
属性创建一个裁剪区域,该区域定义应显示元素的哪个部分。区域内的部分显示,而外部的部分被隐藏。裁剪区域是指定为引用内联或外部SVG的URL或形状(如圆圈%28%29...
历史注意:剪辑路径属性替换了弃用的clip
属性。
/* Keyword values */
clip-path: none;
/* Image values */
clip-path: url(resources.svg#c1);
/* Box values */
clip-path: fill-box;
clip-path: stroke-box;
clip-path: view-box;
clip-path: margin-box;
clip-path: border-box;
clip-path: padding-box;
clip-path: content-box;
/* Geometry values */
clip-path: inset(100px 50px);
clip-path: circle(50px at 0 100px);
clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
/* Box and geometry values combined */
clip-path: padding-box circle(50px at 0 100px);
/* Global values */
clip-path: inherit;
clip-path: initial;
clip-path: unset;
初始值 |
none |
---|---|
适用于 |
所有元素; 在SVG中,它适用于不包含<defs>元素和所有图形元素的容器元素 |
遗传 |
没有 |
百分比 |
指定时参考参考框,否则为边框 |
媒体 |
visual |
计算值 |
如指定的,但与绝对的url值 |
动画类型 |
是的,如<basic-shape>所指定的,否则不 |
规范的顺序 |
形式语法定义的独特的非模糊顺序 |
语法
该clip-path
属性被指定为下面列出的值中的一个或其组合。
值
url()
表示引用裁剪路径元素的URL。
inset()
,circle()
,ellipse()
,polygon()
一个<basic-shape>
功能。形状的大小和位置由该<geometry-box>
值定义。如果没有指定几何框,border-box
则将用。
<geometry-box>
如果与a组合使用<basic-shape>
,则此值将定义基本形状的参考框。如果由它自己指定,则会导致指定框的边缘(包括任何角度修整(例如a border-radius
))成为剪切路径。
几何框可以是以下值之一:
fill-box
使用对象边界框作为参考框。
stroke-box
使用笔画边界框作为参考框。
view-box
使用最近的SVG视口作为参考框。如果一个viewBox
属性是为创建SVG视口的元素指定的,参考框位于由viewBox
属性建立的坐标系的原点处,并且参考框大小的尺寸被设置为viewBox
属性的宽度和高度值。
margin-box
使用边距框作为参考框。border-box
使用边框作为参考框。
padding-box
使用填充框作为参考框。
content-box
使用内容框作为参考框。
none
没有剪切路径被创建。
形式语法
<clip-source> | [ <basic-shape> || <geometry-box> ] | nonewhere
<clip-source> = <url>
<basic-shape> = <inset()> | <circle()> | <ellipse()> | <polygon()>
<geometry-box> = <shape-box> | fill-box | stroke-box | view-box
where
<inset()> = inset( <length-percentage>{1,4} [ round <border-radius> ]? )
<circle()> = circle( [ <shape-radius> ]? [ at <position> ]? )
<ellipse()> = ellipse( [ <shape-radius>{2} ]? [ at <position> ]? )
<polygon()> = polygon( <fill-rule>? , [ <length-percentage> <length-percentage> ]# )
<shape-box> = <box> | margin-box
where
<length-percentage> = <length> | <percentage>
<shape-radius> = <length-percentage> | closest-side | farthest-side
<position> = [[ left | center | right | top | bottom | <length-percentage> ] | [ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ] | [ center | [ left | right ] <length-percentage>? ] && [ center | [ top | bottom ] <length-percentage>? ]]
<fill-rule> = nonzero | evenodd
<box> = border-box | padding-box | content-box
实例
/* Inline SVG */
.target {
clip-path: url(#c1);
}
/* External SVG */
.anothertarget {
clip-path: url(resources.svg#c1);
}
/* Circle shape */
.circleClass {
clip-path: circle(15px at 20px 20px);
}
示例
HTML
<img id="clipped" src="https://mdn.mozillademos.org/files/12668/MDN.svg"
alt="MDN logo">
<svg height="0" width="0">
<defs>
<clipPath id="cross">
<rect y="110" x="137" width="90" height="90"/>
<rect x="0" y="110" width="90" height="90"/>
<rect x="137" y="0" width="90" height="90"/>
<rect x="0" y="0" width="90" height="90"/>
</clipPath>
</defs>
</svg>
<select id="clipPath">
<option value="none">none</option>
<option value="circle(100px at 110px 100px)">circle</option>
<option value="url(#cross)" selected>cross</option>
<option value="inset(20px round 20px)">inset</option>
</select>
CSS
#clipped {
margin-bottom: 20px;
clip-path: url(#cross);
}
结果
规范
Specification |
Status |
Comment |
---|---|---|
CSS Masking Module Level 1The definition of 'clip-path' in that specification. |
Candidate Recommendation |
Extends its application to HTML elements. |
Scalable Vector Graphics (SVG) 1.1 (Second Edition)The definition of 'clip-path' in that specification. |
Recommendation |
Initial definition (applies to SVG elements only). |
浏览器兼容性
Feature |
Chrome |
Edge |
Firefox (Gecko) |
Internet Explorer |
Opera |
Safari (WebKit) |
---|---|---|---|---|---|---|
On HTML elements |
24-webkit1 55.0 |
No support2 |
3.5 (1.9.1) |
No support |
(Yes)-webkit1 |
No support3 |
<basic-shape> |
55.0 |
No support2 |
54 (54)5 |
No support |
42.0 |
No support3 |
On SVG content |
55.0 |
20 (12.10240)4 |
52 (52)6 |
(Yes)4 |
42.0 |
No support3 |
inset() |
55.0 |
No support2 |
54 (54)5 |
No support |
42.0 |
No support3 |
Animations |
55.0 |
No support2 |
49 (49) |
No support |
42.0 |
No support3 |
fill-box and stroke-box |
No support |
No support2 |
51 (51)7 |
No support |
No support |
No support3 |
Feature |
Android |
Android Webview |
Edge |
Firefox Mobile (Gecko) |
IE Phone |
Opera Mobile |
Safari Mobile |
Chrome for Android |
---|---|---|---|---|---|---|---|---|
On HTML elements |
55.0 |
55.0 |
No support |
1.0 (1.9.1) |
No support |
? |
No support3 |
(Yes) -webkit 55.0 |
<basic-shape> |
55.0 |
55.0 |
No support |
54.0 (54)5 |
No support |
? |
No support3 |
55.0 |
On SVG content |
55.0 |
55.0 |
20 (12.10240)4 |
52.0 (52)6 |
No support |
? |
No support3 |
55.0 |
inset() |
55.0 |
55.0 |
No support |
54.0 (54)5 |
No support |
? |
No support3 |
55.0 |
Animations |
55.0 |
55.0 |
No support |
49.0 (49) |
No support |
? |
No support3 |
55.0 |
fill-box and stroke-box |
No support |
No support |
No support |
51 (51)7 |
No support |
? |
No support3 |
No support |
可缩放矢量图形 | Scalable Vector Graphics相关
层叠样式表( Cascading Style Sheets )是一种用来表现 HTML 或 XML 等文件样式的计算机语言。CSS 不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。