这篇翻译不完整。请帮忙从英语翻译这篇文章

简介

clip-path属性可以创建一个只有元素的部分区域可以显示的剪切区域。区域内的部分显示,区域外的隐藏。剪切区域是被引用内嵌的URL定义的路径或者外部svg的路径,或者作为一个形状例如circle().。clip-path属性代替了现在已经弃用的剪切 clip属性。

初始值none
适用元素all elements; In SVG, it applies to container elements excluding the defs element and all graphics elements
是否是继承属性
Percentagesrefer to reference box when specified, otherwise border-box
适用媒体visual
计算值as specified, but with url values made absolute
Animation typeyes, as specified for basic-shape, otherwise no
正规顺序the unique non-ambiguous order defined by the formal grammar

语法

/* 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;

<clip-source>
<url>表示剪切元素的路径
inset(), circle(), ellipse(), polygon()
一个 <basic-shape> 方法. 这种形状将会利用指定的<geometry-box>来定位和固定基本形状。如果没有geometry box(几何盒模型)特别指出的话,border-box将会是默认的盒模型。
<geometry-box>
如果同<basic-shape>一起声明,它将为基本形状提供相应的参考盒子。通过自定义,它将利用确定的盒子边缘包括任何形状边角(比如说,被border-radius定义的剪切路径)。几何体盒子将会有以下的值:
fill-box
利用对象边界框作为引用框。
stroke-box
使用笔触边界框作为引用框
view-box
使用最近的SVG视口作为引用框。如果viewBox 属性被指定来为元素创建SVG视口,引用框将会被定位在坐标系的原点,引用框位于由view-box属性建立的坐标系的原点,引用框的尺寸用来设置viewbox属性的宽高值。
margin-box
使用 margin box 作为引用框
border-box
使用 border box 作为引用框.
padding-box
使用 padding box 作为引用框.
content-box
使用 content box 作为引用框
none
这里没有创建的剪切路径。

基本语法

<clip-source> | [ <basic-shape> || <geometry-box> ] | none

where
<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 | center | bottom ] | [ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ]? | [ [ left | right ] <length-percentage> ] && [ [ top | bottom ] <length-percentage> ] ]
<fill-rule> = nonzero | evenodd
<box> = border-box | padding-box | content-box

circle的position默认位置是左上角,0,0;

例子

/* inline SVG  */
.target {
  clip-path: url(#c1);
}

/* external SVG */
.anothertarget {
  clip-path: url(resources.svg#c1);
}

/* circle */
.circleClass {
  clip-path: circle(15px at 20px 20px);
}

Live sample

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);
}

Result

规范

Specification Status Comment
CSS Masking Module Level 1
clip-path
Candidate Recommendation Extends its application to HTML elements
Scalable Vector Graphics (SVG) 1.1 (Second Edition)
clip-path
Recommendation Initial definition (applies to SVG elements only)

浏览器支持

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
On HTML elements 24-webkit[1] 3.5 (1.9.1) 未实现 (Yes)-webkit[1] ?
<basic-shape> ? 47 (47)[2] 未实现 ? ?
On SVG content ? 未实现[3] 未实现 ? ?
inset() ? 51 (51)[2] 未实现 ? ?
Animations ? 49 (49) 未实现 ? ?
fill-box and stroke-box ? 51 (51)[4] 未实现 ? ?
Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
On HTML elements ? 1.0 (1.9.1) 未实现 ? ?
<basic-shape> ? 47.0 (47)[2] 未实现 ? ?
On SVG content ? 未实现[3] 未实现 ? ?
inset() ? 51.0 (51)[2] 未实现 ? ?
Animations ? 49.0 (49) 未实现 ? ?
fill-box and stroke-box ? 51 (51)[4] 未实现 ? ?

[1] Chrome 和 Opera目前并不支持外部的SVGs。 

[2] 这个属性的支持晚于layout.css.clip-path-shapes。enabled属性,默认为false。基本的形状除了inset(),已经实现在bug 1075457,inset()已经实现在bug 1246762。但是自从Gecko 53 (Firefox 53.0 / Thunderbird 53.0 / SeaMonkey 2.50) 这个默认的属性已经变成true在Nightly和 Developer Edition (bug 1303654).。

[3] 这功能尚未被实现. See bug 1246741.

[4] 在 Firefox 51 版本之前, fill-box 和 stroke-box 的另外一种叫法是 border-box.

更多资源

文档标签和贡献者

最后编辑者: AozakiOrenji,