Clipping Shape: the clip-path property
| Name: | clip-path |
|---|---|
| Value: | <clip-source> | [ <basic-shape> || <geometry-box> ] | none |
| Initial: | none |
| Applies to: | All elements. In SVG, it applies to container elements excluding the <defs> element and all graphics elements |
| Inherited: | no |
| Media: | visual |
| Computed value: | as specified, but with <url> values made absolute |
| Percentages: | as specified |
| Animatable: | as specified for <basic-shape> [CSS-SHAPES], otherwise no |
Specifies a basic shape or references a clipPath element to create a clipping path.
<clip-source>= <url>
<geometry-box>= <shape-box> | fill-box | stroke-box | view-box
A basic shape function as defined in the CSS Shapes module [CSS-SHAPES]. A basic shape makes use of the specified reference box to size and position the basic shape. If no reference box is specified, the border-box will be used as reference box.
If specified in combination with a <basic-shape> it provides the reference box for the <basic-shape>.
If specified by itself, uses the edges of the specified box, including any corner shaping (e.g. defined by border-radius [CSS3BG]), as clipping path. See also “Shapes from box values” [CSS-SHAPES].
Uses the object bounding box as reference box.
Uses the stroke bounding box as reference box.
Uses the nearest SVG viewport as reference box.
If a ‘viewBox‘ attribute is specified for the SVG viewport creating element:
The reference box is positioned at the origin of the coordinate system established by the ‘viewBox‘ attribute.
The dimension of the reference box is set to the width and height values of the ‘viewBox‘ attribute.
none
No clipping path gets created.
For SVG elements without associated CSS layout box, the used value for content-box, padding-box, border-box and margin-box is fill-box.
For elements with associated CSS layout box, the used value for fill-box, stroke-box and view-box is border-box.
A computed value of other than none results in the creation of a stacking context [CSS21] the same way that CSS opacity [CSS3COLOR] does for values other than 1.
If the URI reference is not valid (e.g it points to an object that doesn’t exist or the object is not a clipPath element), no clipping is applied.
This example demonstrates the use of the basic shape <polygon()> as clipping path. Each space separated length pair represents one point of the polygon. The visualized clipping path can be seen in the introduction.
clip-path: polygon(15px 99px, 30px 87px, 65px 99px, 85px 55px, 122px 57px, 184px 73px, 198px 105px, 199px 150px, 145px 159px, 155px 139px, 126px 120px, 112px 138px, 80px 128px, 39px 126px, 24px 104px);
In this example, the clip-path property references an SVG clipPath element. Each comma separated length pair represents one point of the polygon. As for the previous example, the visualized clipping path can be seen in the introduction.
clip-path: url("#clip1");<clipPath id="clip1"> <polygon points="15,99 30,87 65,99 85,55 122,57 184,73 198,105 199,150 145,159 155,139 126,120 112,138 80,128 39,126 24,104"/> </clipPath>
原文地址： https://www.w3.org/TR/css-masking/#the-clip-path
文档解释比较好的地址： https://www.cnblogs.com/pizitai/p/6188346.html
https://bashooka.com/coding/18-css-clip-path-tutorials-examples-tools/
-
« 上一篇：
cnpm install 报错的问题