You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
If the clipping region exceeds the bounds of the UA's document window, content may be clipped to that window by the native operating environment.
133
133
134
-
A clipping path affects the rendering of an element. It does not affects the element's inherent geometry. The boundaries of a clipped element (i.e. an element which references a <aelement>clipPath</a> element via a 'clip-path' property, or a child of the referencing element) must remain the same as if it were not clipped.
134
+
A clipping path affects the rendering of an element. It does not affect the element's inherent geometry. The geometry of a clipped element (i.e. an element which references a <aelement>clipPath</a> element via a 'clip-path' property, or a child of the referencing element) must remain the same as if it were not clipped.
135
135
136
136
<divclass=example>
137
137
<p>Consider a shape that is clipped by a clipping path applied to an ancestor:</p>
@@ -156,7 +156,7 @@ <h3 id="the-clip-path">Clipping Shape: the 'clip-path' property</h3>
156
156
Percentages: as specified
157
157
Computed value: as specified, but with <<url>> values made absolute
158
158
Media: visual
159
-
Animatable: See 'shape-outside' [[!CSS-SHAPES]]
159
+
Animatable: as specified for <<basic-shape>> [[!CSS-SHAPES]], otherwise no
160
160
</pre>
161
161
162
162
Specifies a basic shape or references a <aelement>clipPath</a> element to create a <i>clipping path</i>.
@@ -204,7 +204,7 @@ <h3 id="the-clip-path">Clipping Shape: the 'clip-path' property</h3>
204
204
205
205
206
206
207
-
A computed value of other than ''none'' results in the creation of a <aspec="css21">stacking context</a> [[!CSS21]] the same way that CSS 'opacity' [[CSS3COLOR]] does.
207
+
A computed value of other than ''none'' results in the creation of a <aspec="css21">stacking context</a> [[!CSS21]] the same way that CSS 'opacity' [[CSS3COLOR]] does for values other than ''1''.
208
208
209
209
If the URI reference is not valid (e.g it points to an object that doesn't exist or the object is not a <aelement>clipPath</a> element), no clipping is applied.
<p>If the clipping region exceeds the bounds of the UA’s document window, content may be clipped to that window by the native operating environment.
197
197
198
-
<p>A clipping path affects the rendering of an element. It does not affects the element’s inherent geometry. The boundaries of a clipped element (i.e. an element which references a <adata-link-type=elementhref=#elementdef-clippathtitle=clippath>clipPath</a> element via a <aclass=propertydata-link-type=propdeschref=#propdef-clip-pathtitle=clip-path>clip-path</a> property, or a child of the referencing element) must remain the same as if it were not clipped.
198
+
<p>A clipping path affects the rendering of an element. It does not affect the element’s inherent geometry. The geometry of a clipped element (i.e. an element which references a <adata-link-type=elementhref=#elementdef-clippathtitle=clippath>clipPath</a> element via a <aclass=propertydata-link-type=propdeschref=#propdef-clip-pathtitle=clip-path>clip-path</a> property, or a child of the referencing element) must remain the same as if it were not clipped.
199
199
200
200
<divclass=example>
201
201
<p>Consider a shape that is clipped by a clipping path applied to an ancestor:</p>
<h3class="heading settled heading" data-level=5.1id=the-clip-path><spanclass=secno>5.1 </span><spanclass=content>Clipping Shape: the <aclass=propertydata-link-type=propdeschref=#propdef-clip-pathtitle=clip-path>clip-path</a> property</span><aclass=self-linkhref=#the-clip-path></a></h3>
211
211
212
-
<tableclass="definition propdef"><tr><th>Name:<td><dfnclass=css-codedata-dfn-type=propertydata-export="" id=propdef-clip-path>clip-path<aclass=self-linkhref=#propdef-clip-path></a></dfn><tr><th>Value:<tdclass=prod><aclass="production css-code" data-link-type=typehref=#typedef-clip-sourcetitle="<clip-source>"><clip-source></a> | [ <aclass="production css-code" data-link-type=typehref=http://dev.w3.org/csswg/css-shapes-2/#ltbasic-shapegttitle="<basic-shape>"><basic-shape></a> || <aclass="production css-code" data-link-type=typehref=#typedef-geometry-boxtitle="<geometry-box>"><geometry-box></a> ] | none<tr><th>Initial:<td>none<tr><th>Applies to:<td>All elements. In SVG, it applies to <ahref=http://www.w3.org/TR/2011/REC-SVG11-20110816/intro.html#TermContainerElement>container elements</a> excluding the <ahref=http://www.w3.org/TR/2011/REC-SVG11-20110816/struct.html#DefsElement><codeclass=element-name><defs></code></a> element and all <ahref=http://www.w3.org/TR/2011/REC-SVG11-20110816/intro.html#TermGraphicsElement>graphics elements</a><tr><th>Inherited:<td>no<tr><th>Media:<td>visual<tr><th>Computed value:<td>as specified, but with <aclass="production css-code" data-link-type=typehref=http://dev.w3.org/csswg/css-values-3/#url-valuetitle="<url>"><url></a> values made absolute<tr><th>Percentages:<td>as specified<tr><th>Animatable:<td>See <aclass=propertydata-link-type=propdeschref=http://dev.w3.org/csswg/css-shapes-1/#propdef-shape-outsidetitle=shape-outside>shape-outside</a><adata-biblio-type=normativedata-link-type=bibliohref=#css-shapestitle=css-shapes>[CSS-SHAPES]</a></table>
212
+
<tableclass="definition propdef"><tr><th>Name:<td><dfnclass=css-codedata-dfn-type=propertydata-export="" id=propdef-clip-path>clip-path<aclass=self-linkhref=#propdef-clip-path></a></dfn><tr><th>Value:<tdclass=prod><aclass="production css-code" data-link-type=typehref=#typedef-clip-sourcetitle="<clip-source>"><clip-source></a> | [ <aclass="production css-code" data-link-type=typehref=http://dev.w3.org/csswg/css-shapes-2/#ltbasic-shapegttitle="<basic-shape>"><basic-shape></a> || <aclass="production css-code" data-link-type=typehref=#typedef-geometry-boxtitle="<geometry-box>"><geometry-box></a> ] | none<tr><th>Initial:<td>none<tr><th>Applies to:<td>All elements. In SVG, it applies to <ahref=http://www.w3.org/TR/2011/REC-SVG11-20110816/intro.html#TermContainerElement>container elements</a> excluding the <ahref=http://www.w3.org/TR/2011/REC-SVG11-20110816/struct.html#DefsElement><codeclass=element-name><defs></code></a> element and all <ahref=http://www.w3.org/TR/2011/REC-SVG11-20110816/intro.html#TermGraphicsElement>graphics elements</a><tr><th>Inherited:<td>no<tr><th>Media:<td>visual<tr><th>Computed value:<td>as specified, but with <aclass="production css-code" data-link-type=typehref=http://dev.w3.org/csswg/css-values-3/#url-valuetitle="<url>"><url></a> values made absolute<tr><th>Percentages:<td>as specified<tr><th>Animatable:<td>as specified for <aclass="production css-code" data-link-type=typehref=http://dev.w3.org/csswg/css-shapes-2/#ltbasic-shapegttitle="<basic-shape>"><basic-shape></a><adata-biblio-type=normativedata-link-type=bibliohref=#css-shapestitle=css-shapes>[CSS-SHAPES]</a>, otherwise no</table>
213
213
<p>Specifies a basic shape or references a <adata-link-type=elementhref=#elementdef-clippathtitle=clippath>clipPath</a> element to create a <adata-link-type=dfnhref=#clipping-pathtitle="clipping path">clipping path</a>.
<p>A computed value of other than <spanclass=cssdata-link-type=maybetitle=none>none</span> results in the creation of a <adata-link-spec=css21data-link-type=dfnhref=http://www.w3.org/TR/CSS21/visuren.html#x43title="stacking context">stacking context</a><adata-biblio-type=normativedata-link-type=bibliohref=#css21title=css21>[CSS21]</a> the same way that CSS <aclass=propertydata-link-type=propdeschref=http://dev.w3.org/csswg/css-color-3/#opacitytitle=opacity>opacity</a><adata-biblio-type=informativedata-link-type=bibliohref=#css3colortitle=css3color>[CSS3COLOR]</a> does.
256
+
<p>A computed value of other than <spanclass=cssdata-link-type=maybetitle=none>none</span> results in the creation of a <adata-link-spec=css21data-link-type=dfnhref=http://www.w3.org/TR/CSS21/visuren.html#x43title="stacking context">stacking context</a><adata-biblio-type=normativedata-link-type=bibliohref=#css21title=css21>[CSS21]</a> the same way that CSS <aclass=propertydata-link-type=propdeschref=http://dev.w3.org/csswg/css-color-3/#opacitytitle=opacity>opacity</a><adata-biblio-type=informativedata-link-type=bibliohref=#css3colortitle=css3color>[CSS3COLOR]</a> does for values other than <spanclass=cssdata-link-type=maybetitle=1>1</span>.
257
257
258
258
<p>If the URI reference is not valid (e.g it points to an object that doesn’t exist or the object is not a <adata-link-type=elementhref=#elementdef-clippathtitle=clippath>clipPath</a> element), no clipping is applied.
<tr><thscope=row><adata-property="">clip-path</a><td><clip-source> | [ <basic-shape> || <geometry-box> ] | none<td>none<td>All elements. In SVG, it applies to container elements excluding the <defs> element and all graphics elements<td>no<td>as specified<td>visual<td>See shape-outside [CSS-SHAPES]<td>as specified, but with <url> values made absolute
1343
+
<tr><thscope=row><adata-property="">clip-path</a><td><clip-source> | [ <basic-shape> || <geometry-box> ] | none<td>none<td>All elements. In SVG, it applies to container elements excluding the <defs> element and all graphics elements<td>no<td>as specified<td>visual<td>as specified for <basic-shape> [CSS-SHAPES], otherwise no<td>as specified, but with <url> values made absolute
1344
1344
<tr><thscope=row><adata-property="">clip-rule</a><td>nonzero | evenodd<td>nonzero<td>Applies to SVG graphics elements<td>yes<td>n/a<td>visual<td>no<td>as specified
1345
1345
<tr><thscope=row><adata-property="">mask-image</a><td><mask-reference><td>none<td>All elements. In SVG, it applies to container elements excluding the <defs> element and all graphics elements<td>no<td>n/a<td>visual<td>no<td>as specified, but with URIs made absolute
1346
1346
<tr><thscope=row><adata-property="">mask-type</a><td><source-type><td>auto<td>All elements. In SVG, it applies to container elements excluding the <defs> element and all graphics elements<td>no<td>n/a<td>visual<td>no<td>as specified
0 commit comments