clip-path

这是一种实验技术

由于该技术的规格不稳定，请查看各种浏览器的兼容性表格以供使用。另外请注意，随着规范的变化，实验技术的语法和行为在未来版本的浏览器中可能会发生变化。

大clip-path属性创建一个裁剪区域，该区域定义应显示元素的哪个部分。区域内的部分显示，而外部的部分被隐藏。裁剪区域是指定为引用内联或外部SVG的URL或形状(如圆圈%28%29...

历史注意：剪辑路径属性替换了弃用的clip属性。

/* Keyword values */
clip-path: none;

/* Image values */ 
clip-path: url(?developer/section/1072339/resources.svg);

/* 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(?developer/section/1072339/);
}

/* External SVG */
.anothertarget {
  clip-path: url(?developer/section/1072339/resources.svg);
}

/* 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(?developer/section/1072339/)" selected>cross</option>
? <option value="inset(20px round 20px)">inset</option>
</select>

CSS

#clipped {
  margin-bottom: 20px;
  clip-path: url(?developer/section/1072339/);
}

结果

规范

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

本文档系腾讯云开发者社区成员共同维护，如有问题请联系 cloudcommunity@tencent.com

最后更新于：2017-12-18