masking/index.html@fd09b94a3a4d
masking/index.html
Sat, 09 Mar 2013 17:18:22 -0800
- author
- Dirk Schulze <dschulze@adobe.com>
- date
- Sat, 09 Mar 2013 17:18:22 -0800
- changeset 731
- fd09b94a3a4d
- parent 727
- ad311bae0010
- child 734
- 59236286d848
- permissions
- -rw-r--r--
Incorporate feedback from Björn Höhrmann
1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
2 "http://www.w3.org/TR/html4/strict.dtd">
4 <html lang=en>
5 <head profile="http://dublincore.org/documents/2008/08/04/dc-html/ ">
6 <meta content="text/html; charset=utf-8" http-equiv=Content-Type>
7 <title>CSS Masking</title>
9 <link href="http://purl.org/dc/terms/" rel=schema.dcterms>
10 <link href="http://www.w3.org/Consortium/Legal/ipr-notice#Copyright"
11 rel=dcterms.rights>
12 <meta content="CSS Masking" name=dcterms.title>
13 <meta content=text name=dcterms.type>
14 <meta content=2013-03-10 name=dcterms.issued>
15 <meta
16 content="http://dvcs.w3.org/hg/FXTF/raw-file/default/masking/index.html"
17 name=dcterms.creator>
18 <meta content=W3C name=dcterms.publisher>
19 <meta content="http://dev.w3.org/csswg/css-masking/"
20 name=dcterms.identifier>
21 <link href="#contents" rel=contents>
22 <link href="#index" rel=index>
23 <link href=default.css rel=stylesheet type="text/css">
24 <link href="http://www.w3.org/StyleSheets/TR/W3C-ED.css" rel=stylesheet
25 type="text/css">
26 <script defer=defer
27 src="http://test.csswg.org/harness/annotate.js#CSS-MASKING_DEV"
28 type="text/javascript"></script>
30 <body>
31 <div class=head> <!--begin-logo-->
32 <p><a href="http://www.w3.org/"><img alt=W3C height=48
33 src="http://www.w3.org/Icons/w3c_home" width=72></a> <!--end-logo-->
35 <h1>CSS Masking</h1>
37 <h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 10 March 2013</h2>
39 <dl>
40 <dt>This version:
42 <dd><a
43 href="http://dvcs.w3.org/hg/FXTF/raw-file/default/masking/index.html">http://dvcs.w3.org/hg/FXTF/raw-file/default/masking/index.html</a>
44 <!--http://www.w3.org/TR/2013/WD-css-masking-20130310/-->
46 <dt>Latest version:
48 <dd><a
49 href="http://www.w3.org/TR/css-masking/">http://www.w3.org/TR/css-masking/</a>
51 <dt>Editor's draft:
53 <dd><a
54 href="http://dvcs.w3.org/hg/FXTF/raw-file/default/masking/index.html">http://dvcs.w3.org/hg/FXTF/raw-file/default/masking/index.html</a>
56 <dt>Editors:
58 <dd class=vcard> <span class=fn>Dirk Schulze</span>, <span
59 class=org>Adobe Systems</span>, <span
60 class=email>dschulze@adobe.com</span>
62 <dd class=vcard> <span class=fn>Brian Birtles</span>, <span
63 class=org>Mozilla Japan</span>, <span
64 class=email>bbirtles@mozilla.com</span>
66 <dd class=vcard> <span class=fn><a
67 href="http://www.xanthir.com/contact/">Tab Atkins Jr.</a></span>, <span
68 class=org>Google, Inc.</span>
69 </dl>
70 <!--begin-copyright-->
71 <p class=copyright><a
72 href="http://www.w3.org/Consortium/Legal/ipr-notice#Copyright"
73 rel=license>Copyright</a> © 2013 <a href="http://www.w3.org/"><abbr
74 title="World Wide Web Consortium">W3C</abbr></a><sup>®</sup> (<a
75 href="http://www.csail.mit.edu/"><abbr
76 title="Massachusetts Institute of Technology">MIT</abbr></a>, <a
77 href="http://www.ercim.eu/"><abbr
78 title="European Research Consortium for Informatics and Mathematics">ERCIM</abbr></a>,
79 <a href="http://www.keio.ac.jp/">Keio</a>, <a
80 href="http://ev.buaa.edu.cn/">Beihang</a>), All Rights Reserved. W3C <a
81 href="http://www.w3.org/Consortium/Legal/ipr-notice#Legal_Disclaimer">liability</a>,
82 <a
83 href="http://www.w3.org/Consortium/Legal/ipr-notice#W3C_Trademarks">trademark</a>
84 and <a
85 href="http://www.w3.org/Consortium/Legal/copyright-documents">document
86 use</a> rules apply.</p>
87 <!--end-copyright-->
88 <hr title="Separator for header">
89 </div>
91 <h2 class="no-num no-toc" id=abstract>Abstract</h2>
93 <p> CSS Masking provides two means for partially or fully hiding portions
94 of visual elements: masking and clipping.
96 <p> Masking describes how to use another graphical element or image as a
97 luminance or alpha mask. Typically, rendering an element via CSS or SVG
98 can conceptually described as if the element, including its children, are
99 drawn into a buffer and then that buffer is composited into the element's
100 parent. Luminance and alpha masks influence the transparency of this
101 buffer before the compositing stage.
103 <p> Clipping describes the visible region of visual elements. The region
104 can be described by using certain SVG graphics elements or basic shapes.
105 Anything outside of this region is not rendered.
107 <h2 class="no-num no-toc" id=status>Status of this document</h2>
108 <!--begin-status-->
110 <p>This is a public copy of the editors' draft. It is provided for
111 discussion only and may change at any moment. Its publication here does
112 not imply endorsement of its contents by W3C. Don't cite this document
113 other than as work in progress.
115 <p>The (<a
116 href="http://lists.w3.org/Archives/Public/public-fx/">archived</a>) public
117 mailing list <a href="mailto:public-fx@w3.org">public-fx@w3.org</a> (see
118 <a href="http://www.w3.org/Mail/Request">instructions</a>) is preferred
119 for discussion of this specification. When sending e-mail, please put the
120 text “css-masking” in the subject, preferably like this:
121 “[<!---->css-masking<!---->] <em>…summary of comment…</em>”
123 <p>This document was produced by the <a
124 href="http://www.w3.org/Style/CSS/members">CSS Working Group</a> (part of
125 the <a href="http://www.w3.org/Style/">Style Activity</a>) and the <a
126 href="http://www.w3.org/Graphics/SVG/">SVG Working Group</a> (part of the
127 <a href="http://www.w3.org/Graphics/">Graphics Activity</a>).
129 <p>This document was produced by groups operating under the <a
130 href="http://www.w3.org/Consortium/Patent-Policy-20040205/">5 February
131 2004 W3C Patent Policy</a>. W3C maintains a <a
132 href="http://www.w3.org/2004/01/pp-impl/32061/status"
133 rel=disclosure>public list of any patent disclosures (CSS)</a> and a <a
134 href="http://www.w3.org/2004/01/pp-impl/19480/status"
135 rel=disclosure>public list of any patent disclosures (SVG)</a> made in
136 connection with the deliverables of each group; these pages also include
137 instructions for disclosing a patent. An individual who has actual
138 knowledge of a patent which the individual believes contains <a
139 href="http://www.w3.org/Consortium/Patent-Policy-20040205/#def-essential">Essential
140 Claim(s)</a> must disclose the information in accordance with <a
141 href="http://www.w3.org/Consortium/Patent-Policy-20040205/#sec-Disclosure">section
142 6 of the W3C Patent Policy</a>.</p>
143 <!--end-status-->
145 <h2 class="no-num no-toc" id=contents> Table of contents</h2>
146 <!--begin-toc-->
148 <ul class=toc>
149 <li><a href="#intro"><span class=secno>1. </span> Introduction </a>
151 <li><a href="#placement"><span class=secno>2. </span>Module
152 interactions</a>
154 <li><a href="#values"><span class=secno>3. </span>Values</a>
156 <li><a href="#definitions"><span class=secno>4. </span>Definitions</a>
158 <li><a href="#the-mask-rendering-model"><span class=secno>5. </span>The
159 Mask Rendering Model</a>
160 <ul class=toc>
161 <li><a href="#layering"><span class=secno>5.1. </span>Layering Multiple
162 Mask Images</a>
164 <li><a href="#MaskValues"><span class=secno>5.2. </span>Calculating mask
165 values</a>
166 </ul>
168 <li><a href="#masking"><span class=secno>6. </span>Mask</a>
169 <ul class=toc>
170 <li><a href="#the-mask-image"><span class=secno>6.1. </span>The ‘<code
171 class=property>mask-image</code>’ property</a>
173 <li><a href="#the-mask-source-type"><span class=secno>6.2. </span>The
174 ‘<code class=property>mask-source-type</code>’ property</a>
176 <li><a href="#the-mask-repeat"><span class=secno>6.3. </span>The
177 ‘<code class=property>mask-repeat</code>’ property</a>
179 <li><a href="#the-mask-position"><span class=secno>6.4. </span>The
180 ‘<code class=property>mask-position</code>’ property</a>
182 <li><a href="#the-mask-clip"><span class=secno>6.5. </span>The ‘<code
183 class=property>mask-clip</code>’ property</a>
185 <li><a href="#the-mask-origin"><span class=secno>6.6. </span>The
186 ‘<code class=property>mask-origin</code>’ property</a>
188 <li><a href="#the-mask-size"><span class=secno>6.7. </span>The ‘<code
189 class=property>mask-size</code>’ property</a>
191 <li><a href="#mask-property"><span class=secno>6.8. </span>The ‘<code
192 class=property>mask</code>’ property</a>
194 <li><a href="#the-mask-type"><span class=secno>6.9. </span>The ‘<code
195 class=property>mask-type</code>’ property</a>
197 <li><a href="#MaskElement"><span class=secno>6.10. </span>The <span
198 class=element-name>‘<code class=property>mask</code>’</span>
199 element</a>
200 </ul>
202 <li><a href="#mask-box-image"><span class=secno>7. </span>Mask Box
203 Image</a>
204 <ul class=toc>
205 <li><a href="#the-mask-box-image-source"><span class=secno>7.1.
206 </span>The ‘<code class=property>mask-box-image-source</code>’
207 property</a>
209 <li><a href="#the-mask-box-image-slice"><span class=secno>7.2.
210 </span>The ‘<code class=property>mask-box-image-slice</code>’
211 property</a>
213 <li><a href="#the-mask-box-image-width"><span class=secno>7.3.
214 </span>The ‘<code class=property>mask-box-image-width</code>’
215 property</a>
217 <li><a href="#the-mask-box-image-outset"><span class=secno>7.4.
218 </span>The ‘<code class=property>mask-box-image-outset</code>’
219 property</a>
221 <li><a href="#the-mask-box-image-repeat"><span class=secno>7.5.
222 </span>The ‘<code class=property>mask-box-image-repeat</code>’
223 property</a>
225 <li><a href="#the-mask-box-image"><span class=secno>7.6. </span>The
226 ‘<code class=property>mask-box-image</code>’ property</a>
228 <li><a href="#masking-with-the-mask-box-image"><span class=secno>7.7.
229 </span>Masking with the mask-box-image</a>
230 </ul>
232 <li><a href="#clipping-paths"><span class=secno>8. </span>Clipping
233 paths</a>
234 <ul class=toc>
235 <li><a href="#the-clip-path"><span class=secno>8.1. </span>The ‘<code
236 class=property>clip-path</code>’ property</a>
238 <li><a href="#the-clip-rule"><span class=secno>8.2. </span>The ‘<code
239 class=property>clip-rule</code>’ property</a>
241 <li><a href="#clip-property"><span class=secno>8.3. </span>The ‘<code
242 class=property>clip</code>’ property</a>
244 <li><a href="#ClipPathElement"><span class=secno>8.4. </span>The
245 ‘<code class=property>clipPath</code>’ element</a>
247 <li><a href="#clipPath-geometry"><span class=secno>8.5. </span>Clipping
248 paths, geometry, and pointer events</a>
249 </ul>
251 <li><a href="#security"><span class=secno>9. </span>Security</a>
252 <ul class=toc>
253 <li><a href="#origin-restrictions"><span class=secno>9.1. </span>Origin
254 Restrictions</a>
255 </ul>
257 <li><a href="#DOMInterfaces"><span class=secno>10. </span>DOM
258 interfaces</a>
259 <ul class=toc>
260 <li><a href="#InterfaceSVGClipPathElement"><span class=secno>10.1.
261 </span>Interface SVGClipPathElement</a>
263 <li><a href="#InterfaceSVGMaskElement"><span class=secno>10.2.
264 </span>Interface SVGMaskElement</a>
265 </ul>
267 <li class=no-num><a href="#references"> References</a>
268 <ul class=toc>
269 <li class=no-num><a href="#normative-references"> Normative
270 references</a>
272 <li class=no-num><a href="#other-references"> Other references</a>
273 </ul>
275 <li class=no-num><a href="#index"> Index</a>
277 <li class=no-num><a href="#property-index"> Property index</a>
278 </ul>
279 <!--end-toc-->
281 <h2 id=intro><span class=secno>1. </span> Introduction</h2>
283 <p> With CSS Masking it is possible to specify another graphics element,
284 shape or file to be used as clipping region or an luminance or alpha mask
285 for compositing the current object into the background.
287 <p> A mask is applied using the ‘<a href="#mask"><code
288 class=property>mask</code></a>’, ‘<a href="#mask-image"><code
289 class=property>mask-image</code></a>’ or ‘<a
290 href="#mask-box-image0"><code class=property>mask-box-image</code></a>’
291 properties. The mask source may be defined using a <a class=element-name
292 href="#MaskElement">‘<code class=property>mask</code>’</a> element
293 referenced by the ‘<a href="#mask"><code
294 class=property>mask</code></a>’ property. Alternatively, for many simple
295 uses, the ‘<a href="#mask-image"><code
296 class=property>mask-image</code></a>’ property may refer directly to
297 graphical elements or images to be used as mask forgoing the need for an
298 explicit <a class=element-name href="#MaskElement">‘<code
299 class=property>mask</code>’</a> element. The ‘<a href="#mask"><code
300 class=property>mask</code></a>’ property is also a shorthand for other
301 masking properties. ‘<a href="#mask-box-image0"><code
302 class=property>mask-box-image</code></a>’ splits a mask image into 9
303 pieces. The pieces may be sliced, scaled and stretched in various ways to
304 fit the size of the mask image area.
306 <p> The effect of applying a mask is as if the mask images or mask source
307 elements are rendered into an off-screen image which has been initialized
308 to transparent black. The graphical object to which the mask is applied
309 will be painted onto the background through the mask, thus completely or
310 partially masking out parts of the graphical object.
312 <p> Clipping defines a visible region of a visual element. The region can
313 be specified with SVG <a
314 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/intro.html#TermGraphicsElement">graphics
315 element</a> or basic shapes. Everything outside of a region does not get
316 rendered.
318 <div class=example>
319 <div class=figure> <img alt="Example Mask" height=260px
320 src="images/luminance-mask.svg" width=655px>
321 <p class=caption> A luminance mask (middle) is applied on a shape filled
322 with a gradient (left). This results in a masked shape (right).
323 </div>
324 </div>
326 <h2 id=placement><span class=secno>2. </span>Module interactions</h2>
328 <p>This specification defines a set of CSS properties that affect the
329 visual rendering of elements to which those properties are applied; these
330 effects are applied after elements have been sized and positioned
331 according to the <a href="http://www.w3.org/TR/CSS2/visuren.html"
332 title="Visual formatting model">Visual formatting model</a> from <a
333 href="#CSS21" rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>. Some values of
334 these properties result in the creation of a <a
335 href="http://www.w3.org/TR/CSS2/visuren.html#containing-block"
336 title="Visual formatting model">containing block</a>, and/or the creation
337 of a <a href="http://www.w3.org/TR/CSS2/visuren.html#z-index"
338 title="Visual formatting model">stacking context</a>.
340 <p> Definitions of CSS properties and values in this specification comply
341 with defintions in CSS Backgrounds and Borders <a href="#CSS3BG"
342 rel=biblioentry>[CSS3BG]<!--{{!CSS3BG}}--></a>. To avoid redundancy, this
343 specification relies on descriptions and definitions of CSS Backgrounds
344 and Borders. Every reference will be marked clearly. The following terms
345 in CSS Backgrounds and Borders have the following meaning in this
346 specification:
348 <table class=data id=term-matching>
349 <thead>
350 <tr>
351 <th>Term in <a href="#CSS3BG"
352 rel=biblioentry>[CSS3BG]<!--{{!CSS3BG}}--></a>
354 <th>Term in CSS Masking
356 <tbody>
357 <tr>
358 <th>background images
360 <td>mask images
362 <tr>
363 <th>background painting area
365 <td>mask painting area
367 <tr>
368 <th>background-size
370 <td>mask-size
372 <tr>
373 <th>background-position
375 <td>mask-position
377 <tr>
378 <th>background positioning area
380 <td>mask positioning area
382 <tr>
383 <th>border image area
385 <td>mask box image area
386 </table>
388 <p> Some property and element definitions in this specification require an
389 SVG 1.1 implementation <a href="#SVG11"
390 rel=biblioentry>[SVG11]<!--{{!SVG11}}--></a>. UAs without support for SVG
391 must not implement the ‘<a href="#mask-type"><code
392 class=property>mask-type</code></a>’ and ‘<a href="#clip-rule"><code
393 class=property>clip-rule</code></a>’ properties as well as the <a
394 class=element-name href="#MaskElement">‘<code
395 class=property>mask</code>’</a> and <a class=element-name
396 href="#ClipPathElement">‘<code class=property>clipPath</code>’</a>
397 elements. Furthermore, the ‘<a href="#mask"><code
398 class=property>mask</code></a>’ and ‘<a href="#clip-path"><code
399 class=property>clip-path</code></a>’ properties must not support
400 references to <a class=element-name href="#MaskElement">‘<code
401 class=property>mask</code>’</a> and <a class=element-name
402 href="#ClipPathElement">‘<code class=property>clipPath</code>’</a>
403 elements.
405 <h2 id=values><span class=secno>3. </span>Values</h2>
407 <p> This specification follows the <a
408 href="http://www.w3.org/TR/CSS21/about.html#property-defs">CSS property
409 definition conventions</a> from <a href="#CSS21"
410 rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>. Value types not defined in
411 this specification are defined in CSS Values and Units Module Level 3 <a
412 href="#CSS3VAL" rel=biblioentry>[CSS3VAL]<!--{{!CSS3VAL}}--></a>.
414 <p> In addition to the property-specific values listed in their
415 definitions, all properties defined in this specification also accept the
416 <a
417 href="http://www.w3.org/TR/CSS21/cascade.html#value-def-inherit">inherit</a>
418 keyword as their property value. For readability it has not been repeated
419 explicitly.
421 <h2 id=definitions><span class=secno>4. </span>Definitions</h2>
423 <p> When used in this specification, terms have the meanings assigned in
424 this section.
426 <dl>
427 <dt id=TermClientBoundingRect><dfn id=bounding-client-rect>bounding client
428 rect</dfn>
430 <dd>
431 <p> The union of all border boxes for the element that has an associated
432 CSS layout box and is not in the <code>http://www.w3.org/2000/svg</code>
433 namespace and it's descendant elements. Or the object bounding box <a
434 href="#SVG11" rel=biblioentry>[SVG11]<!--{{!SVG11}}--></a>, if the
435 element does not have an associated CSS layout box and is in the
436 <code>http://www.w3.org/2000/svg</code> namespace (See <a
437 href="http://www.w3.org/TR/cssom-view/#dom-element-getboundingclientrect">getBoundingClientRect</a>
438 <a href="#CSSOM-VIEW"
439 rel=biblioentry>[CSSOM-VIEW]<!--{{CSSOM-VIEW}}--></a>).
441 <dt id=TermLocalCoordinateSystem><dfn id=local-coordinate-system>local
442 coordinate system</dfn>
444 <dd>
445 <p> In general, a coordinate system defines locations and distances on
446 the current canvas. The current local coordinate system (also user
447 coordinate system) is the coordinate system that is currently active and
448 which is used to define how coordinates and lengths are located and
449 computed, respectively, on the current canvas <a href="#CSS3-TRANSFORMS"
450 rel=biblioentry>[CSS3-TRANSFORMS]<!--{{CSS3-TRANSFORMS}}--></a>.
452 <p> For elements that have an associated CSS layout box, the current user
453 coordinate system has its origin at the top-left corner of the <a
454 class=term href="#bounding-client-rect">bounding client rect</a> and one
455 unit equals one CSS pixel. The viewport for resolving percentage values
456 is defined by the width and height of the <a class=term
457 href="#bounding-client-rect">bounding client rect</a>.
459 <p> If the element does not have an associated CSS layout box and is in
460 the <code>http://www.w3.org/2000/svg</code> namespace, the current local
461 coordinate system has its origin at the top-left corner of the element's
462 nearest viewport.
464 <dt id=TermUserCoordinateSystem><dfn id=user-coordinate-system>user
465 coordinate system</dfn>
467 <dd> See definition of <a class=term href="#local-coordinate-system">local
468 coordinate system</a>.
470 <dt id=TermObjectBoundingBoxUnits><dfn id=object-bounding-box-units>object
471 bounding box units</dfn>
473 <dd> The <a class=term href="#bounding-client-rect">bounding client
474 rect</a> defines the coordinate system in which to resolve values, as
475 defined in <a
476 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/coords.html#ObjectBoundingBoxUnits">object
477 bounding box units</a> <a href="#SVG11"
478 rel=biblioentry>[SVG11]<!--{{!SVG11}}--></a>.
480 <dt id=TermMask><dfn id=mask0>mask</dfn>
482 <dd> An off-screen image which has been initialized to transparent black.
483 The graphical object to which the mask is applied will be painted onto
484 the background through the mask, thus completely or partially masking out
485 parts of the graphical object.
487 <dt id=TermMaskSource><dfn id=mask-source>mask source</dfn>
489 <dd> A mask defined by a <a class=element-name
490 href="#MaskElement">‘<code class=property>mask</code>’</a> element.
492 <dt id=TermClippingPath>clipping path
494 <dd> A combination of the SVG elements <a class=element-name
495 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/paths.html#PathElement">‘<code
496 class=property>path</code>’</a>, <a class=element-name
497 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/text.html#TextElement">‘<code
498 class=property>text</code>’</a> and <a
499 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/intro.html#TermBasicShapeElement">basic
500 shapes</a> which serve as the outline of a (in the absence of
501 anti-aliasing) 1-bit <a href="#TermMask">mask</a>, where everything on
502 the "inside" of the outline is allowed to show through but everything on
503 the outside is masked out. See ‘<a href="#clip-path"><code
504 class=property>clip-path</code></a>’.
505 </dl>
507 <h2 id=the-mask-rendering-model><span class=secno>5. </span>The Mask
508 Rendering Model</h2>
510 <p> The application of the ‘<a href="#clip-path"><code
511 class=property>clip-path</code></a>’, ‘<a href="#mask"><code
512 class=property>mask</code></a>’ or ‘<a href="#mask-image"><code
513 class=property>mask-image</code></a>’ properties to an element formatted
514 with the CSS box model establishes a stacking context the same way that
515 CSS ‘<code class=property>opacity</code>’ does, and all the element's
516 descendants are rendered together as a group with the masking applied to
517 the group as a whole.
519 <p> The ‘<a href="#mask"><code class=property>mask</code></a>’ and
520 ‘<a href="#mask-image"><code class=property>mask-image</code></a>’
521 properties have no effect on the geometry of the target element's CSS
522 boxes.
524 <p> The compositing model follows the SVG compositing model <a
525 href="#SVG11" rel=biblioentry>[SVG11]<!--{{!SVG11}}--></a>: first any
526 filter effect is applied, then any clipping, masking and opacity. These
527 effects all apply after any other CSS effects such as ‘<code
528 class=property>border</code>’. As per SVG, the application of ‘<a
529 href="#mask"><code class=property>mask</code></a>’ or ‘<a
530 href="#mask-image"><code class=property>mask-image</code></a>’ has no
531 effect on hit-testing.
533 <h3 id=layering><span class=secno>5.1. </span>Layering Multiple Mask Images</h3>
535 <p>The mask of a box can have multiple <span class=index
536 id=layers>layers</span>. The number of layers is determined by the number
537 of comma-separated values in the ‘<a href="#mask-image"><code
538 class=property>mask-image</code></a>’ property. Note that a value of
539 ‘<a href="#none"><code class=property>none</code></a>’ still creates a
540 layer. See <a
541 href="http://www.w3.org/TR/css3-background/#layering">Layering Multiple
542 Background Images</a> <a href="#CSS3BG"
543 rel=biblioentry>[CSS3BG]<!--{{!CSS3BG}}--></a>.
545 <p>The first layer is the layer closest to the user, the next one is
546 painted behind the first, and so on. All mask images are transformed to
547 alpha masks (if necessary) and combined by compositing on the <a
548 href="#TermMask">mask</a>.
550 <h3 id=MaskValues><span class=secno>5.2. </span>Calculating mask values</h3>
552 <p> A mask may be interpreted using one of two different methods with
553 regards to calculating the mask values that will be multiplied with the
554 target alpha values.
556 <p> The first and simplest method of calculating the mask values is to use
557 the alpha channel of the mask source. In this case the mask value at a
558 given point is simply the value of the alpha channel at that point. The
559 color channels do not contribute to the mask value.
561 <p> The second method of calculating the mask values is to use the
562 luminance of the mask source. In this case the mask value at a given point
563 is computed from the color channel values and alpha channel value using
564 the following procedure.
566 <ol>
567 <li>Compute a luminance value from the color channel values.
568 <ul>
569 <li> If the computed value of ‘<code
570 class=property>color-interpolation</code>’ on the <a
571 class=element-name href="#MaskElement">‘<code
572 class=property>mask</code>’</a> element is ‘<code
573 class=property>linearRGB</code>’, convert the original image color
574 values (potentially in the sRGB color space) to the linear RGB color
575 space.
577 <li>Then, using non-premultiplied RGB color values, apply the
578 luminance-to-alpha coefficients (as defined in the <a
579 class=element-name
580 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/filters.html#feColorMatrixElement">‘<code
581 class=property>feColorMatrix</code>’</a> filter primitive <a
582 href="#SVG11" rel=biblioentry>[SVG11]<!--{{!SVG11}}--></a>) to convert
583 the RGB color values to luminance values.
584 </ul>
586 <li>Multiply the computed luminance value by the corresponding alpha value
587 to produce the mask value.
588 </ol>
590 <p>Regardless of the method used, the procedure for calculating mask values
591 assumes the content of the mask is a four-channel RGBA graphics object.
592 For other types of graphics objects, special handling is required as
593 follows.
595 <p>For a three-channel RGB graphics object that is used in a mask (e.g.,
596 when referencing a three-channel image file), the effect is as if the
597 object were converted into a four-channel RGBA image with the alpha
598 channel uniformly set to 1.
600 <p>For a single-channel image that is used in a mask (e.g., when
601 referencing a single-channel grayscale image file), the effect is as if
602 the object were converted into a four-channel RGBA image, where the single
603 channel from the referenced object is used to compute the three color
604 channels and the alpha channel is uniformly set to 1.
606 <p class=note>Note that when referencing a grayscale image file, the
607 transfer curve relating the encoded grayscale values to linear light
608 values must be taken into account when computing the color channels.
610 <p class=note>Note that SVG <a
611 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/intro.html#TermGraphicsElement">graphics
612 elements</a> (e.g., <a class=element-name
613 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/shapes.html#CircleElement">‘<code
614 class=property>circle</code>’</a> or <a class=element-name
615 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/text.html#TextElement">‘<code
616 class=property>text</code>’</a>) are all treated as four-channel RGBA
617 images for the purposes of masking operations.
619 <p>The effect of a mask is identical to what would have happened if there
620 were no mask but instead the alpha channel of the given object were
621 multiplied with the mask's resulting mask values.
623 <h2 id=masking><span class=secno>6. </span>Mask</h2>
625 <h3 id=the-mask-image><span class=secno>6.1. </span>The ‘<a
626 href="#mask-image"><code class=property>mask-image</code></a>’ property</h3>
628 <table class=propdef>
629 <tbody>
630 <tr>
631 <th>Name:
633 <td><dfn id=mask-image>mask-image</dfn>
635 <tr>
636 <th><a href="#values">Value</a>:
638 <td><a href="#ltmask-referencegt"><var><mask-reference></var></a>
640 <tr>
641 <th>Initial:
643 <td>none
645 <tr>
646 <th>Applies to:
648 <td>All elements. In SVG, it applies to <a
649 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/intro.html#TermContainerElement">container
650 elements</a> and <a
651 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/intro.html#TermGraphicsElement">graphics
652 elements</a>
654 <tr>
655 <th>Inherited:
657 <td>no
659 <tr>
660 <th>Percentages:
662 <td>N/A
664 <tr>
665 <th>Media:
667 <td>visual
669 <tr>
670 <th>Computed value:
672 <td>as specified, but with URIs made absolute
674 <tr>
675 <th>Animatable:
677 <td>no
678 </table>
680 <p>This property sets the mask image(s) or the mask source of an element.
681 Images are drawn with the first specified one on top (closest to the user)
682 and each subsequent image behind the previous one. Where:
684 <pre class=prod><var><dfn
685 id=ltmask-referencegt><mask-reference></dfn></var> = <a
686 href="#ltmask-imagegt"><var><mask-image></var></a># | <a
687 href="#ltmask-elementgt"><var><mask-element></var></a></pre>
689 <pre class=prod><var><dfn
690 id=ltmask-imagegt><mask-image></dfn></var> = <a
691 href="#ltimagegt"><var><image></var></a> | none </pre>
693 <pre class=prod><var><dfn
694 id=ltmask-elementgt><mask-element></dfn></var> = <a
695 href="#lturlgt"><var><url></var></a> | <var>child</var> | <a
696 href="#ltchild-selectorgt"><var><child-selector></var></a></pre>
698 <pre class=prod><dfn
699 id=ltchild-selectorgt><child-selector></dfn> = select(<a
700 href="#ltcompound-selectorgt"><var><compound-selector></var></a>#)</pre>
702 <p class=note>A <a
703 href="#ltmask-elementgt"><var><mask-element></var></a> can just be
704 specified as a single value and can not contibute to a list of <a
705 href="#ltmask-referencegt"><var><mask-reference></var></a> values.
706 Otherwise the specified value of the property is invalid. (See examples
707 below.)
709 <dl>
710 <dt> <dfn id=lturlgt>‘<code class=css><url></code>’</dfn>
712 <dd> A URL reference to a <a class=element-name
713 href="#MaskElement">‘<code class=property>mask</code>’</a> element
714 (for example ‘<code class=css>url(commonmasks.svg#mask)</code>’) or
715 an <a href="#ltimagegt"><var><image></var></a>.
717 <dt>‘<code class=css>child</code>’
719 <dd> A keyword to indicate that the last direct sibling <a
720 class=element-name href="#MaskElement">‘<code
721 class=property>mask</code>’</a> element of the element the ‘<a
722 href="#mask-image"><code class=property>mask-image</code></a>’ property
723 is applied should be used as the mask source. It is equivalent to
724 ‘<code class=css>select(mask:last-of-type)</code>’.
726 <dt>‘<a href="#ltchild-selectorgt"><code
727 class=css><child-selector></code></a>’
729 <dd> A comma-separated list of <a
730 href="http://dev.w3.org/csswg/selectors4/#compound">compound
731 selector</a>s scoped at the element to which the ‘<a
732 href="#mask-image"><code class=property>mask-image</code></a>’ property
733 is applied. The first matching element in <a
734 href="http://www.w3.org/TR/2012/WD-dom-20120405/#concept-tree-order">tree
735 order</a> (as defined in <a href="#DOM"
736 rel=biblioentry>[DOM]<!--{{!DOM}}--></a>) as a result of evaluating the
737 list of selectors is taken as the mask source. If there are no matching
738 elements the mask source is invalid.
740 <dt><dfn id=ltcompound-selectorgt>‘<code
741 class=css><compound-selector></code>’</dfn>
743 <dd> A <a href="http://dev.w3.org/csswg/selectors4/#compound">compound
744 selector</a> as defined in <a href="#SELECTORS4"
745 rel=biblioentry>[SELECTORS4]<!--{{!SELECTORS4}}--></a>.
747 <dd>
749 <dt><dfn id=ltimagegt><image></dfn>
751 <dd> A 2D image. (See <a href="#CSS3-IMAGES"
752 rel=biblioentry>[CSS3-IMAGES]<!--{{!CSS3-IMAGES}}--></a>.)
754 <dt><dfn id=none>‘<code class=css>none</code>’</dfn>
756 <dd> A value of ‘<a href="#none"><code class=css>none</code></a>’
757 counts as an image layer but does not mask the element.
758 </dl>
760 <p class=note>If the URI in the ‘<code class=css>url()</code>’ function
761 has a fragment identifier, the <a
762 href="#ltmask-referencegt"><var><mask-reference></var></a> is
763 treated as <a
764 href="#ltmask-elementgt"><var><mask-element></var></a>, otherwise as
765 <a href="#ltmask-imagegt"><var><mask-image></var></a>.
767 <p>An invalid or non-existent mask source is ignored and no masking is
768 applied.
770 <p>A mask image that is empty (zero width or zero height), that fails to
771 download, is non-existent, or that cannot be displayed (e.g. because it is
772 not in a supported image format) is ignored. No masking is applied.
774 <p>See the section <a href="#layering">“Layering multiple mask
775 images”</a> for how ‘<a href="#mask-image"><code
776 class=property>mask-image</code></a>’ interacts with other
777 comma-separated mask properties to form each mask image layer.
779 <div class=example>
780 <p>Some examples specifying mask images:
782 <pre>
783 body { mask-image: linear-gradient(black 0%, transparent 100%) }
784 p { mask-image: none }
785 div { mask-image: url(tl.png), url(tr.png) }
786 </pre>
788 <p>Some examples of a specified mask source:
790 <pre>
791 img { mask-image: url(#mask) }
792 span { mask-image: url(resources.svg#mask2) }
793 </pre>
795 <p>Examples of <i>invalid</i> mask source usages:
797 <pre>
798 p { mask-image: url(#mask), url(tl.png) }
799 img { mask-image: url(#mask), url(resources.svg#mask2) }
800 </pre>
802 <p>A <a href="#ltmask-elementgt"><var><mask-element></var></a> value
803 that is either used together with another <a
804 href="#ltmask-elementgt"><var><mask-element></var></a> value or an
805 <a href="#ltmask-imagegt"><var><mask-image></var></a> value makes
806 the whole specified ‘<a href="#mask-image"><code
807 class=property>mask-image</code></a>’ value list invalid.
808 </div>
810 <h3 id=the-mask-source-type><span class=secno>6.2. </span>The ‘<a
811 href="#mask-source-type"><code
812 class=property>mask-source-type</code></a>’ property</h3>
814 <table class=propdef>
815 <tbody>
816 <tr>
817 <th>Name:
819 <td><dfn id=mask-source-type>mask-source-type</dfn>
821 <tr>
822 <th><a href="#values">Value</a>:
824 <td><a href="#ltsource-typegt"><var><source-type></var></a>#
826 <tr>
827 <th>Initial:
829 <td>auto
831 <tr>
832 <th>Applies to:
834 <td>All elements. In SVG, it applies to <a
835 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/intro.html#TermContainerElement">container
836 elements</a> and <a
837 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/intro.html#TermGraphicsElement">graphics
838 elements</a>
840 <tr>
841 <th>Inherited:
843 <td>no
845 <tr>
846 <th>Percentages:
848 <td>N/A
850 <tr>
851 <th>Media:
853 <td>visual
855 <tr>
856 <th>Computed value:
858 <td>as specified
860 <tr>
861 <th>Animatable:
863 <td>no
864 </table>
866 <p>The ‘<a href="#mask-source-type"><code
867 class=property>mask-source-type</code></a>’ property indicates whether
868 the <a href="#ltmask-referencegt"><var><mask-reference></var></a> is
869 treated as luminance mask or alpha mask. (See <a
870 href="#MaskValues">Calculating mask values</a>.)
872 <pre class=prod><dfn
873 id=ltsource-typegt><var><source-type></var></dfn> = alpha | luminance | auto</pre>
875 <p>Values have the following meanings:
877 <dl>
878 <dt><dfn id=alpha>‘<code class=css>alpha</code>’</dfn>
880 <dd> A value of ‘<a href="#alpha"><code class=css>alpha</code></a>’
881 indicates that the alpha values of the mask image should be used as the
882 mask values. See <a href="#MaskValues">Calculating mask values</a>.
884 <dt><dfn id=luminance>‘<code class=css>luminance</code>’</dfn>
886 <dd> A value of ‘<a href="#luminance"><code
887 class=css>luminance</code></a>’ indicates that the luminance values of
888 the mask image should be used as the mask values. See <a
889 href="#MaskValues">Calculating mask values</a>.
891 <dt><dfn id=auto>‘<code class=css>auto</code>’</dfn>
893 <dd>
894 <p> If the <a
895 href="#ltmask-referencegt"><var><mask-reference></var></a> of the
896 ‘<a href="#mask-image"><code class=property>mask-image</code></a>’
897 property is of type <a
898 href="#ltmask-imagegt"><var><mask-image></var></a> the luminance
899 values of the mask image should be used as the mask values.
901 <p> If the <a
902 href="#ltmask-referencegt"><var><mask-reference></var></a> of the
903 ‘<a href="#mask-image"><code class=property>mask-image</code></a>’
904 property is of type <a
905 href="#ltmask-elementgt"><var><mask-element></var></a> the alpha
906 values of the mask image should be used as the mask values.
907 </dl>
909 <div class=example>
910 <p> In the following example, the ‘<a href="#mask-type"><code
911 class=property>mask-type</code></a>’ property sets the mask type value
912 for the <a class=element-name href="#MaskElement">‘<code
913 class=property>mask</code>’</a> element to ‘<a href="#alpha"><code
914 class=css>alpha</code></a>’. The ‘<a href="#mask-image"><code
915 class=property>mask-image</code></a>’ property has a reference to this
916 <a class=element-name href="#MaskElement">‘<code
917 class=property>mask</code>’</a> element and the ‘<a
918 href="#mask-source-type"><code
919 class=property>mask-source-type</code></a>’ property has a value of
920 ‘<a href="#luminance"><code class=css>luminance</code></a>’. The
921 ‘<a href="#mask-source-type"><code
922 class=property>mask-source-type</code></a>’ property will override the
923 definition of ‘<a href="#mask-type"><code
924 class=property>mask-type</code></a>’ to ‘<a href="#luminance"><code
925 class=css>luminance</code></a>’.
927 <pre>
928 <mask id="SVGMask" mask-type="alpha" maskContentUnits="objectBoundingBox">
929 <radialGradient id="radialFill">
930 <stop stop-color="white" offset="0"/>
931 <stop stop-color="black" offset="1"/>
932 </radialGradient>
933 <circle fill="url(#radialFill)" cx="0.5" cy="0.5" r="0.5"/>
934 </mask>
936 <style>
937 rect {
938 mask-image: url(#SVGMask);
939 mask-source-type: luminance;
940 }
941 </style>
943 <rect width="200" height="200" fill="green"/>
944 </pre>
945 </div>
947 <h3 id=the-mask-repeat><span class=secno>6.3. </span>The ‘<a
948 href="#mask-repeat"><code class=property>mask-repeat</code></a>’
949 property</h3>
951 <table class=propdef>
952 <tbody>
953 <tr>
954 <th>Name:
956 <td><dfn id=mask-repeat>mask-repeat</dfn>
958 <tr>
959 <th><a href="#values">Value</a>:
961 <td><a href="#ltrepeat-stylegt"><var><repeat-style></var></a>#
963 <tr>
964 <th>Initial:
966 <td>repeat
968 <tr>
969 <th>Applies to:
971 <td>All elements. In SVG, it applies to <a
972 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/intro.html#TermContainerElement">container
973 elements</a> and <a
974 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/intro.html#TermGraphicsElement">graphics
975 elements</a>
977 <tr>
978 <th>Inherited:
980 <td>no
982 <tr>
983 <th>Percentages:
985 <td>N/A
987 <tr>
988 <th>Media:
990 <td>visual
992 <tr>
993 <th>Computed value:
995 <td>A list, each item consisting of: two keywords, one per dimension
997 <tr>
998 <th>Animatable:
1000 <td>no
1001 </table>
1003 <p>Specifies how mask images are tiled after they have been <a
1004 href="#the-mask-size">sized</a> and <a
1005 href="#the-mask-position">positioned</a>. Where
1007 <pre class=prod><dfn
1008 id=ltrepeat-stylegt><var><repeat-style></var></dfn> = repeat-x | repeat-y | [repeat | space | round | no-repeat]{1,2}</pre>
1010 <p>See <a
1011 href="http://www.w3.org/TR/css3-background/#the-background-repeat">Tiling
1012 Images: the ‘<code class=property>background-repeat</code>’
1013 property</a> <a href="#CSS3BG"
1014 rel=biblioentry>[CSS3BG]<!--{{!CSS3BG}}--></a> for the defintions of the
1015 property values.
1017 <div class=example>
1018 <p style="display:none">Example(s):
1020 <pre>
1021 body {
1022 background-color: blue;
1023 mask-image: url(dot-mask.png) luminance;
1024 mask-repeat: space;
1025 }
1026 </pre>
1028 <div class=figure>
1029 <p><img alt="Image of an element with a dotted mask."
1030 src="images/mask-repeat.svg" style="border: solid black 1px;" width=240>
1032 <p class=caption>The effect of ‘<code class=property>space</code>’:
1033 the mask image of a dot is tiled to cover the whole <a class=index
1034 href="#mask-painting-area" id=mask-painting-area0>mask painting area</a>
1035 and the mask images are equally spaced.
1036 </div>
1037 </div>
1039 <p>See the section <a href="#layering">“Layering multiple mask
1040 images”</a> for how ‘<a href="#mask-repeat"><code
1041 class=property>mask-repeat</code></a>’ interacts with other
1042 comma-separated mask properties to form each mask image layer.
1044 <h3 id=the-mask-position><span class=secno>6.4. </span>The ‘<a
1045 href="#mask-position"><code class=property>mask-position</code></a>’
1046 property</h3>
1048 <table class=propdef>
1049 <tbody>
1050 <tr>
1051 <th>Name:
1053 <td><dfn id=mask-position>mask-position</dfn>
1055 <tr>
1056 <th><a href="#values">Value</a>:
1058 <td><a href="#ltpositiongt"><var><position></var></a>#
1060 <tr>
1061 <th>Initial:
1063 <td>0% 0%
1065 <tr>
1066 <th>Applies to:
1068 <td>All elements. In SVG, it applies to <a
1069 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/intro.html#TermContainerElement">container
1070 elements</a> and <a
1071 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/intro.html#TermGraphicsElement">graphics
1072 elements</a>
1074 <tr>
1075 <th>Inherited:
1077 <td>no
1079 <tr>
1080 <th>Percentages:
1082 <td>refer to size of <a class=index href="#mask-painting-area"
1083 id=mask-painting-area1>mask painting area</a> <em>minus</em> size of
1084 mask image; see text
1086 <tr>
1087 <th>Media:
1089 <td>visual
1091 <tr>
1092 <th>Computed value:
1094 <td>A list, each item consisting of: two keywords representing the
1095 origin and two offsets from that origin, each given as an absolute
1096 length (if given a <length>), otherwise as a percentage.
1098 <tr>
1099 <th>Animatable:
1101 <td>as <a
1102 href="http://dev.w3.org/csswg/css3-transitions/#animtype-repeatable-list">repeatable
1103 list</a> of <a
1104 href="http://dev.w3.org/csswg/css3-transitions/#animtype-simple-list">simple
1105 list</a> of <a
1106 href="http://dev.w3.org/csswg/css3-transitions/#animtype-lpcalc">length,
1107 percentage, or calc</a>
1108 </table>
1110 <p>Where
1112 <pre class=prod><dfn id=ltpositiongt><var><position></var></dfn> = [
1113 [ left | center | right | top | bottom | <var><percentage></var> | <var><length></var> ]
1114 |
1115 [ left | center | right | <var><percentage></var> | <var><length></var> ]
1116 [ top | center | bottom | <var><percentage></var> | <var><length></var> ]
1117 |
1118 [ center | [ left | right ] [ <var><percentage></var> | <var><length></var> ]? ] &&
1119 [ center | [ top | bottom ] [ <var><percentage></var> | <var><length></var> ]? ]
1120 ]</pre>
1122 <p>See <a
1123 href="http://www.w3.org/TR/css3-background/#the-background-position">Positioning
1124 Images: the ‘<code class=property>background-position</code>’
1125 property</a> <a href="#CSS3BG"
1126 rel=biblioentry>[CSS3BG]<!--{{!CSS3BG}}--></a> for the defintions of the
1127 property values.
1129 <div class=example>
1130 <p>In the example below, the (single) image is placed in the lower-right
1131 corner of the viewport.
1133 <pre>
1134 body {
1135 mask-image: url("logo.png");
1136 mask-position: 100% 100%;
1137 mask-repeat: no-repeat;
1138 }
1139 </pre>
1140 </div>
1142 <div class=example>
1143 <p>Mask positions can also be relative to other corners than the top left.
1144 E.g., the following puts the background image 10px from the bottom and
1145 3em from the right:
1147 <pre>mask-position: right 3em bottom 10px</pre>
1148 </div>
1150 <p>See the section <a href="#layering">“Layering multiple mask
1151 images”</a> for how ‘<a href="#mask-position"><code
1152 class=property>mask-position</code></a>’ interacts with other
1153 comma-separated mask properties to form each mask image layer.
1155 <h3 id=the-mask-clip><span class=secno>6.5. </span>The ‘<a
1156 href="#mask-clip"><code class=property>mask-clip</code></a>’ property</h3>
1158 <table class=propdef>
1159 <tbody>
1160 <tr>
1161 <th>Name:
1163 <td><dfn id=mask-clip>mask-clip</dfn>
1165 <tr>
1166 <th><a href="#values">Value</a>:
1168 <td><a href="#ltclip-boxgt"><var><clip-box></var></a>#
1170 <tr>
1171 <th>Initial:
1173 <td>border-box
1175 <tr>
1176 <th>Applies to:
1178 <td>All elements. In SVG, it applies to <a
1179 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/intro.html#TermContainerElement">container
1180 elements</a> and <a
1181 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/intro.html#TermGraphicsElement">graphics
1182 elements</a>
1184 <tr>
1185 <th>Inherited:
1187 <td>no
1189 <tr>
1190 <th>Percentages:
1192 <td>N/A
1194 <tr>
1195 <th>Media:
1197 <td>visual
1199 <tr>
1200 <th>Computed value:
1202 <td>as specified
1204 <tr>
1205 <th>Animatable:
1207 <td>no
1208 </table>
1210 <p>Determines the <dfn id=mask-painting-area>mask painting area</dfn>,
1211 which determines the area that is affected by the mask. The painted
1212 content of an element may be resricted to this area. The syntax of the
1213 property is given with
1215 <pre class=prod><dfn id=ltclip-boxgt><var><clip-box></var></dfn> = <a
1216 href="#ltboxgt"><var><box></var></a> | no-clip</pre>
1218 <pre class=prod><dfn
1219 id=ltboxgt><var><box></var></dfn> = border-box | padding-box | content-box</pre>
1221 <p>Values have the following meanings:
1223 <dl>
1224 <dt><dfn id=border-box title="''border-box''!!'mask-clip' value"> ‘<code
1225 class=css>border-box</code>’</dfn>
1227 <dd>The painted content is rectricted to (clipped to) the <span>border
1228 box</span> respectively <span>painting box</span> for objects without
1229 associated layout box.
1231 <dt><dfn id=padding-box title="''padding-box''!!'mask-clip' value">
1232 ‘<code class=css>padding-box</code>’</dfn>
1234 <dd>The painted content is rectricted to (clipped to) the <span>padding
1235 box.</span>
1237 <dt><dfn id=content-box title="''content-box''!!'mask-clip' value">
1238 ‘<code class=css>content-box</code>’</dfn>
1240 <dd>The painted content is rectricted to (clipped to) the <span>content
1241 box</span> respectively <span>object bounding box</span> <a href="#SVG11"
1242 rel=biblioentry>[SVG11]<!--{{!SVG11}}--></a> for objects without
1243 associated layout box.
1245 <dt><dfn id=no-clip title="''no-clip''!!'mask-clip' value"> ‘<code
1246 class=css>no-clip</code>’</dfn>
1248 <dd>The painted content is not restricted (not clipped). The <a
1249 href="#mask-painting-area">mask painting area</a> is set to the <a
1250 href="#bounding-client-rect">bounding client rect</a>.
1251 </dl>
1253 <p class=note>Note that there is no corresponding box for ‘<code
1254 class=css>padding-box</code>’ on objects without associated layout box
1255 and ‘<a href="#content-box0"><code class=css>content-box</code></a>’
1256 is choosen instead.
1258 <p>See the section <a href="#layering">“Layering multiple mask
1259 images”</a> for how ‘<a href="#mask-clip"><code
1260 class=property>mask-clip</code></a>’ interacts with other
1261 comma-separated mask properties to form each mask image layer.
1263 <h3 id=the-mask-origin><span class=secno>6.6. </span>The ‘<a
1264 href="#mask-origin"><code class=property>mask-origin</code></a>’
1265 property</h3>
1267 <table class=propdef>
1268 <tbody>
1269 <tr>
1270 <th>Name:
1272 <td><dfn id=mask-origin>mask-origin</dfn>
1274 <tr>
1275 <th><a href="#values">Value</a>:
1277 <td><a href="#ltboxgt"><var><box></var></a>#
1279 <tr>
1280 <th>Initial:
1282 <td>padding-box
1284 <tr>
1285 <th>Applies to:
1287 <td>All elements. In SVG, it applies to <a
1288 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/intro.html#TermContainerElement">container
1289 elements</a> and <a
1290 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/intro.html#TermGraphicsElement">graphics
1291 elements</a>
1293 <tr>
1294 <th>Inherited:
1296 <td>no
1298 <tr>
1299 <th>Percentages:
1301 <td>N/A
1303 <tr>
1304 <th>Media:
1306 <td>visual
1308 <tr>
1309 <th>Computed value:
1311 <td>as specified
1313 <tr>
1314 <th>Animatable:
1316 <td>no
1317 </table>
1319 <p>For elements rendered as a single box, specifies the <dfn
1320 id=mask-positioning-area>mask positioning area</dfn>. For elements
1321 rendered as multiple boxes (e.g., inline boxes on several lines, boxes on
1322 several pages) specifies which boxes ‘<code
1323 class=property>box-decoration-break</code>’ operates on to determine the
1324 mask positioning area(s).
1326 <dl>
1327 <dt><dfn id=padding-box0 title="''padding-box''!!'mask-origin' value">
1328 ‘<code class=css>padding-box</code>’</dfn>
1330 <dd>The position is relative to the padding box. (For single boxes
1331 ‘<code class=css>0 0</code>’ is the upper left corner of the padding
1332 edge, ‘<code class=css>100% 100%</code>’ is the lower right corner.)
1334 <dt><dfn id=border-box0 title="''border-box''!!'mask-origin' value">
1335 ‘<code class=css>border-box</code>’</dfn>
1337 <dd>The position is relative to the border box respectively <span>painting
1338 box</span> for objects without associated layout box.
1340 <dt><dfn id=content-box0>‘<code class=css>content-box</code>’</dfn>
1342 <dd>The position is relative to the content box respectively object
1343 bounding box <a href="#SVG11"
1344 rel=biblioentry>[SVG11]<!--{{!SVG11}}--></a> for objects without
1345 associated layout box.
1346 </dl>
1348 <p class=note>Note that there is no corresponding box for ‘<code
1349 class=css>padding-box</code>’ on objects without associated layout box
1350 and ‘<a href="#content-box0"><code class=css>content-box</code></a>’
1351 is choosen instead.
1353 <p class=note>Note that if ‘<a href="#mask-clip"><code
1354 class=property>mask-clip</code></a>’ is ‘<code
1355 class=css>padding-box</code>’, ‘<a href="#mask-origin"><code
1356 class=property>mask-origin</code></a>’ is ‘<code
1357 class=css>border-box</code>’, ‘<a href="#mask-position"><code
1358 class=property>mask-position</code></a>’ is ‘<code class=css>top
1359 left</code>’ (the initial value), and the element has a non-zero border,
1360 then the top and left of the mask image will be clipped.
1362 <p>See the section <a href="#layering">“Layering multiple mask
1363 images”</a> for how ‘<a href="#mask-origin"><code
1364 class=property>mask-origin</code></a>’ interacts with other
1365 comma-separated mask properties to form each mask image layer.
1367 <h3 id=the-mask-size><span class=secno>6.7. </span>The ‘<a
1368 href="#mask-size"><code class=property>mask-size</code></a>’ property</h3>
1370 <table class=propdef>
1371 <tbody>
1372 <tr>
1373 <th>Name:
1375 <td><dfn id=mask-size>mask-size</dfn>
1377 <tr>
1378 <th><a href="#values">Value</a>:
1380 <td><a href="#ltmask-sizegt"><var><mask-size></var></a>#
1382 <tr>
1383 <th>Initial:
1385 <td>auto
1387 <tr>
1388 <th>Applies to:
1390 <td>All elements. In SVG, it applies to <a
1391 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/intro.html#TermContainerElement">container
1392 elements</a> and <a
1393 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/intro.html#TermGraphicsElement">graphics
1394 elements</a>
1396 <tr>
1397 <th>Inherited:
1399 <td>no
1401 <tr>
1402 <th>Percentages:
1404 <td>see text
1406 <tr>
1407 <th>Media:
1409 <td>visual
1411 <tr>
1412 <th>Computed value:
1414 <td>as specified, but with lengths made absolute
1416 <tr>
1417 <th>Animatable:
1419 <td>as <a
1420 href="http://dev.w3.org/csswg/css3-transitions/#animtype-repeatable-list">repeatable
1421 list</a> of <a
1422 href="http://dev.w3.org/csswg/css3-transitions/#animtype-simple-list">simple
1423 list</a> of <a
1424 href="http://dev.w3.org/csswg/css3-transitions/#animtype-lpcalc">length,
1425 percentage, or calc</a> (<span class=note>This means keyword values are
1426 not animatable.</span>)
1427 </table>
1429 <p>Specifies the size of the mask images. Where
1431 <pre class=prod><dfn
1432 id=ltmask-sizegt><var><mask-size></var></dfn> = [ <var><length></var> | <var><percentage></var> | auto ]{1,2} | cover | contain</pre>
1434 <p>See <a
1435 href="http://www.w3.org/TR/css3-background/#the-background-size">Sizing
1436 Images: the ‘background-size’ property</a> <a href="#CSS3BG"
1437 rel=biblioentry>[CSS3BG]<!--{{!CSS3BG}}--></a> for the defintions of the
1438 property values.
1440 <p>See the section <a href="#layering">“Layering multiple mask
1441 images”</a> for how ‘<a href="#mask-size"><code
1442 class=property>mask-size</code></a>’ interacts with other
1443 comma-separated mask properties to form each mask image layer.
1445 <h3 id=mask-property><span class=secno>6.8. </span>The ‘<a
1446 href="#mask"><code class=property>mask</code></a>’ property</h3>
1448 <table class=propdef>
1449 <tbody>
1450 <tr>
1451 <th>Name:
1453 <td><dfn id=MaskProperty>mask</dfn>
1455 <tr>
1456 <th>Value:
1458 <td><a href="#ltmask-layergt"><var><mask-layer></var></a>#
1460 <tr>
1461 <th>Initial:
1463 <td>see individual properties
1465 <tr>
1466 <th>Applies to:
1468 <td>All elements. In SVG, it applies to <a
1469 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/intro.html#TermContainerElement">container
1470 elements</a> and <a
1471 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/intro.html#TermGraphicsElement">graphics
1472 elements</a>
1474 <tr>
1475 <th>Inherited:
1477 <td>no
1479 <tr>
1480 <th>Percentages:
1482 <td>see individual properties
1484 <tr>
1485 <th>Media:
1487 <td>visual
1489 <tr>
1490 <th>Computed value:
1492 <td>see individual properties
1494 <tr>
1495 <th>Animatable:
1497 <td>see individual properties
1498 </table>
1500 <p>Where
1502 <pre class=prod><dfn id=ltmask-layergt><mask-layer></dfn> = <a
1503 href="#ltmask-referencegt"><var><mask-reference></var></a> <a
1504 href="#ltsource-typegt"><var><source-type></var></a>? || <a
1505 href="#ltpositiongt"><var><position></var></a> [ / <a
1506 href="#ltmask-sizegt"><var><mask-size></var></a> ]? || <a
1507 href="#ltrepeat-stylegt"><var><repeat-style></var></a> || <a
1508 href="#ltboxgt"><var><box></var></a> || <a
1509 href="#ltclip-boxgt"><var><clip-box></var></a></pre>
1511 <p> If one <a href="#ltboxgt"><var><box></var></a> value is present
1512 then it sets both ‘<a href="#mask-origin"><code
1513 class=property>mask-origin</code></a>’ and ‘<a href="#mask-clip"><code
1514 class=property>mask-clip</code></a>’ to that value. If two <a
1515 href="#ltboxgt"><var><box></var></a> values are present, then the
1516 first sets ‘<a href="#mask-origin"><code
1517 class=property>mask-origin</code></a>’ and the second ‘<a
1518 href="#mask-clip"><code class=property>mask-clip</code></a>’.
1520 <p class=note> Note that the properties ‘<a href="#mask-image"><code
1521 class=property>mask-image</code></a>’, ‘<a href="#mask-repeat"><code
1522 class=property>mask-repeat</code></a>’, ‘<a
1523 href="#mask-position"><code class=property>mask-position</code></a>’,
1524 ‘<a href="#mask-clip"><code class=property>mask-clip</code></a>’,
1525 ‘<a href="#mask-origin"><code class=property>mask-origin</code></a>’
1526 and ‘<a href="#mask-size"><code class=property>mask-size</code></a>’
1527 have no affect on <a class=element-name href="#MaskElement">‘<code
1528 class=property>mask</code>’</a> elements.
1530 <h3 id=the-mask-type><span class=secno>6.9. </span>The ‘<a
1531 href="#mask-type"><code class=property>mask-type</code></a>’ property</h3>
1533 <table class=propdef>
1534 <tbody>
1535 <tr>
1536 <th>Name:
1538 <td><dfn id=mask-type>mask-type</dfn>
1540 <tr>
1541 <th><a href="#values">Value</a>:
1543 <td>luminance | alpha
1545 <tr>
1546 <th>Initial:
1548 <td>luminance
1550 <tr>
1551 <th>Applies to:
1553 <td><a class=element-name href="#MaskElement">‘<code
1554 class=property>mask</code>’</a> elements
1556 <tr>
1557 <th>Inherited:
1559 <td>no
1561 <tr>
1562 <th>Percentages:
1564 <td>N/A
1566 <tr>
1567 <th>Media:
1569 <td>visual
1571 <tr>
1572 <th>Computed value:
1574 <td>as specified
1576 <tr>
1577 <th>Animatable:
1579 <td>no
1580 </table>
1582 <p>The ‘<a href="#mask-type"><code class=property>mask-type</code></a>’
1583 property defines whether the content of the <a class=element-name
1584 href="#MaskElement">‘<code class=property>mask</code>’</a> is treated
1585 as as luminance mask or alpha mask, as described in <a
1586 href="#MaskValues">Calculating mask values</a>.
1588 <p>Values have the following meanings:
1590 <dl>
1591 <dt>‘<a href="#luminance"><code class=css>luminance</code></a>’
1593 <dd>Indicates that the luminance values of the mask should be used.
1595 <dt>‘<a href="#alpha"><code class=css>alpha</code></a>’
1597 <dd>Indicates that the alpha values of the mask should be used.
1598 </dl>
1600 <p>The ‘<a href="#mask-type"><code class=property>mask-type</code></a>’
1601 property is a presentation attribute for SVG elements.
1603 <h3 id=MaskElement><span class=secno>6.10. </span>The <a class=element-name
1604 href="#mask">‘<code class=property>mask</code>’</a> element</h3>
1606 <table class=propdef summary="mask element">
1607 <tbody>
1608 <tr>
1609 <th>Name:
1611 <td><dfn id=mask>mask</dfn>
1613 <tr>
1614 <th>Categories:
1616 <td><a
1617 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/intro.html#TermContainerElement">Container
1618 element</a>
1620 <tr>
1621 <th>Content model:
1623 <td>Any number of the following elements, in any order:
1624 <ul class=no-bullets>
1625 <li><a
1626 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/intro.html#TermAnimationElement">animation</a>
1627 <span class=expanding> — <a
1628 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/animate.html#AnimateElement"><span
1629 class=element-name>‘animate’</span></a>, <a
1630 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/animate.html#AnimateColorElement"><span
1631 class=element-name>‘animateColor’</span></a>, <a
1632 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/animate.html#AnimateMotionElement"><span
1633 class=element-name>‘animateMotion’</span></a>, <a
1634 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/animate.html#AnimateTransformElement"><span
1635 class=element-name>‘animateTransform’</span></a>, <a
1636 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/animate.html#SetElement"><span
1637 class=element-name>‘set’</span></a></span>
1639 <li><a
1640 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/intro.html#TermDescriptiveElement">descriptive</a>
1641 <span class=expanding> — <a
1642 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/struct.html#DescElement"><span
1643 class=element-name>‘desc’</span></a>, <a
1644 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/struct.html#TitleElement"><span
1645 class=element-name>‘title’</span></a>, <a
1646 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/metadata.html#MetadataElement"><span
1647 class=element-name>‘metadata’</span></a></span>
1649 <li><a
1650 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/intro.html#TermShapeElement">shape</a>
1651 <span class=expanding> — <a
1652 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/shapes.html#CircleElement"><span
1653 class=element-name>‘circle’</span></a>, <a
1654 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/shapes.html#EllipseElement"><span
1655 class=element-name>‘ellipse’</span></a>, <a
1656 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/shapes.html#LineElement"><span
1657 class=element-name>‘line’</span></a>, <a
1658 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/paths.html#PathElement"><span
1659 class=element-name>‘path’</span></a>, <a
1660 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/shapes.html#PolygonElement"><span
1661 class=element-name>‘polygon’</span></a>, <a
1662 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/shapes.html#PolylineElement"><span
1663 class=element-name>‘polyline’</span></a>, <a
1664 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/shapes.html#RectElement"><span
1665 class=element-name>‘rect’</span></a></span>
1667 <li><a
1668 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/intro.html#TermStructuralElement">structural</a>
1669 <span class=expanding> — <a
1670 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/struct.html#DefsElement"><span
1671 class=element-name>‘defs’</span></a>, <a
1672 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/struct.html#GElement"><span
1673 class=element-name>‘g’</span></a>, <a
1674 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/struct.html#SVGElement"><span
1675 class=element-name>‘svg’</span></a>, <a
1676 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/struct.html#SymbolElement"><span
1677 class=element-name>‘symbol’</span></a>, <a
1678 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/struct.html#UseElement"><span
1679 class=element-name>‘use’</span></a></span>
1681 <li><a
1682 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/intro.html#TermGradientElement">gradient</a>
1683 <span class=expanding> — <a
1684 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/pservers.html#LinearGradientElement"><span
1685 class=element-name>‘linearGradient’</span></a>, <a
1686 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/pservers.html#RadialGradientElement"><span
1687 class=element-name>‘radialGradient’</span></a></span>
1689 <li><a
1690 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/linking.html#AElement"><span
1691 class=element-name>‘a’</span></a>
1693 <li><a href="#ClipPathElement"><span
1694 class=element-name>‘clipPath’</span></a>
1696 <li><a
1697 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/color.html#ColorProfileElement"><span
1698 class=element-name>‘color-profile’</span></a>
1700 <li><a
1701 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/interact.html#CursorElement"><span
1702 class=element-name>‘cursor’</span></a>
1704 <li><a
1705 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/filters.html#FilterElement"><span
1706 class=element-name>‘filter’</span></a>
1708 <li><a
1709 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/fonts.html#FontElement"><span
1710 class=element-name>‘font’</span></a>
1712 <li><a
1713 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/fonts.html#FontFaceElement"><span
1714 class=element-name>‘font-face’</span></a>
1716 <li><a
1717 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/extend.html#ForeignObjectElement"><span
1718 class=element-name>‘foreignObject’</span></a>
1720 <li><a
1721 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/struct.html#ImageElement"><span
1722 class=element-name>‘image’</span></a>
1724 <li><a
1725 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/painting.html#MarkerElement"><span
1726 class=element-name>‘marker’</span></a>
1728 <li><a href="#MaskElement"><span
1729 class=element-name>‘mask’</span></a>
1731 <li><a
1732 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/pservers.html#PatternElement"><span
1733 class=element-name>‘pattern’</span></a>
1735 <li><a
1736 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/script.html#ScriptElement"><span
1737 class=element-name>‘script’</span></a>
1739 <li><a
1740 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/styling.html#StyleElement"><span
1741 class=element-name>‘style’</span></a>
1743 <li><a
1744 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/struct.html#SwitchElement"><span
1745 class=element-name>‘switch’</span></a>
1747 <li><a
1748 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/linking.html#ViewElement"><span
1749 class=element-name>‘view’</span></a>
1751 <li><a
1752 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/text.html#TextElement"><span
1753 class=element-name>‘text’</span></a>
1755 <li><a
1756 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/text.html#AltGlyphDefElement"><span
1757 class=element-name>‘altGlyphDef’</span></a>
1758 </ul>
1760 <tr>
1761 <th>Attributes:
1763 <td>
1764 <ul class=no-bullets>
1765 <li><a
1766 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/intro.html#TermConditionalProcessingAttribute">conditional
1767 processing attributes</a><span class=expanding> — <a
1768 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/struct.html#RequiredFeaturesAttribute"><span
1769 class=attr-name>‘requiredFeatures’</span></a>, <a
1770 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/struct.html#RequiredExtensionsAttribute"><span
1771 class=attr-name>‘requiredExtensions’</span></a>, <a
1772 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/struct.html#SystemLanguageAttribute"><span
1773 class=attr-name>‘systemLanguage’</span></a></span>
1775 <li><a
1776 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/intro.html#TermCoreAttributes">core
1777 attributes</a><span class=expanding> — <a
1778 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/struct.html#IDAttribute"><span
1779 class=attr-name>‘id’</span></a>, <a
1780 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/struct.html#XMLBaseAttribute"><span
1781 class=attr-name>‘xml:base’</span></a>, <a
1782 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/struct.html#XMLLangAttribute"><span
1783 class=attr-name>‘xml:lang’</span></a>, <a
1784 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/struct.html#XMLSpaceAttribute"><span
1785 class=attr-name>‘xml:space’</span></a></span>
1787 <li><a
1788 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/intro.html#TermPresentationAttribute">presentation
1789 attributes</a><span class=expanding> — <a
1790 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/text.html#AlignmentBaselineProperty"><span
1791 class=attr-name>‘alignment-baseline’</span></a>, <a
1792 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/text.html#BaselineShiftProperty"><span
1793 class=attr-name>‘baseline-shift’</span></a>, <a
1794 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/masking.html#ClipProperty"><span
1795 class=attr-name>‘clip’</span></a>, <a
1796 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/masking.html#ClipPathProperty"><span
1797 class=attr-name>‘clip-path’</span></a>, <a
1798 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/masking.html#ClipRuleProperty"><span
1799 class=attr-name>‘clip-rule’</span></a>, <a
1800 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/color.html#ColorProperty"><span
1801 class=attr-name>‘color’</span></a>, <a
1802 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/painting.html#ColorInterpolationProperty"><span
1803 class=attr-name>‘color-interpolation’</span></a>, <a
1804 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/painting.html#ColorInterpolationFiltersProperty"><span
1805 class=attr-name>‘color-interpolation-filters’</span></a>, <a
1806 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/color.html#ColorProfileProperty"><span
1807 class=attr-name>‘color-profile’</span></a>, <a
1808 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/painting.html#ColorRenderingProperty"><span
1809 class=attr-name>‘color-rendering’</span></a>, <a
1810 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/interact.html#CursorProperty"><span
1811 class=attr-name>‘cursor’</span></a>, <a
1812 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/text.html#DirectionProperty"><span
1813 class=attr-name>‘direction’</span></a>, <a
1814 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/painting.html#DisplayProperty"><span
1815 class=attr-name>‘display’</span></a>, <a
1816 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/text.html#DominantBaselineProperty"><span
1817 class=attr-name>‘dominant-baseline’</span></a>, <a
1818 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/filters.html#EnableBackgroundProperty"><span
1819 class=attr-name>‘enable-background’</span></a>, <a
1820 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/painting.html#FillProperty"><span
1821 class=attr-name>‘fill’</span></a>, <a
1822 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/painting.html#FillOpacityProperty"><span
1823 class=attr-name>‘fill-opacity’</span></a>, <a
1824 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/painting.html#FillRuleProperty"><span
1825 class=attr-name>‘fill-rule’</span></a>, <a
1826 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/filters.html#FilterProperty"><span
1827 class=attr-name>‘filter’</span></a>, <a
1828 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/filters.html#FloodColorProperty"><span
1829 class=attr-name>‘flood-color’</span></a>, <a
1830 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/filters.html#FloodOpacityProperty"><span
1831 class=attr-name>‘flood-opacity’</span></a>, <a
1832 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/text.html#FontProperty"><span
1833 class=attr-name>‘font’</span></a>, <a
1834 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/text.html#FontFamilyProperty"><span
1835 class=attr-name>‘font-family’</span></a>, <a
1836 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/text.html#FontSizeProperty"><span
1837 class=attr-name>‘font-size’</span></a>, <a
1838 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/text.html#FontSizeAdjustProperty"><span
1839 class=attr-name>‘font-size-adjust’</span></a>, <a
1840 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/text.html#FontStretchProperty"><span
1841 class=attr-name>‘font-stretch’</span></a>, <a
1842 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/text.html#FontStyleProperty"><span
1843 class=attr-name>‘font-style’</span></a>, <a
1844 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/text.html#FontVariantProperty"><span
1845 class=attr-name>‘font-variant’</span></a>, <a
1846 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/text.html#FontWeightProperty"><span
1847 class=attr-name>‘font-weight’</span></a>, <a
1848 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/text.html#GlyphOrientationHorizontalProperty"><span
1849 class=attr-name>‘glyph-orientation-horizontal’</span></a>, <a
1850 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/text.html#GlyphOrientationVerticalProperty"><span
1851 class=attr-name>‘glyph-orientation-vertical’</span></a>, <a
1852 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/painting.html#ImageRenderingProperty"><span
1853 class=attr-name>‘image-rendering’</span></a>, <a
1854 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/text.html#KerningProperty"><span
1855 class=attr-name>‘kerning’</span></a>, <a
1856 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/text.html#LetterSpacingProperty"><span
1857 class=attr-name>‘letter-spacing’</span></a>, <a
1858 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/filters.html#LightingColorProperty"><span
1859 class=attr-name>‘lighting-color’</span></a>, <a
1860 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/painting.html#MarkerProperty"><span
1861 class=attr-name>‘marker’</span></a>, <a
1862 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/painting.html#MarkerEndProperty"><span
1863 class=attr-name>‘marker-end’</span></a>, <a
1864 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/painting.html#MarkerMidProperty"><span
1865 class=attr-name>‘marker-mid’</span></a>, <a
1866 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/painting.html#MarkerStartProperty"><span
1867 class=attr-name>‘marker-start’</span></a>, <a
1868 href="#MaskProperty"><span class=attr-name>‘mask’</span></a>, <a
1869 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/masking.html#OpacityProperty"><span
1870 class=attr-name>‘opacity’</span></a>, <a
1871 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/masking.html#OverflowProperty"><span
1872 class=attr-name>‘overflow’</span></a>, <a
1873 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/interact.html#PointerEventsProperty"><span
1874 class=attr-name>‘pointer-events’</span></a>, <a
1875 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/painting.html#ShapeRenderingProperty"><span
1876 class=attr-name>‘shape-rendering’</span></a>, <a
1877 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/pservers.html#StopColorProperty"><span
1878 class=attr-name>‘stop-color’</span></a>, <a
1879 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/pservers.html#StopOpacityProperty"><span
1880 class=attr-name>‘stop-opacity’</span></a>, <a
1881 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/painting.html#StrokeProperty"><span
1882 class=attr-name>‘stroke’</span></a>, <a
1883 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/painting.html#StrokeDasharrayProperty"><span
1884 class=attr-name>‘stroke-dasharray’</span></a>, <a
1885 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/painting.html#StrokeDashoffsetProperty"><span
1886 class=attr-name>‘stroke-dashoffset’</span></a>, <a
1887 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/painting.html#StrokeLinecapProperty"><span
1888 class=attr-name>‘stroke-linecap’</span></a>, <a
1889 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/painting.html#StrokeLinejoinProperty"><span
1890 class=attr-name>‘stroke-linejoin’</span></a>, <a
1891 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/painting.html#StrokeMiterlimitProperty"><span
1892 class=attr-name>‘stroke-miterlimit’</span></a>, <a
1893 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/painting.html#StrokeOpacityProperty"><span
1894 class=attr-name>‘stroke-opacity’</span></a>, <a
1895 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/painting.html#StrokeWidthProperty"><span
1896 class=attr-name>‘stroke-width’</span></a>, <a
1897 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/text.html#TextAnchorProperty"><span
1898 class=attr-name>‘text-anchor’</span></a>, <a
1899 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/text.html#TextDecorationProperty"><span
1900 class=attr-name>‘text-decoration’</span></a>, <a
1901 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/painting.html#TextRenderingProperty"><span
1902 class=attr-name>‘text-rendering’</span></a>, <a
1903 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/text.html#UnicodeBidiProperty"><span
1904 class=attr-name>‘unicode-bidi’</span></a>, <a
1905 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/painting.html#VisibilityProperty"><span
1906 class=attr-name>‘visibility’</span></a>, <a
1907 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/text.html#WordSpacingProperty"><span
1908 class=attr-name>‘word-spacing’</span></a>, <a
1909 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/text.html#WritingModeProperty"><span
1910 class=attr-name>‘writing-mode’</span></a></span>
1912 <li><a
1913 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/styling.html#ClassAttribute"><span
1914 class=attr-name>‘class’</span></a>
1916 <li><a
1917 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/styling.html#StyleAttribute"><span
1918 class=attr-name>‘style’</span></a>
1920 <li><a href="#MaskElementXAttribute"><span
1921 class=attr-name>‘x’</span></a>
1923 <li><a href="#MaskElementYAttribute"><span
1924 class=attr-name>‘y’</span></a>
1926 <li><a href="#MaskElementWidthAttribute"><span
1927 class=attr-name>‘width’</span></a>
1929 <li><a href="#MaskElementHeightAttribute"><span
1930 class=attr-name>‘height’</span></a>
1932 <li><a href="#MaskElementMaskUnitsAttribute"><span
1933 class=attr-name>‘maskUnits’</span></a>
1935 <li><a href="#MaskElementMaskContentUnitsAttribute"><span
1936 class=attr-name>‘maskContentUnits’</span></a>
1937 </ul>
1939 <tr>
1940 <th>DOM Interfaces:
1942 <td><a class=idlinterface
1943 href="#InterfaceSVGMaskElement">SVGMaskElement</a>
1944 </table>
1946 <div class=adef-list>
1947 <p><em>Attribute definitions:</em>
1949 <dl>
1950 <dt id=MaskElementMaskUnitsAttribute><span class=adef>maskUnits</span> =
1951 "<em>userSpaceOnUse</em> | <em>objectBoundingBox</em>"
1953 <dd>Defines the coordinate system for attributes <a class=attr-name
1954 href="#MaskElementXAttribute">‘<code class=property>x</code>’</a>,
1955 <a class=attr-name href="#MaskElementYAttribute">‘<code
1956 class=property>y</code>’</a>, <a class=attr-name
1957 href="#MaskElementWidthAttribute">‘<code
1958 class=property>width</code>’</a> and <a class=attr-name
1959 href="#MaskElementHeightAttribute">‘<code
1960 class=property>height</code>’</a>.<br>
1961 If <span class=attr-value>maskUnits="userSpaceOnUse"</span>, <a
1962 class=attr-name href="#MaskElementXAttribute">‘<code
1963 class=property>x</code>’</a>, <a class=attr-name
1964 href="#MaskElementYAttribute">‘<code class=property>y</code>’</a>,
1965 <a class=attr-name href="#MaskElementWidthAttribute">‘<code
1966 class=property>width</code>’</a> and <a class=attr-name
1967 href="#MaskElementHeightAttribute">‘<code
1968 class=property>height</code>’</a> represent values in the current user
1969 coordinate system in place at the time when the <a class=element-name
1970 href="#MaskElement">‘<code class=property>mask</code>’</a> element
1971 is referenced (i.e., the user coordinate system for the element
1972 referencing the <a class=element-name href="#MaskElement">‘<code
1973 class=property>mask</code>’</a> element via the ‘<a
1974 href="#mask"><code class=property>mask</code></a>’ property).<br>
1975 If <span class=attr-value>maskUnits="objectBoundingBox"</span>, <a
1976 class=attr-name href="#MaskElementXAttribute">‘<code
1977 class=property>x</code>’</a>, <a class=attr-name
1978 href="#MaskElementYAttribute">‘<code class=property>y</code>’</a>,
1979 <a class=attr-name href="#MaskElementWidthAttribute">‘<code
1980 class=property>width</code>’</a> and <a class=attr-name
1981 href="#MaskElementHeightAttribute">‘<code
1982 class=property>height</code>’</a> represent fractions or percentages
1983 of the bounding box of the element to which the mask is applied. (See <a
1984 class=term href="#object-bounding-box-units">object bounding box
1985 units</a>.)<br>
1986 If attribute <a class=attr-name
1987 href="#MaskElementMaskUnitsAttribute">‘<code
1988 class=property>maskUnits</code>’</a> is not specified, then the effect
1989 is as if a value of <span class=attr-value>‘<code
1990 class=property>objectBoundingBox</code>’</span> were specified.<br>
1991 <span class=anim-target>Animatable: yes.</span>
1993 <dt id=MaskElementMaskContentUnitsAttribute><span
1994 class=adef>maskContentUnits</span> = "<em>userSpaceOnUse</em> |
1995 <em>objectBoundingBox</em>"
1997 <dd>Defines the coordinate system for the contents of the <a
1998 class=element-name href="#MaskElement">‘<code
1999 class=property>mask</code>’</a>.<br>
2000 If <span class=attr-value>maskContentUnits="userSpaceOnUse"</span>, the
2001 user coordinate system for the contents of the <a class=element-name
2002 href="#MaskElement">‘<code class=property>mask</code>’</a> element
2003 is the current user coordinate system in place at the time when the <a
2004 class=element-name href="#MaskElement">‘<code
2005 class=property>mask</code>’</a> element is referenced (i.e., the user
2006 coordinate system for the element referencing the <a class=element-name
2007 href="#MaskElement">‘<code class=property>mask</code>’</a> element
2008 via the ‘<a href="#mask"><code class=property>mask</code></a>’
2009 property).<br>
2010 If <span class=attr-value>maskContentUnits="objectBoundingBox"</span>,
2011 the user coordinate system for the contents of the <a class=element-name
2012 href="#MaskElement">‘<code class=property>mask</code>’</a> is
2013 established using the bounding box of the element to which the mask is
2014 applied. (See <a class=term href="#object-bounding-box-units">object
2015 bounding box units</a>.)<br>
2016 If attribute <a class=attr-name
2017 href="#MaskElementMaskContentUnitsAttribute">‘<code
2018 class=property>maskContentUnits</code>’</a> is not specified, then the
2019 effect is as if a value of <span class=attr-value>‘<code
2020 class=property>userSpaceOnUse</code>’</span> were specified.<br>
2021 <span class=anim-target>Animatable: yes.</span>
2023 <dt id=MaskElementXAttribute><span class=adef>x</span> =
2024 "<var><length></var> | <var><percentage></var>"
2026 <dd>The x-axis coordinate of one corner of the rectangle for the largest
2027 possible offscreen buffer. If the attribute is not specified but at
2028 least one of the attributes <a class=attr-name
2029 href="#MaskElementYAttribute">‘<code class=property>y</code>’</a>,
2030 <a class=attr-name href="#MaskElementWidthAttribute">‘<code
2031 class=property>width</code>’</a> or <a class=attr-name
2032 href="#MaskElementHeightAttribute">‘<code
2033 class=property>height</code>’</a> are specified, the effect is as if a
2034 value of <span class=attr-value>‘<code class=css>-10%</code>’</span>
2035 were specified.<br>
2036 <span class=anim-target>Animatable: yes.</span>
2038 <dt id=MaskElementYAttribute><span class=adef>y</span> =
2039 "<var><length></var> | <var><percentage></var>"
2041 <dd>The y-axis coordinate of one corner of the rectangle for the largest
2042 possible offscreen buffer.<br>
2043 If the attribute is not specified but at least one of the attributes <a
2044 class=attr-name href="#MaskElementXAttribute">‘<code
2045 class=property>x</code>’</a>, <a class=attr-name
2046 href="#MaskElementWidthAttribute">‘<code
2047 class=property>width</code>’</a> or <a class=attr-name
2048 href="#MaskElementHeightAttribute">‘<code
2049 class=property>height</code>’</a> are specified, the effect is as if a
2050 value of <span class=attr-value>‘<code class=css>-10%</code>’</span>
2051 were specified.<br>
2052 <span class=anim-target>Animatable: yes.</span>
2054 <dt id=MaskElementWidthAttribute><span class=adef>width</span> =
2055 "<var><length></var> | <var><percentage></var>"
2057 <dd>The width of the largest possible offscreen buffer. A negative value
2058 or a value of zero disables rendering of the element.<br>
2059 If the attribute is not specified but at least one of the attributes <a
2060 class=attr-name href="#MaskElementXAttribute">‘<code
2061 class=property>x</code>’</a>, <a class=attr-name
2062 href="#MaskElementYAttribute">‘<code class=property>y</code>’</a> or
2063 <a class=attr-name href="#MaskElementHeightAttribute">‘<code
2064 class=property>height</code>’</a> are specified, the effect is as if a
2065 value of <span class=attr-value>‘<code class=css>120%</code>’</span>
2066 were specified.<br>
2067 <span class=anim-target>Animatable: yes.</span>
2069 <dt id=MaskElementHeightAttribute><span class=adef>height</span> =
2070 "<var><length></var> | <var><percentage></var>"
2072 <dd>The height of the largest possible offscreen buffer.<br>
2073 A negative value or a value of zero disables rendering of the
2074 element.<br>
2075 If the attribute is not specified but at least one of the attributes <a
2076 class=attr-name href="#MaskElementXAttribute">‘<code
2077 class=property>x</code>’</a>, <a class=attr-name
2078 href="#MaskElementYAttribute">‘<code class=property>y</code>’</a> or
2079 <a class=attr-name href="#MaskElementWidthAttribute">‘<code
2080 class=property>width</code>’</a> are specified, the effect is as if a
2081 value of <span class=attr-value>‘<code class=css>120%</code>’</span>
2082 were specified.<br>
2083 <span class=anim-target>Animatable: yes.</span>
2084 </dl>
2085 </div>
2087 <p class=note>Note that if at least one of the attributes <a
2088 class=attr-name href="#MaskElementXAttribute">‘<code
2089 class=property>x</code>’</a>, <a class=attr-name
2090 href="#MaskElementYAttribute">‘<code class=property>y</code>’</a>, <a
2091 class=attr-name href="#MaskElementWidthAttribute">‘<code
2092 class=property>width</code>’</a> or <a class=attr-name
2093 href="#MaskElementHeightAttribute">‘<code
2094 class=property>height</code>’</a> are specified, the given object and
2095 the rectangle defined by <a class=attr-name
2096 href="#MaskElementXAttribute">‘<code class=property>x</code>’</a>, <a
2097 class=attr-name href="#MaskElementYAttribute">‘<code
2098 class=property>y</code>’</a>, <a class=attr-name
2099 href="#MaskElementWidthAttribute">‘<code
2100 class=property>width</code>’</a> and <a class=attr-name
2101 href="#MaskElementHeightAttribute">‘<code
2102 class=property>height</code>’</a> establish a current clipping path. The
2103 rendered content of the mask must be clipped by this current clipping
2104 path.
2106 <p>
2108 <p>CSS properties inherit into the <a class=element-name
2109 href="#MaskElement">‘<code class=property>mask</code>’</a> element
2110 from its ancestors; properties do <em>not</em> inherit from the element
2111 referencing the <a class=element-name href="#MaskElement">‘<code
2112 class=property>mask</code>’</a> element.
2114 <p><a class=element-name href="#MaskElement">‘<code
2115 class=property>mask</code>’</a> elements are never rendered directly;
2116 their only usage is as something that can be referenced using the ‘<a
2117 href="#mask"><code class=property>mask</code></a>’ property. The
2118 ‘<code class=property>opacity</code>’, ‘<code
2119 class=property>filter</code>’ and ‘<code
2120 class=property>display</code>’ properties do not apply to the <a
2121 class=element-name href="#MaskElement">‘<code
2122 class=property>mask</code>’</a> element; thus, <a class=element-name
2123 href="#MaskElement">‘<code class=property>mask</code>’</a> elements
2124 are not directly rendered even if the ‘<code
2125 class=property>display</code>’ property is set to a value other than
2126 ‘<a href="#none"><code class=property>none</code></a>’, and <a
2127 class=element-name href="#MaskElement">‘<code
2128 class=property>mask</code>’</a> elements are available for referencing
2129 even when the ‘<code class=property>display</code>’ property on the <a
2130 class=element-name href="#MaskElement">‘<code
2131 class=property>mask</code>’</a> element or any of its ancestors is set
2132 to <a class=prop-value href="#none">none</a>.
2134 <h2 id=mask-box-image><span class=secno>7. </span>Mask Box Image</h2>
2136 <p> With ‘<a href="#mask-box-image0"><code
2137 class=property>mask-box-image</code></a>’ a mask can be split into nine
2138 pieces: four corners, four edges and the middle piece as demonstrated in
2139 the figure below.
2141 <div class=figure> <img alt="pieces of a mask box image"
2142 src="images/mask-box-image-mask.svg" width=240>
2143 <p class=caption> Pieces of a mask box image.
2144 </div>
2146 <p> These pieces may be sliced, scaled and stretched in various ways to fit
2147 the size of the <span class=index id=mask-image-area>mask image
2148 area</span>. The usage of ‘<a href="#mask-box-image0"><code
2149 class=property>mask-box-image</code></a>’ corresponds to the ‘<code
2150 class=property>border-image</code>’ property of CSS Background and
2151 Borders <a href="#CSS3BG" rel=biblioentry>[CSS3BG]<!--{{!CSS3BG}}--></a>.
2153 <div class=example>
2154 <p> The mask image in the following example is split into four corners
2155 with dimensions of 75 pixels, four edges and the middle piece that is
2156 stretched and scaled.
2158 <div class=figure> <img alt="Example for 'mask-box-image'" height=240
2159 src="images/mask-box-image.svg" width=720>
2160 <p class=caption> Example for ‘<a href="#mask-box-image0"><code
2161 class=property>mask-box-image</code></a>’. The object on the left is
2162 the object to mask. The second image is the alpha mask and the last
2163 image the masked object.
2164 </div>
2166 <pre>
2167 div {
2168 background: linear-gradient(bottom, #F27BAA 0%, #FCC8AD 100%);
2169 mask-box-image-slice: 25 fill;
2170 mask-box-image-repeat: stretch;
2171 mask-box-image-source: url(mask.png);
2172 }</pre>
2173 </div>
2175 <h3 id=the-mask-box-image-source><span class=secno>7.1. </span>The ‘<a
2176 href="#mask-box-image-source"><code
2177 class=property>mask-box-image-source</code></a>’ property</h3>
2179 <table class=propdef>
2180 <tbody>
2181 <tr>
2182 <th>Name:
2184 <td><dfn id=mask-box-image-source>mask-box-image-source</dfn>
2186 <tr>
2187 <th><a href="#values">Value</a>:
2189 <td><a href="#ltmask-imagegt"><var><mask-image></var></a>
2191 <tr>
2192 <th>Initial:
2194 <td>none
2196 <tr>
2197 <th>Applies to:
2199 <td>All elements. In SVG, it applies to <a
2200 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/intro.html#TermContainerElement">container
2201 elements</a> and <a
2202 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/intro.html#TermGraphicsElement">graphics
2203 elements</a>.
2205 <tr>
2206 <th>Inherited:
2208 <td>no
2210 <tr>
2211 <th>Percentages:
2213 <td>N/A
2215 <tr>
2216 <th>Media:
2218 <td>visual
2220 <tr>
2221 <th>Computed value:
2223 <td>‘<a href="#none"><code class=css>none</code></a>’ or the image
2224 with its URI made absolute
2226 <tr>
2227 <th>Animatable:
2229 <td>no
2230 </table>
2232 <p>Specifies an image to be used as mask. If the value is ‘<a
2233 href="#none"><code class=css>none</code></a>’ or if the image cannot be
2234 displayed (or the property doesn't apply), the content won't get masked.
2236 <h3 id=the-mask-box-image-slice><span class=secno>7.2. </span>The ‘<a
2237 href="#mask-box-image-slice"><code
2238 class=property>mask-box-image-slice</code></a>’ property</h3>
2240 <table class=propdef>
2241 <tbody>
2242 <tr>
2243 <th>Name:
2245 <td><dfn id=mask-box-image-slice>mask-box-image-slice</dfn>
2247 <tr>
2248 <th><a href="#values">Value</a>:
2250 <td>[<var><number></var> | <var><percentage></var>]{1,4}
2251 && fill?
2253 <tr>
2254 <th>Initial:
2256 <td>0 fill
2258 <tr>
2259 <th>Applies to:
2261 <td>All elements. In SVG, it applies to <a
2262 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/intro.html#TermContainerElement">container
2263 elements</a> and <a
2264 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/intro.html#TermGraphicsElement">graphics
2265 elements</a>.
2267 <tr>
2268 <th>Inherited:
2270 <td>no
2272 <tr>
2273 <th>Percentages:
2275 <td>refer to size of the mask image
2277 <tr>
2278 <th>Media:
2280 <td>visual
2282 <tr>
2283 <th>Computed value:
2285 <td>as specified
2287 <tr>
2288 <th>Animatable:
2290 <td>no
2291 </table>
2293 <p>This property specifies inward offsets from the top, right, bottom, and
2294 left edges of the mask image, dividing it into nine regions: four corners,
2295 four edges and a middle. The middle image part is discarded (treated as
2296 fully transparent black) unless the ‘<code class=css>fill</code>’
2297 keyword is present.
2299 <p>See <a
2300 href="http://www.w3.org/TR/css3-background/#the-border-image-slice">Image
2301 Slicing: the ‘<code class=property>border-image-slice</code>’
2302 property</a> <a href="#CSS3BG"
2303 rel=biblioentry>[CSS3BG]<!--{{!CSS3BG}}--></a> for the defintions of the
2304 property values.
2306 <h3 id=the-mask-box-image-width><span class=secno>7.3. </span>The ‘<a
2307 href="#mask-box-image-width"><code
2308 class=property>mask-box-image-width</code></a>’ property</h3>
2310 <table class=propdef>
2311 <tbody>
2312 <tr>
2313 <th>Name:
2315 <td><dfn id=mask-box-image-width>mask-box-image-width</dfn>
2317 <tr>
2318 <th><a href="#values">Value</a>:
2320 <td>[ <var><length></var> | <var><percentage></var> |
2321 <var><number></var> | auto ]{1,4}
2323 <tr>
2324 <th>Initial:
2326 <td>auto
2328 <tr>
2329 <th>Applies to:
2331 <td>All elements. In SVG, it applies to <a
2332 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/intro.html#TermContainerElement">container
2333 elements</a> and <a
2334 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/intro.html#TermGraphicsElement">graphics
2335 elements</a>.
2337 <tr>
2338 <th>Inherited:
2340 <td>no
2342 <tr>
2343 <th>Percentages:
2345 <td>relative to width/height of the <a
2346 href="#mask-box-image-area"><em>mask box image area</em></a>
2348 <tr>
2349 <th>Media:
2351 <td>visual
2353 <tr>
2354 <th>Computed value:
2356 <td>all <var><length></var>s made absolute, otherwise as specified
2358 <tr>
2359 <th>Animatable:
2361 <td>no
2362 </table>
2364 <p>The mask image is drawn inside an area called the <a
2365 href="#mask-box-image-area"><em>mask box image area</em></a>. This is an
2366 area whose boundaries by default correspond to the mask box, see ‘<a
2367 href="#mask-box-image-outset"><code
2368 class=property>mask-box-image-outset</code></a>’.
2370 <p>See <a
2371 href="http://www.w3.org/TR/css3-background/#the-border-image-width">Drawing
2372 Areas: the ‘border-image-width’ property</a> <a href="#CSS3BG"
2373 rel=biblioentry>[CSS3BG]<!--{{!CSS3BG}}--></a> for the defintions of the
2374 property values.
2376 <p class=note> Note that for SVG elements without an associated layout box
2377 the ‘<code class=property>border-width</code>’ is considered to be
2378 ‘<code class=css>0</code>’.
2380 <h3 id=the-mask-box-image-outset><span class=secno>7.4. </span>The ‘<a
2381 href="#mask-box-image-outset"><code
2382 class=property>mask-box-image-outset</code></a>’ property</h3>
2384 <table class=propdef>
2385 <tbody>
2386 <tr>
2387 <th>Name:
2389 <td><dfn id=mask-box-image-outset>mask-box-image-outset</dfn>
2391 <tr>
2392 <th><a href="#values">Value</a>:
2394 <td>[ <var><length></var> | <var><number></var> ]{1,4}
2396 <tr>
2397 <th>Initial:
2399 <td>0
2401 <tr>
2402 <th>Applies to:
2404 <td>All elements. In SVG, it applies to <a
2405 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/intro.html#TermContainerElement">container
2406 elements</a> and <a
2407 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/intro.html#TermGraphicsElement">graphics
2408 elements</a>.
2410 <tr>
2411 <th>Inherited:
2413 <td>no
2415 <tr>
2416 <th>Percentages:
2418 <td>N/A
2420 <tr>
2421 <th>Media:
2423 <td>visual
2425 <tr>
2426 <th>Computed value:
2428 <td>all <var><length></var>s made absolute, otherwise as specified
2430 <tr>
2431 <th>Animatable:
2433 <td>no
2434 </table>
2436 <p>The values specify the amount by which the <dfn
2437 id=mask-box-image-area>mask box image area</dfn> extends beyond the border
2438 box. If it has four values, they set the outsets on the top, right, bottom
2439 and left sides in that order. If the left is missing, it is the same as
2440 the right; if the bottom is missing, it is the same as the top; if the
2441 right is missing, it is the same as the top.
2443 <p>As with ‘<a href="#mask-box-image-width"><code
2444 class=property>mask-box-image-width</code></a>’, a <number>
2445 represents a multiple of the corresponding ‘<code
2446 class=property>border-width</code>’. Negative values are not allowed for
2447 any of the ‘<a href="#mask-box-image-outset"><code
2448 class=property>mask-box-image-outset</code></a>’ values.
2450 <p class=note>Note that for SVG elements without associated layout box the
2451 ‘<code class=property>border-width</code>’ is considered to be
2452 ‘<code class=css>0</code>’.
2454 <h3 id=the-mask-box-image-repeat><span class=secno>7.5. </span>The ‘<a
2455 href="#mask-box-image-repeat"><code
2456 class=property>mask-box-image-repeat</code></a>’ property</h3>
2458 <table class=propdef>
2459 <tbody>
2460 <tr>
2461 <th>Name:
2463 <td><dfn id=mask-box-image-repeat>mask-box-image-repeat</dfn>
2465 <tr>
2466 <th><a href="#values">Value</a>:
2468 <td>[ stretch | repeat | round | space ]{1,2}
2470 <tr>
2471 <th>Initial:
2473 <td>stretch
2475 <tr>
2476 <th>Applies to:
2478 <td>All elements. In SVG, it applies to <a
2479 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/intro.html#TermContainerElement">container
2480 elements</a> and <a
2481 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/intro.html#TermGraphicsElement">graphics
2482 elements</a>.
2484 <tr>
2485 <th>Inherited:
2487 <td>no
2489 <tr>
2490 <th>Percentages:
2492 <td>N/A
2494 <tr>
2495 <th>Media:
2497 <td>visual
2499 <tr>
2500 <th>Computed value:
2502 <td>as specified
2504 <tr>
2505 <th>Animatable:
2507 <td>no
2508 </table>
2510 <p>This property specifies how the images for the sides and the middle part
2511 of the mask image are scaled and tiled. The first keyword applies to the
2512 horizontal sides, the second to the vertical ones. If the second keyword
2513 is absent, it is assumed to be the same as the first.
2515 <p>See <a
2516 href="http://www.w3.org/TR/css3-background/#the-border-image-repeat">Image
2517 Tiling: the ‘<code class=property>border-image-repeat</code>’
2518 property</a> <a href="#CSS3BG"
2519 rel=biblioentry>[CSS3BG]<!--{{!CSS3BG}}--></a> for the defintions of the
2520 property values.
2522 <p>The exact process for scaling and tiling the mask box image parts is
2523 given in the section <a href="#masking-with-the-mask-box-image">Masking
2524 with the mask-box-image</a>.
2526 <h3 id=the-mask-box-image><span class=secno>7.6. </span>The ‘<a
2527 href="#mask-box-image0"><code class=property>mask-box-image</code></a>’
2528 property</h3>
2530 <table class=propdef>
2531 <tbody>
2532 <tr>
2533 <th>Name:
2535 <td><dfn id=mask-box-image0>mask-box-image</dfn>
2537 <tr>
2538 <th><a href="#values">Value</a>:
2540 <td> <var><‘<a href="#mask-box-image-source"><code
2541 class=property>mask-box-image-source</code></a>’></var> ||
2542 <var><‘<a href="#mask-box-image-slice"><code
2543 class=property>mask-box-image-slice</code></a>’></var> [ /
2544 <var><‘<a href="#mask-box-image-width"><code
2545 class=property>mask-box-image-width</code></a>’></var> | /
2546 <var><‘<a href="#mask-box-image-width"><code
2547 class=property>mask-box-image-width</code></a>’></var>? /
2548 <var><‘<a href="#mask-box-image-outset"><code
2549 class=property>mask-box-image-outset</code></a>’></var> ]? ||
2550 <var><‘<a href="#mask-box-image-repeat"><code
2551 class=property>mask-box-image-repeat</code></a>’></var>
2553 <tr>
2554 <th>Initial:
2556 <td>See individual properties
2558 <tr>
2559 <th>Applies to:
2561 <td>See individual properties
2563 <tr>
2564 <th>Inherited:
2566 <td>no
2568 <tr>
2569 <th>Percentages:
2571 <td>N/A
2573 <tr>
2574 <th>Media:
2576 <td>visual
2578 <tr>
2579 <th>Computed value:
2581 <td>See individual properties
2583 <tr>
2584 <th>Animatable:
2586 <td>See individual properties
2587 </table>
2589 <p>This is a shorthand property for setting ‘<a
2590 href="#mask-box-image-source"><code
2591 class=property>mask-box-image-source</code></a>’, ‘<a
2592 href="#mask-box-image-slice"><code
2593 class=property>mask-box-image-slice</code></a>’, ‘<a
2594 href="#mask-box-image-width"><code
2595 class=property>mask-box-image-width</code></a>’, ‘<a
2596 href="#mask-box-image-outset"><code
2597 class=property>mask-box-image-outset</code></a>’ and ‘<a
2598 href="#mask-box-image-repeat"><code
2599 class=property>mask-box-image-repeat</code></a>’. Omitted values are set
2600 to their initial values.
2602 <h3 id=masking-with-the-mask-box-image><span class=secno>7.7.
2603 </span>Masking with the mask-box-image</h3>
2605 <p> After the mask-box-image given by ‘<a
2606 href="#mask-box-image-source"><code
2607 class=property>mask-box-image-source</code></a>’ is sliced by the ‘<a
2608 href="#mask-box-image-slice"><code
2609 class=property>mask-box-image-slice</code></a>’ values, the resulting
2610 nine images are scaled, positioned, and tiled into their corresponding
2611 mask image regions in four steps as described in the section <a
2612 href="http://www.w3.org/TR/css3-background/#border-image-process">Drawing
2613 the Border Image</a> <a href="#CSS3BG"
2614 rel=biblioentry>[CSS3BG]<!--{{!CSS3BG}}--></a>.
2616 <h2 id=clipping-paths><span class=secno>8. </span>Clipping paths</h2>
2618 <p> The clipping path restricts the region to which paint can be applied,
2619 the so-called clipping region. Conceptually, any parts of the drawing that
2620 lie outside of this region are not drawn. This includes any content,
2621 background, borders, text decoration, outline and visible scrolling
2622 mechanism of the element to which the clipping path is applied, and those
2623 of its descendants.
2625 <p> An element's ancestors may also clip portions of their content (e.g.,
2626 via their own ‘<a href="#ClipProperty"><code
2627 class=property>clip</code></a>’ or ‘<a href="#clip-path"><code
2628 class=property>clip-path</code></a>’ properties and/or if their ‘<code
2629 class=property>overflow</code>’ property is not ‘<code
2630 class=css>visible</code>’). What is rendered is the cumulative
2631 intersection.
2633 <p> If the clipping region exceeds the bounds of the UA's document window,
2634 content may be clipped to that window by the native operating environment.
2636 <h3 id=the-clip-path><span class=secno>8.1. </span>The ‘<a
2637 href="#clip-path"><code class=property>clip-path</code></a>’ property</h3>
2639 <table class=propdef>
2640 <tbody>
2641 <tr>
2642 <th>Name:
2644 <td><dfn id=clip-path>clip-path</dfn>
2646 <tr>
2647 <th>Value:
2649 <td><a href="#ltshapegt"><var><shape></var></a> | <a
2650 href="#ltclip-sourcegt"><var><clip-source></var></a> | none
2652 <tr>
2653 <th>Initial:
2655 <td>none
2657 <tr>
2658 <th>Applies to:
2660 <td>All elements. SVG <a
2661 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/intro.html#TermContainerElement">container
2662 elements</a>, <a
2663 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/intro.html#TermGraphicsElement">graphics
2664 elements</a> and <a class=element-name href="#ClipPathElement">‘<code
2665 class=property>clipPath</code>’</a>
2667 <tr>
2668 <th>Inherited:
2670 <td>no
2672 <tr>
2673 <th>Percentages:
2675 <td>as specified
2677 <tr>
2678 <th>Media:
2680 <td>visual
2682 <tr>
2683 <th>Computed value:
2685 <td>as specified, but with <a href="#lturlgt"><var><url></var></a>
2686 values made absolute
2688 <tr>
2689 <th>Animatable:
2691 <td>See <a
2692 href="http://dev.w3.org/csswg/css3-exclusions/#shape-inside">‘<code
2693 class=property>shape-inside</code>’</a> and <a
2694 href="http://dev.w3.org/csswg/css3-exclusions/#shape-outside">‘<code
2695 class=property>shape-outside</code>’</a> <a href="#CSS3-EXCLUSIONS"
2696 rel=biblioentry>[CSS3-EXCLUSIONS]<!--{{!CSS3-EXCLUSIONS}}--></a>
2697 </table>
2699 <pre class=prod><dfn id=ltclip-sourcegt><clip-source></dfn> = <a
2700 href="#lturlgt"><var><url></var></a> | <var>child</var> | <a
2701 href="#ltchild-selectorgt"><var><child-selector></var></a>
2702 </pre>
2704 <dl>
2705 <dt> <dfn id=ltshapegt>‘<code class=css><shape></code>’</dfn>
2707 <dd> A basic shape function as defined in CSS3 Exclusions. The origin of
2708 clipping shapes is on the top left of the <a class=index
2709 href="#bounding-client-rect" id=bounding-client-rect0>bounding client
2710 rect</a>. Percentage values are resolved against the <a class=index
2711 href="#bounding-client-rect" id=bounding-client-rect1>bounding client
2712 rect</a> width and height. (See <a href="#CSS3-EXCLUSIONS"
2713 rel=biblioentry>[CSS3-EXCLUSIONS]<!--{{!CSS3-EXCLUSIONS}}--></a>.)
2715 <dt>‘<code class=css>child</code>’
2717 <dd> A keyword to indicate that the last direct sibling <a
2718 class=element-name href="#ClipPathElement">‘<code
2719 class=property>clipPath</code>’</a> element of the element the ‘<a
2720 href="#clip-path"><code class=property>clip-path</code></a>’ property
2721 is applied should be used as the clip source. It is equivalent to
2722 ‘<code class=css>select(clipPath:last-of-type)</code>’.
2724 <dt>‘<a href="#ltchild-selectorgt"><code
2725 class=css><child-selector></code></a>’
2727 <dd> A comma-separated list of <a
2728 href="http://dev.w3.org/csswg/selectors4/#compound">compound
2729 selector</a>s scoped at the element to which the ‘<a
2730 href="#clip-path"><code class=property>clip-path</code></a>’ property
2731 is applied. The first matching element in <a
2732 href="http://www.w3.org/TR/2012/WD-dom-20120405/#concept-tree-order">tree
2733 order</a> (as defined in <a href="#DOM"
2734 rel=biblioentry>[DOM]<!--{{!DOM}}--></a>) as a result of evaluating the
2735 list of selectors is taken as the clip source. If there are no matching
2736 elements the clip source is invalid.
2737 </dl>
2739 <h3 id=the-clip-rule><span class=secno>8.2. </span>The ‘<a
2740 href="#clip-rule"><code class=property>clip-rule</code></a>’ property</h3>
2742 <table class=propdef>
2743 <tbody>
2744 <tr>
2745 <th>Name:
2747 <td><dfn id=clip-rule>clip-rule</dfn>
2749 <tr>
2750 <th>Value:
2752 <td>nonzero | evenodd
2754 <tr>
2755 <th>Initial:
2757 <td>nonzero
2759 <tr>
2760 <th>Applies to:
2762 <td><a
2763 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/intro.html#TermGraphicsElement">graphics
2764 elements</a> within a <a class=element-name
2765 href="#ClipPathElement">‘<code class=property>clipPath</code>’</a>
2766 element
2768 <tr>
2769 <th>Inherited:
2771 <td>yes
2773 <tr>
2774 <th>Percentages:
2776 <td>N/A
2778 <tr>
2779 <th>Media:
2781 <td>visual
2783 <tr>
2784 <th>Computed value:
2786 <td>as specified
2788 <tr>
2789 <th>Animatable:
2791 <td>no
2792 </table>
2794 <dl>
2795 <dt><dfn id=nonzero>‘<code class=css>nonzero</code>’</dfn>
2797 <dd>See description of <a class=property
2798 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/painting.html#FillRuleProperty">‘<code
2799 class=property>fill-rule</code>’</a> property <a href="#SVG11"
2800 rel=biblioentry>[SVG11]<!--{{SVG11}}--></a>.
2802 <dt><dfn id=evenodd>‘<code class=css>evenodd</code>’</dfn>
2804 <dd>See description of <a class=property
2805 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/painting.html#FillRuleProperty">‘<code
2806 class=property>fill-rule</code>’</a> property <a href="#SVG11"
2807 rel=biblioentry>[SVG11]<!--{{SVG11}}--></a>.
2808 </dl>
2810 <p>The ‘<a href="#clip-rule"><code class=property>clip-rule</code></a>’
2811 property only applies to graphics elements that are contained within a <a
2812 class=element-name href="#ClipPathElement">‘<code
2813 class=property>clipPath</code>’</a> element.
2815 <div class=example> The following fragment of code will cause an evenodd
2816 clipping rule to be applied to the clipping path because ‘<a
2817 href="#clip-rule"><code class=property>clip-rule</code></a>’ is
2818 specified on the <a class=element-name
2819 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/paths.html#PathElement">‘<code
2820 class=property>path</code>’</a> element that defines the clipping shape:
2822 <pre>
2823 <g clip-rule="nonzero">
2824 <clipPath id="MyClip">
2825 <path d="..." clip-rule="evenodd" />
2826 </clipPath>
2827 <rect clip-path="url(#MyClip)" ... />
2828 </g>
2829 </pre>
2831 <p>whereas the following fragment of code will <em>not</em> cause an
2832 evenodd clipping rule to be applied because the ‘<a
2833 href="#clip-rule"><code class=property>clip-rule</code></a>’ is
2834 specified on the referencing element, not on the object defining the
2835 clipping shape:
2837 <pre>
2838 <g clip-rule="nonzero">
2839 <clipPath id="MyClip">
2840 <path d="..." />
2841 </clipPath>
2842 <rect clip-path="url(#MyClip)" clip-rule="evenodd" ... />
2843 </g>
2844 </pre>
2845 </div>
2847 <h3 id=clip-property><span class=secno>8.3. </span>The ‘<a
2848 href="#ClipProperty"><code class=property>clip</code></a>’ property</h3>
2850 <table class=propdef>
2851 <tbody>
2852 <tr>
2853 <th>Name:
2855 <td><dfn id=ClipProperty>clip</dfn>
2857 <tr>
2858 <th>Value:
2860 <td><a href="#ltshapegt"><var><shape></var></a> | auto
2862 <tr>
2863 <th>Initial:
2865 <td>see individual properties
2867 <tr>
2868 <th>Applies to:
2870 <td>Absolutely positioned elements. In SVG, it applies to <a
2871 href="http://www.w3.org/TR/SVG2/coords.html#EstablishingANewViewport">elements
2872 which establish a new viewport</a>, <a class=element-name
2873 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/pservers.html#PatternElement">‘<code
2874 class=property>pattern</code>’</a> elements and <a class=element-name
2875 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/painting.html#MarkerElement">‘<code
2876 class=property>marker</code>’</a> elements.
2878 <tr>
2879 <th>Inherited:
2881 <td>no
2883 <tr>
2884 <th>Percentages:
2886 <td>N/A
2888 <tr>
2889 <th>Media:
2891 <td>visual
2893 <tr>
2894 <th>Computed value:
2896 <td>as specified
2898 <tr>
2899 <th>Animatable:
2901 <td>as <a
2902 href="http://dev.w3.org/csswg/css3-transitions/#animtype-rect">rectangle</a>
2903 </table>
2905 <p class=note>With this specification the ‘<a href="#ClipProperty"><code
2906 class=property>clip</code></a>’ property is deprecated. Authors are
2907 encouraged to use the ‘<a href="#clip-path"><code
2908 class=property>clip-path</code></a>’ property instead. UAs must support
2909 the ‘<a href="#ClipProperty"><code class=property>clip</code></a>’
2910 property.
2912 <p> The ‘<a href="#ClipProperty"><code class=property>clip</code></a>’
2913 property applies only to absolutely positioned elements. In SVG, it
2914 applies to <a
2915 href="http://www.w3.org/TR/SVG2/coords.html#EstablishingANewViewport">elements
2916 which establish a new viewport</a>, <a class=element-name
2917 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/pservers.html#PatternElement">‘<code
2918 class=property>pattern</code>’</a> elements and <a class=element-name
2919 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/painting.html#MarkerElement">‘<code
2920 class=property>marker</code>’</a> elements. Values have the following
2921 meanings:
2923 <dl>
2924 <dt>‘<a href="#auto"><code class=css>auto</code></a>’
2926 <dd>The element does not clip.
2928 <dt><a href="#ltshapegt"><var><shape></var></a>
2930 <dd>
2931 <p> In CSS 2.1, the only valid <shape> value is: rect(<a
2932 href="#lttopgt"><var><top></var></a>, <a
2933 href="#ltrightgt"><var><right></var></a>, <a
2934 href="#ltbottomgt"><var><bottom></var></a>, <a
2935 href="#ltleftgt"><var><left></var></a>) where <a
2936 href="#lttopgt"><var><top></var></a> and <a
2937 href="#ltbottomgt"><var><bottom></var></a> specify offsets from
2938 the top border edge of the box, and <a
2939 href="#ltrightgt"><var><right></var></a>, and <a
2940 href="#ltleftgt"><var><left></var></a> specify offsets from the
2941 left border edge of the box. Authors should separate offset values with
2942 commas. User agents must support separation with commas, but may also
2943 support separation without commas (but not a combination), because a
2944 previous revision of this specification was ambiguous in this respect.
2946 <p><dfn id=lttopgt><top></dfn>, <dfn
2947 id=ltrightgt><right></dfn>, <dfn
2948 id=ltbottomgt><bottom></dfn>, and <dfn
2949 id=ltleftgt><left></dfn> may either have a
2950 <var><length></var> value or ‘<a href="#auto"><code
2951 class=css>auto</code></a>’. Negative lengths are permitted. The value
2952 ‘<a href="#auto"><code class=css>auto</code></a>’ means that a given
2953 edge of the clipping region will be the same as the edge of the
2954 element's generated border box (i.e., ‘<a href="#auto"><code
2955 class=css>auto</code></a>’ means the same as ‘<code
2956 class=css>0</code>’ for <a href="#lttopgt"><var><top></var></a>
2957 and <a href="#ltleftgt"><var><left></var></a>, the same as the
2958 used value of the height plus the sum of vertical padding and border
2959 widths for <a href="#ltbottomgt"><var><bottom></var></a>, and the
2960 same as the used value of the width plus the sum of the horizontal
2961 padding and border widths for <a
2962 href="#ltrightgt"><var><right></var></a>, such that four ‘<a
2963 href="#auto"><code class=property>auto</code></a>’ values result in
2964 the clipping region being the same as the element's border box).
2966 <p> When coordinates are rounded to pixel coordinates, care should be
2967 taken that no pixels remain visible when <a
2968 href="#ltleftgt"><var><left></var></a> and <a
2969 href="#ltrightgt"><var><right></var></a> have the same value (or
2970 <a href="#lttopgt"><var><top></var></a> and <a
2971 href="#ltbottomgt"><var><bottom></var></a> have the same value),
2972 and conversely that no pixels within the element's border box remain
2973 hidden when these values are ‘<a href="#auto"><code
2974 class=css>auto</code></a>’.
2975 </dl>
2977 <div class=example>
2978 <p> Example: The following two rules:
2980 <pre><code>
2981 p#one { clip: rect(5px, 40px, 45px, 5px); }
2982 p#two { clip: rect(5px, 55px, 45px, 5px); }</code></pre>
2984 <p> and assuming both Ps are 50 by 55 pixel, will create, respectively,
2985 the rectangular clipping regions delimited by the dashed lines in the
2986 following illustrations:
2988 <div class=figure> <img alt="Values for rect shape" height=577
2989 src="images/clip.png" width=292>
2990 <p class=caption>This diagram illustrates two block boxes, one above the
2991 other, with rectangular clipping regions of different dimensions. (See
2992 <a href="http://www.w3.org/TR/CSS2/images/longdesc/clip-desc.html">long
2993 description</a>.)
2994 </div>
2995 </div>
2997 <h3 id=ClipPathElement><span class=secno>8.4. </span>The <a
2998 class=element-name href="#ClipPathElement">‘<code
2999 class=property>clipPath</code>’</a> element</h3>
3001 <table class=propdef summary="clipPath element">
3002 <tbody>
3003 <tr>
3004 <th>Name:
3006 <td><dfn id=clippath>clipPath</dfn>
3008 <tr>
3009 <th>Categories:
3011 <td>None.
3013 <tr>
3014 <th>Content model:
3016 <td>Any number of the following elements, in any order:
3017 <ul class=no-bullets>
3018 <li><a
3019 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/intro.html#TermDescriptiveElement">descriptive</a>
3020 <span class=expanding> — <a
3021 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/struct.html#DescElement"><span
3022 class=element-name>‘desc’</span></a>, <a
3023 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/struct.html#TitleElement"><span
3024 class=element-name>‘title’</span></a>, <a
3025 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/metadata.html#MetadataElement"><span
3026 class=element-name>‘metadata’</span></a></span>
3028 <li><a
3029 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/intro.html#TermAnimationElement">animation</a>
3030 <span class=expanding> — <a
3031 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/animate.html#AnimateElement"><span
3032 class=element-name>‘animate’</span></a>, <a
3033 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/animate.html#AnimateColorElement"><span
3034 class=element-name>‘animateColor’</span></a>, <a
3035 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/animate.html#AnimateMotionElement"><span
3036 class=element-name>‘animateMotion’</span></a>, <a
3037 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/animate.html#AnimateTransformElement"><span
3038 class=element-name>‘animateTransform’</span></a>, <a
3039 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/animate.html#SetElement"><span
3040 class=element-name>‘set’</span></a></span>
3042 <li><a
3043 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/intro.html#TermShapeElement">shape</a>
3044 <span class=expanding> — <a
3045 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/shapes.html#CircleElement"><span
3046 class=element-name>‘circle’</span></a>, <a
3047 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/shapes.html#EllipseElement"><span
3048 class=element-name>‘ellipse’</span></a>, <a
3049 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/shapes.html#LineElement"><span
3050 class=element-name>‘line’</span></a>, <a
3051 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/paths.html#PathElement"><span
3052 class=element-name>‘path’</span></a>, <a
3053 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/shapes.html#PolygonElement"><span
3054 class=element-name>‘polygon’</span></a>, <a
3055 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/shapes.html#PolylineElement"><span
3056 class=element-name>‘polyline’</span></a>, <a
3057 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/shapes.html#RectElement"><span
3058 class=element-name>‘rect’</span></a></span>
3060 <li><a
3061 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/text.html#TextElement"><span
3062 class=element-name>‘text’</span></a>
3064 <li><a
3065 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/struct.html#UseElement"><span
3066 class=element-name>‘use’</span></a>
3067 </ul>
3069 <tr>
3070 <th>Attributes:
3072 <td>
3073 <ul class=no-bullets>
3074 <li><a
3075 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/intro.html#TermConditionalProcessingAttribute">conditional
3076 processing attributes</a><span class=expanding> — <a
3077 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/struct.html#RequiredFeaturesAttribute"><span
3078 class=attr-name>‘requiredFeatures’</span></a>, <a
3079 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/struct.html#RequiredExtensionsAttribute"><span
3080 class=attr-name>‘requiredExtensions’</span></a>, <a
3081 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/struct.html#SystemLanguageAttribute"><span
3082 class=attr-name>‘systemLanguage’</span></a></span>
3084 <li><a
3085 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/intro.html#TermCoreAttributes">core
3086 attributes</a><span class=expanding> — <a
3087 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/struct.html#IDAttribute"><span
3088 class=attr-name>‘id’</span></a>, <a
3089 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/struct.html#XMLBaseAttribute"><span
3090 class=attr-name>‘xml:base’</span></a>, <a
3091 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/struct.html#XMLLangAttribute"><span
3092 class=attr-name>‘xml:lang’</span></a>, <a
3093 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/struct.html#XMLSpaceAttribute"><span
3094 class=attr-name>‘xml:space’</span></a></span>
3096 <li><a
3097 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/intro.html#TermPresentationAttribute">presentation
3098 attributes</a><span class=expanding> — <a
3099 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/text.html#AlignmentBaselineProperty"><span
3100 class=attr-name>‘alignment-baseline’</span></a>, <a
3101 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/text.html#BaselineShiftProperty"><span
3102 class=attr-name>‘baseline-shift’</span></a>, <a
3103 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/masking.html#ClipProperty"><span
3104 class=attr-name>‘clip’</span></a>, <a
3105 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/masking.html#ClipPathProperty"><span
3106 class=attr-name>‘clip-path’</span></a>, <a
3107 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/masking.html#ClipRuleProperty"><span
3108 class=attr-name>‘clip-rule’</span></a>, <a
3109 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/color.html#ColorProperty"><span
3110 class=attr-name>‘color’</span></a>, <a
3111 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/painting.html#ColorInterpolationProperty"><span
3112 class=attr-name>‘color-interpolation’</span></a>, <a
3113 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/painting.html#ColorInterpolationFiltersProperty"><span
3114 class=attr-name>‘color-interpolation-filters’</span></a>, <a
3115 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/color.html#ColorProfileProperty"><span
3116 class=attr-name>‘color-profile’</span></a>, <a
3117 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/painting.html#ColorRenderingProperty"><span
3118 class=attr-name>‘color-rendering’</span></a>, <a
3119 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/interact.html#CursorProperty"><span
3120 class=attr-name>‘cursor’</span></a>, <a
3121 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/text.html#DirectionProperty"><span
3122 class=attr-name>‘direction’</span></a>, <a
3123 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/painting.html#DisplayProperty"><span
3124 class=attr-name>‘display’</span></a>, <a
3125 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/text.html#DominantBaselineProperty"><span
3126 class=attr-name>‘dominant-baseline’</span></a>, <a
3127 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/filters.html#EnableBackgroundProperty"><span
3128 class=attr-name>‘enable-background’</span></a>, <a
3129 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/painting.html#FillProperty"><span
3130 class=attr-name>‘fill’</span></a>, <a
3131 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/painting.html#FillOpacityProperty"><span
3132 class=attr-name>‘fill-opacity’</span></a>, <a
3133 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/painting.html#FillRuleProperty"><span
3134 class=attr-name>‘fill-rule’</span></a>, <a
3135 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/filters.html#FilterProperty"><span
3136 class=attr-name>‘filter’</span></a>, <a
3137 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/filters.html#FloodColorProperty"><span
3138 class=attr-name>‘flood-color’</span></a>, <a
3139 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/filters.html#FloodOpacityProperty"><span
3140 class=attr-name>‘flood-opacity’</span></a>, <a
3141 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/text.html#FontProperty"><span
3142 class=attr-name>‘font’</span></a>, <a
3143 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/text.html#FontFamilyProperty"><span
3144 class=attr-name>‘font-family’</span></a>, <a
3145 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/text.html#FontSizeProperty"><span
3146 class=attr-name>‘font-size’</span></a>, <a
3147 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/text.html#FontSizeAdjustProperty"><span
3148 class=attr-name>‘font-size-adjust’</span></a>, <a
3149 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/text.html#FontStretchProperty"><span
3150 class=attr-name>‘font-stretch’</span></a>, <a
3151 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/text.html#FontStyleProperty"><span
3152 class=attr-name>‘font-style’</span></a>, <a
3153 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/text.html#FontVariantProperty"><span
3154 class=attr-name>‘font-variant’</span></a>, <a
3155 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/text.html#FontWeightProperty"><span
3156 class=attr-name>‘font-weight’</span></a>, <a
3157 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/text.html#GlyphOrientationHorizontalProperty"><span
3158 class=attr-name>‘glyph-orientation-horizontal’</span></a>, <a
3159 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/text.html#GlyphOrientationVerticalProperty"><span
3160 class=attr-name>‘glyph-orientation-vertical’</span></a>, <a
3161 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/painting.html#ImageRenderingProperty"><span
3162 class=attr-name>‘image-rendering’</span></a>, <a
3163 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/text.html#KerningProperty"><span
3164 class=attr-name>‘kerning’</span></a>, <a
3165 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/text.html#LetterSpacingProperty"><span
3166 class=attr-name>‘letter-spacing’</span></a>, <a
3167 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/filters.html#LightingColorProperty"><span
3168 class=attr-name>‘lighting-color’</span></a>, <a
3169 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/painting.html#MarkerProperty"><span
3170 class=attr-name>‘marker’</span></a>, <a
3171 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/painting.html#MarkerEndProperty"><span
3172 class=attr-name>‘marker-end’</span></a>, <a
3173 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/painting.html#MarkerMidProperty"><span
3174 class=attr-name>‘marker-mid’</span></a>, <a
3175 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/painting.html#MarkerStartProperty"><span
3176 class=attr-name>‘marker-start’</span></a>, <a
3177 href="#MaskProperty"><span class=attr-name>‘mask’</span></a>, <a
3178 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/masking.html#OpacityProperty"><span
3179 class=attr-name>‘opacity’</span></a>, <a
3180 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/masking.html#OverflowProperty"><span
3181 class=attr-name>‘overflow’</span></a>, <a
3182 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/interact.html#PointerEventsProperty"><span
3183 class=attr-name>‘pointer-events’</span></a>, <a
3184 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/painting.html#ShapeRenderingProperty"><span
3185 class=attr-name>‘shape-rendering’</span></a>, <a
3186 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/pservers.html#StopColorProperty"><span
3187 class=attr-name>‘stop-color’</span></a>, <a
3188 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/pservers.html#StopOpacityProperty"><span
3189 class=attr-name>‘stop-opacity’</span></a>, <a
3190 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/painting.html#StrokeProperty"><span
3191 class=attr-name>‘stroke’</span></a>, <a
3192 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/painting.html#StrokeDasharrayProperty"><span
3193 class=attr-name>‘stroke-dasharray’</span></a>, <a
3194 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/painting.html#StrokeDashoffsetProperty"><span
3195 class=attr-name>‘stroke-dashoffset’</span></a>, <a
3196 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/painting.html#StrokeLinecapProperty"><span
3197 class=attr-name>‘stroke-linecap’</span></a>, <a
3198 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/painting.html#StrokeLinejoinProperty"><span
3199 class=attr-name>‘stroke-linejoin’</span></a>, <a
3200 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/painting.html#StrokeMiterlimitProperty"><span
3201 class=attr-name>‘stroke-miterlimit’</span></a>, <a
3202 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/painting.html#StrokeOpacityProperty"><span
3203 class=attr-name>‘stroke-opacity’</span></a>, <a
3204 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/painting.html#StrokeWidthProperty"><span
3205 class=attr-name>‘stroke-width’</span></a>, <a
3206 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/text.html#TextAnchorProperty"><span
3207 class=attr-name>‘text-anchor’</span></a>, <a
3208 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/text.html#TextDecorationProperty"><span
3209 class=attr-name>‘text-decoration’</span></a>, <a
3210 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/painting.html#TextRenderingProperty"><span
3211 class=attr-name>‘text-rendering’</span></a>, <a
3212 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/text.html#UnicodeBidiProperty"><span
3213 class=attr-name>‘unicode-bidi’</span></a>, <a
3214 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/painting.html#VisibilityProperty"><span
3215 class=attr-name>‘visibility’</span></a>, <a
3216 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/text.html#WordSpacingProperty"><span
3217 class=attr-name>‘word-spacing’</span></a>, <a
3218 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/text.html#WritingModeProperty"><span
3219 class=attr-name>‘writing-mode’</span></a></span>
3221 <li><a
3222 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/styling.html#ClassAttribute"><span
3223 class=attr-name>‘class’</span></a>
3225 <li><a
3226 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/styling.html#StyleAttribute"><span
3227 class=attr-name>‘style’</span></a>
3229 <li><a
3230 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/struct.html#ExternalResourcesRequiredAttribute"><span
3231 class=attr-name>‘externalResourcesRequired’</span></a>
3233 <li><a
3234 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/coords.html#TransformAttribute"><span
3235 class=attr-name>‘transform’</span></a>
3237 <li><a href="#ClipPathElementClipPathUnitsAttribute"><span
3238 class=attr-name>‘clipPathUnits’</span></a>
3239 </ul>
3241 <tr>
3242 <th>DOM Interfaces:
3244 <td><a class=idlinterface
3245 href="#InterfaceSVGClipPathElement">SVGClipPathElement</a>
3246 </table>
3248 <div class=adef-list>
3249 <p><em>Attribute definitions:</em>
3251 <dl>
3252 <dt id=ClipPathElementClipPathUnitsAttribute><span
3253 class=adef>clipPathUnits</span> = "<em>userSpaceOnUse</em> |
3254 <em>objectBoundingBox</em>"
3256 <dd>Defines the coordinate system for the contents of the <a
3257 class=element-name href="#ClipPathElement">‘<code
3258 class=property>clipPath</code>’</a>.<br>
3259 If <span class=attr-value>clipPathUnits="userSpaceOnUse"</span>, the
3260 contents of the <a class=element-name href="#ClipPathElement">‘<code
3261 class=property>clipPath</code>’</a> represent values in the current
3262 user coordinate system in place at the time when the <a
3263 class=element-name href="#ClipPathElement">‘<code
3264 class=property>clipPath</code>’</a> element is referenced (i.e., the
3265 user coordinate system for the element referencing the <a
3266 class=element-name href="#ClipPathElement">‘<code
3267 class=property>clipPath</code>’</a> element via the <a class=property
3268 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/masking.html#ClipPathProperty">‘<code
3269 class=property>clip-path</code>’</a> property).<br>
3270 If <span class=attr-value>clipPathUnits="objectBoundingBox"</span>, then
3271 the user coordinate system for the contents of the <a class=element-name
3272 href="#ClipPathElement">‘<code class=property>clipPath</code>’</a>
3273 element is established using the bounding box of the element to which
3274 the clipping path is applied (see <a class=index
3275 href="#object-bounding-box-units" id=object-bounding-box-units0>object
3276 bounding box units</a>).<br>
3277 If attribute <a class=attr-name
3278 href="#ClipPathElementClipPathUnitsAttribute">‘<code
3279 class=property>clipPathUnits</code>’</a> is not specified, then the
3280 effect is as if a value of <span class=attr-value>‘<code
3281 class=property>userSpaceOnUse</code>’</span> were specified.<br>
3282 <span class=anim-target>Animatable: yes.</span>
3283 </dl>
3284 </div>
3286 <p>CSS properties inherit into the <a class=element-name
3287 href="#ClipPathElement">‘<code class=property>clipPath</code>’</a>
3288 element from its ancestors; properties do <em>not</em> inherit from the
3289 element referencing the <a class=element-name
3290 href="#ClipPathElement">‘<code class=property>clipPath</code>’</a>
3291 element.
3293 <p><a class=element-name href="#ClipPathElement">‘<code
3294 class=property>clipPath</code>’</a> elements are never rendered
3295 directly; their only usage is as something that can be referenced using
3296 the <a class=property
3297 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/masking.html#ClipPathProperty">‘<code
3298 class=property>clip-path</code>’</a> property. The <a class=property
3299 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/painting.html#DisplayProperty">‘<code
3300 class=property>display</code>’</a> property does not apply to the <a
3301 class=element-name href="#ClipPathElement">‘<code
3302 class=property>clipPath</code>’</a> element; thus, <a class=element-name
3303 href="#ClipPathElement">‘<code class=property>clipPath</code>’</a>
3304 elements are not directly rendered even if the ‘<code
3305 class=property>display</code>’ property is set to a value other than <a
3306 class=prop-value href="#none">none</a>, and <a class=element-name
3307 href="#ClipPathElement">‘<code class=property>clipPath</code>’</a>
3308 elements are available for referencing even when the <a class=property
3309 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/painting.html#DisplayProperty">‘<code
3310 class=property>display</code>’</a> property on the <a class=element-name
3311 href="#ClipPathElement">‘<code class=property>clipPath</code>’</a>
3312 element or any of its ancestors is set to <a class=prop-value
3313 href="#none">none</a>.
3315 <p>A <a class=element-name href="#ClipPathElement">‘<code
3316 class=property>clipPath</code>’</a> element can contain <a
3317 class=element-name
3318 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/paths.html#PathElement">‘<code
3319 class=property>path</code>’</a> elements, <a class=element-name
3320 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/text.html#TextElement">‘<code
3321 class=property>text</code>’</a> elements, <a
3322 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/intro.html#TermBasicShapeElement">basic
3323 shapes</a> (such as <a class=element-name
3324 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/shapes.html#CircleElement">‘<code
3325 class=property>circle</code>’</a>) or a <a class=element-name
3326 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/struct.html#UseElement">‘<code
3327 class=property>use</code>’</a> element. If a <a class=element-name
3328 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/struct.html#UseElement">‘<code
3329 class=property>use</code>’</a> element is a child of a <a
3330 class=element-name href="#ClipPathElement">‘<code
3331 class=property>clipPath</code>’</a> element, it must directly reference
3332 <a class=element-name
3333 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/paths.html#PathElement">‘<code
3334 class=property>path</code>’</a>, <a class=element-name
3335 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/text.html#TextElement">‘<code
3336 class=property>text</code>’</a> or <a
3337 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/intro.html#TermBasicShapeElement">basic
3338 shapes</a> elements. Indirect references are an error and the <a
3339 class=element-name href="#ClipPathElement">‘<code
3340 class=property>clipPath</code>’</a> element must be ignored.
3342 <p>The raw geometry of each child element exclusive of rendering properties
3343 such as ‘<code class=property>fill</code>’, ‘<code
3344 class=property>stroke</code>’, ‘<code
3345 class=property>stroke-width</code>’ within a <a class=element-name
3346 href="#ClipPathElement">‘<code class=property>clipPath</code>’</a>
3347 conceptually defines a 1-bit mask (with the possible exception of
3348 anti-aliasing along the edge of the geometry) which represents the
3349 silhouette of the graphics associated with that element. Anything outside
3350 the outline of the object is masked out. If a child element is made
3351 invisible by ‘<code class=property>display</code>’ or ‘<code
3352 class=property>visibility</code>’ it does not contribute to the clipping
3353 path. When the <a class=element-name href="#ClipPathElement">‘<code
3354 class=property>clipPath</code>’</a> element contains multiple child
3355 elements, the silhouettes of the child elements are logically OR'd
3356 together to create a single silhouette which is then used to restrict the
3357 region onto which paint can be applied. Thus, a point is inside the
3358 clipping path if it is inside any of the children of the <a
3359 class=element-name href="#ClipPathElement">‘<code
3360 class=property>clipPath</code>’</a>.
3362 <p>For a given graphics element, the actual clipping path used will be the
3363 intersection of the clipping path specified by its ‘<a
3364 href="#clip-path"><code class=property>clip-path</code></a>’ property
3365 (if any) with any clipping paths on its ancestors, as specified by the
3366 ‘<a href="#clip-path"><code class=property>clip-path</code></a>’
3367 property on the elements which establish a new viewport. (See <a
3368 href="#SVG11" rel=biblioentry>[SVG11]<!--{{SVG11}}--></a>)
3370 <div class=note>
3371 <p>A couple of notes:
3373 <ul>
3374 <li>The <a class=element-name href="#ClipPathElement">‘<code
3375 class=property>clipPath</code>’</a> element itself and its child
3376 elements do <em>not</em> inherit clipping paths from the ancestors of
3377 the <a class=element-name href="#ClipPathElement">‘<code
3378 class=property>clipPath</code>’</a> element.
3380 <li>The <a class=element-name href="#ClipPathElement">‘<code
3381 class=property>clipPath</code>’</a> element or any of its children can
3382 specify property ‘<a href="#clip-path"><code
3383 class=property>clip-path</code></a>’.<br>
3384 If a valid ‘<a href="#clip-path"><code
3385 class=property>clip-path</code></a>’ reference is placed on a <a
3386 class=element-name href="#ClipPathElement">‘<code
3387 class=property>clipPath</code>’</a> element, the resulting clipping
3388 path is the intersection of the contents of the <a class=element-name
3389 href="#ClipPathElement">‘<code class=property>clipPath</code>’</a>
3390 element with the referenced clipping path.<br>
3391 If a valid ‘<a href="#clip-path"><code
3392 class=property>clip-path</code></a>’ reference is placed on one of the
3393 children of a <a class=element-name href="#ClipPathElement">‘<code
3394 class=property>clipPath</code>’</a> element, then the given child
3395 element is clipped by the referenced clipping path before OR'ing the
3396 silhouette of the child element with the silhouettes of the other child
3397 elements.
3399 <li>An empty clipping path will completely clip away the element that had
3400 the ‘<a href="#clip-path"><code class=property>clip-path</code></a>’
3401 property applied.
3402 </ul>
3403 </div>
3405 <h3 id=clipPath-geometry><span class=secno>8.5. </span>Clipping paths,
3406 geometry, and pointer events</h3>
3408 <p>A clipping path is conceptually equivalent to a custom viewport for the
3409 referencing element. Thus, it affects the rendering of an element, but not
3410 the element's inherent geometry. The <a class=index
3411 href="#bounding-client-rect" id=bounding-client-rect2>bounding client
3412 rect</a> of a clipped element (that is, an element which references a <a
3413 class=element-name href="#ClipPathElement">‘<code
3414 class=property>clipPath</code>’</a> element via a ‘<a
3415 href="#clip-path"><code class=property>clip-path</code></a>’ property,
3416 or a child of the referencing element) must remain the same as if it were
3417 not clipped.
3419 <p>By default, <a
3420 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/interact.html#PointerEventsProperty">pointer
3421 events</a> must not be dispatched on the clipped (non-visible) regions of
3422 a shape. For example, a circle with a radius of 10 which is clipped to a
3423 circle with a radius of 5 will not receive <span class=event-name>‘<code
3424 class=property>click</code>’</span> events outside the smaller radius.
3425 Later versions of this specification may define new properties to enable
3426 fine-grained control over the interactions between hit testing and
3427 clipping.
3429 <h2 id=security><span class=secno>9. </span>Security</h2>
3431 <h3 id=origin-restrictions><span class=secno>9.1. </span>Origin
3432 Restrictions</h3>
3434 <p> External references to resources like <a class=element-name
3435 href="#MaskElement">‘<code class=property>mask</code>’</a> or <a
3436 class=element-name href="#ClipPathElement">‘<code
3437 class=property>clipPath</code>’</a> must not violate the same origin
3438 restrictions <a href="#CORS" rel=biblioentry>[CORS]<!--{{!CORS}}--></a>.
3440 <p>This restriction includes:
3442 <ul>
3443 <li>Any images, either as content or via styling, that are not exposed
3444 with CORS
3446 <li>Any tainted canvas
3448 <li>Any cross-origin content referenced by ‘<code
3449 class=css>xlink:href</code>’ or <use>
3450 </ul>
3452 <p> If content falls under this restriction, the resource must be rejected.
3453 The element is drawn as if the resource was not specified (i.e. the ‘<a
3454 href="#clip-path"><code class=property>clip-path</code></a>’ or ‘<a
3455 href="#mask"><code class=property>mask</code></a>’ property were set to
3456 ‘<a href="#none"><code class=css>none</code></a>’).
3458 <h2 id=DOMInterfaces><span class=secno>10. </span>DOM interfaces</h2>
3460 <h3 id=InterfaceSVGClipPathElement><span class=secno>10.1. </span>Interface
3461 SVGClipPathElement</h3>
3463 <p>The <a href="#InterfaceSVGClipPathElement">SVGClipPathElement</a>
3464 interface corresponds to the <a class=element-name
3465 href="#ClipPathElement">‘<code class=property>clipPath</code>’</a>
3466 element.
3468 <pre class=idl>interface <b>SVGClipPathElement</b> : <a
3469 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/types.html#InterfaceSVGElement">SVGElement</a> {
3470 readonly attribute <a
3471 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/types.html#InterfaceSVGAnimatedEnumeration">SVGAnimatedEnumeration</a> <a
3472 href="#SVGClipPathElement__clipPathUnits">clipPathUnits</a>;
3473 readonly attribute <a
3474 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/coords.html#InterfaceSVGAnimatedTransformList">SVGAnimatedTransformList</a> <a
3475 href="#SVGClipPathElement__transform">transform</a>;
3476 };
3478 <a
3479 href="#InterfaceSVGClipPathElement">SVGClipPathElement</a> implements <a
3480 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/types.html#InterfaceSVGUnitTypes">SVGUnitTypes</a>;</pre>
3482 <dl class=interface>
3483 <dt class=attributes-header>Attributes:
3485 <dd>
3486 <dl class=attributes>
3487 <dt class="attribute first-child"
3488 id="SVGClipPathElement__clipPathUnits"><b>clipPathUnits</b><span
3489 class=idl-type-parenthetical> (readonly <a
3490 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/types.html#InterfaceSVGAnimatedEnumeration">SVGAnimatedEnumeration</a>)</span>
3492 <dd class=attribute>
3493 <div> Corresponds to attribute <a class=attr-name
3494 href="#ClipPathElementClipPathUnitsAttribute">‘<code
3495 class=property>clipPathUnits</code>’</a> on the given <a
3496 class=element-name href="#ClipPathElement">‘<code
3497 class=property>clipPath</code>’</a> element. Takes one of the
3498 constants defined in <a
3499 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/types.html#InterfaceSVGUnitTypes">SVGUnitTypes</a>.</div>
3501 <dt class="attribute first-child"
3502 id="SVGClipPathElement__transform"><b>transform</b><span
3503 class=idl-type-parenthetical> (readonly <a
3504 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/coords.html#InterfaceSVGAnimatedTransformList">SVGAnimatedTransformList</a>)</span>
3506 <dd class=attribute>
3507 <div> Corresponds to attribute <a class=attr-name
3508 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/coords.html#TransformAttribute">‘<code
3509 class=property>transform</code>’</a> on the given element.</div>
3510 </dl>
3511 </dl>
3513 <h3 id=InterfaceSVGMaskElement><span class=secno>10.2. </span>Interface
3514 SVGMaskElement</h3>
3516 <p>The <a href="#InterfaceSVGMaskElement">SVGMaskElement</a> interface
3517 corresponds to the <a class=element-name href="#MaskElement">‘<code
3518 class=property>mask</code>’</a> element.
3520 <pre class=idl>interface <b>SVGMaskElement</b> : <a
3521 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/types.html#InterfaceSVGElement">SVGElement</a> {
3522 readonly attribute <a
3523 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/types.html#InterfaceSVGAnimatedEnumeration">SVGAnimatedEnumeration</a> <a
3524 href="#SVGMaskElement__maskUnits">maskUnits</a>;
3525 readonly attribute <a
3526 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/types.html#InterfaceSVGAnimatedEnumeration">SVGAnimatedEnumeration</a> <a
3527 href="#SVGMaskElement__maskContentUnits">maskContentUnits</a>;
3528 readonly attribute <a
3529 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/types.html#InterfaceSVGAnimatedLength">SVGAnimatedLength</a> <a
3530 href="#SVGMaskElement__x">x</a>;
3531 readonly attribute <a
3532 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/types.html#InterfaceSVGAnimatedLength">SVGAnimatedLength</a> <a
3533 href="#SVGMaskElement__y">y</a>;
3534 readonly attribute <a
3535 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/types.html#InterfaceSVGAnimatedLength">SVGAnimatedLength</a> <a
3536 href="#SVGMaskElement__width">width</a>;
3537 readonly attribute <a
3538 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/types.html#InterfaceSVGAnimatedLength">SVGAnimatedLength</a> <a
3539 href="#SVGMaskElement__height">height</a>;
3540 };
3542 <a
3543 href="#InterfaceSVGMaskElement">SVGMaskElement</a> implements <a
3544 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/types.html#InterfaceSVGUnitTypes">SVGUnitTypes</a>;</pre>
3546 <dl class=interface>
3547 <dt class=attributes-header>Attributes:
3549 <dd>
3550 <dl class=attributes>
3551 <dt class="attribute first-child"
3552 id="SVGMaskElement__maskUnits"><b>maskUnits</b><span
3553 class=idl-type-parenthetical> (readonly <a
3554 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/types.html#InterfaceSVGAnimatedEnumeration">SVGAnimatedEnumeration</a>)</span>
3556 <dd class=attribute>
3557 <div> Corresponds to attribute <a class=attr-name
3558 href="#MaskElementMaskUnitsAttribute">‘<code
3559 class=property>maskUnits</code>’</a> on the given <a
3560 class=element-name href="#MaskElement">‘<code
3561 class=property>mask</code>’</a> element. Takes one of the constants
3562 defined in <a
3563 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/types.html#InterfaceSVGUnitTypes">SVGUnitTypes</a>.</div>
3565 <dt class=attribute
3566 id="SVGMaskElement__maskContentUnits"><b>maskContentUnits</b><span
3567 class=idl-type-parenthetical> (readonly <a
3568 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/types.html#InterfaceSVGAnimatedEnumeration">SVGAnimatedEnumeration</a>)</span>
3570 <dd class=attribute>
3571 <div> Corresponds to attribute <a class=attr-name
3572 href="#MaskElementMaskContentUnitsAttribute">‘<code
3573 class=property>maskContentUnits</code>’</a> on the given <a
3574 class=element-name href="#MaskElement">‘<code
3575 class=property>mask</code>’</a> element. Takes one of the constants
3576 defined in <a
3577 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/types.html#InterfaceSVGUnitTypes">SVGUnitTypes</a>.</div>
3579 <dt class=attribute id="SVGMaskElement__x"><b>x</b><span
3580 class=idl-type-parenthetical> (readonly <a
3581 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/types.html#InterfaceSVGAnimatedLength">SVGAnimatedLength</a>)</span>
3583 <dd class=attribute>
3584 <div> Corresponds to attribute <a class=attr-name
3585 href="#MaskElementXAttribute">‘<code class=property>x</code>’</a>
3586 on the given <a class=element-name href="#MaskElement">‘<code
3587 class=property>mask</code>’</a> element.</div>
3589 <dt class=attribute id="SVGMaskElement__y"><b>y</b><span
3590 class=idl-type-parenthetical> (readonly <a
3591 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/types.html#InterfaceSVGAnimatedLength">SVGAnimatedLength</a>)</span>
3593 <dd class=attribute>
3594 <div> Corresponds to attribute <a class=attr-name
3595 href="#MaskElementYAttribute">‘<code class=property>y</code>’</a>
3596 on the given <a class=element-name href="#MaskElement">‘<code
3597 class=property>mask</code>’</a> element.</div>
3599 <dt class=attribute id="SVGMaskElement__width"><b>width</b><span
3600 class=idl-type-parenthetical> (readonly <a
3601 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/types.html#InterfaceSVGAnimatedLength">SVGAnimatedLength</a>)</span>
3603 <dd class=attribute>
3604 <div> Corresponds to attribute <a class=attr-name
3605 href="#MaskElementWidthAttribute">‘<code
3606 class=property>width</code>’</a> on the given <a class=element-name
3607 href="#MaskElement">‘<code class=property>mask</code>’</a>
3608 element.</div>
3610 <dt class=attribute id="SVGMaskElement__height"><b>height</b><span
3611 class=idl-type-parenthetical> (readonly <a
3612 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/types.html#InterfaceSVGAnimatedLength">SVGAnimatedLength</a>)</span>
3614 <dd class=attribute>
3615 <div> Corresponds to attribute <a class=attr-name
3616 href="#MaskElementHeightAttribute">‘<code
3617 class=property>height</code>’</a> on the given <a class=element-name
3618 href="#MaskElement">‘<code class=property>mask</code>’</a>
3619 element.</div>
3620 </dl>
3621 </dl>
3623 <h2 class=no-num id=references> References</h2>
3625 <h3 class=no-num id=normative-references> Normative references</h3>
3626 <!--begin-normative-->
3627 <!-- Sorted by label -->
3629 <dl class=bibliography>
3630 <dt style="display: none"><!-- keeps the doc valid if the DL is empty -->
3631 <!---->
3633 <dt id=CORS>[CORS]
3635 <dd>Anne van Kesteren. <a
3636 href="http://www.w3.org/TR/2013/CR-cors-20130129/"><cite>Cross-Origin
3637 Resource Sharing.</cite></a> 29 January 2013. W3C Candidate
3638 Recommendation. (Work in progress.) URL: <a
3639 href="http://www.w3.org/TR/2013/CR-cors-20130129/">http://www.w3.org/TR/2013/CR-cors-20130129/</a>
3640 </dd>
3641 <!---->
3643 <dt id=CSS21>[CSS21]
3645 <dd>Bert Bos; et al. <a
3646 href="http://www.w3.org/TR/2011/REC-CSS2-20110607/"><cite>Cascading Style
3647 Sheets Level 2 Revision 1 (CSS 2.1) Specification.</cite></a> 7 June
3648 2011. W3C Recommendation. URL: <a
3649 href="http://www.w3.org/TR/2011/REC-CSS2-20110607/">http://www.w3.org/TR/2011/REC-CSS2-20110607/</a>
3650 </dd>
3651 <!---->
3653 <dt id=CSS3-EXCLUSIONS>[CSS3-EXCLUSIONS]
3655 <dd>Vincent Hardy; Rossen Atanassov; Alan Stearns. <a
3656 href="http://www.w3.org/TR/2012/WD-css3-exclusions-20120503/"><cite>CSS
3657 Exclusions and Shapes Module Level 3.</cite></a> 3 May 2012. W3C Working
3658 Draft. (Work in progress.) URL: <a
3659 href="http://www.w3.org/TR/2012/WD-css3-exclusions-20120503/">http://www.w3.org/TR/2012/WD-css3-exclusions-20120503/</a>
3660 </dd>
3661 <!---->
3663 <dt id=CSS3-IMAGES>[CSS3-IMAGES]
3665 <dd>Elika J. Etemad; Tab Atkins Jr. <a
3666 href="http://www.w3.org/TR/2012/CR-css3-images-20120417/"><cite>CSS Image
3667 Values and Replaced Content Module Level 3.</cite></a> 17 April 2012. W3C
3668 Candidate Recommendation. (Work in progress.) URL: <a
3669 href="http://www.w3.org/TR/2012/CR-css3-images-20120417/">http://www.w3.org/TR/2012/CR-css3-images-20120417/</a>
3670 </dd>
3671 <!---->
3673 <dt id=CSS3BG>[CSS3BG]
3675 <dd>Bert Bos; Elika J. Etemad; Brad Kemper. <a
3676 href="http://www.w3.org/TR/2012/CR-css3-background-20120724/"><cite>CSS
3677 Backgrounds and Borders Module Level 3.</cite></a> 24 July 2012. W3C
3678 Candidate Recommendation. (Work in progress.) URL: <a
3679 href="http://www.w3.org/TR/2012/CR-css3-background-20120724/">http://www.w3.org/TR/2012/CR-css3-background-20120724/</a>
3680 </dd>
3681 <!---->
3683 <dt id=CSS3VAL>[CSS3VAL]
3685 <dd>Håkon Wium Lie; Tab Atkins; Elika J. Etemad. <a
3686 href="http://www.w3.org/TR/2012/CR-css3-values-20120828/"><cite>CSS
3687 Values and Units Module Level 3.</cite></a> 28 August 2012. W3C Candidate
3688 Recommendation. (Work in progress.) URL: <a
3689 href="http://www.w3.org/TR/2012/CR-css3-values-20120828/">http://www.w3.org/TR/2012/CR-css3-values-20120828/</a>
3690 </dd>
3691 <!---->
3693 <dt id=DOM>[DOM]
3695 <dd>Anne van Kesteren; et al. <a
3696 href="http://www.w3.org/TR/2012/WD-dom-20121206/"><cite>DOM4.</cite></a>
3697 6 December 2012. W3C Working Draft. (Work in progress.) URL: <a
3698 href="http://www.w3.org/TR/2012/WD-dom-20121206/">http://www.w3.org/TR/2012/WD-dom-20121206/</a>
3699 </dd>
3700 <!---->
3702 <dt id=SELECTORS4>[SELECTORS4]
3704 <dd>Elika J. Etemad. <a
3705 href="http://www.w3.org/TR/2012/WD-selectors4-20120823/"><cite>Selectors
3706 Level 4.</cite></a> 23 August 2012. W3C Working Draft. (Work in
3707 progress.) URL: <a
3708 href="http://www.w3.org/TR/2012/WD-selectors4-20120823/">http://www.w3.org/TR/2012/WD-selectors4-20120823/</a>
3709 </dd>
3710 <!---->
3712 <dt id=SVG11>[SVG11]
3714 <dd>Erik Dahlström; et al. <a
3715 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/"><cite>Scalable
3716 Vector Graphics (SVG) 1.1 (Second Edition).</cite></a> 16 August 2011.
3717 W3C Recommendation. URL: <a
3718 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/">http://www.w3.org/TR/2011/REC-SVG11-20110816/</a>
3719 </dd>
3720 <!---->
3721 </dl>
3722 <!--end-normative-->
3724 <dl>
3725 <dt id=ref-svg2><strong class=normref>[SVG2]</strong>
3727 <dd> Cameron McCormack; et al. <a
3728 href="http://www.w3.org/TR/2012/WD-SVG2-20120828/"><cite>Scalable Vector
3729 Graphics (SVG) 2</cite>.</a> 28 August 2012. W3C Working Draft. (Work in
3730 progress.) URL: <a
3731 href="http://www.w3.org/TR/2012/WD-SVG2-20120828/">http://www.w3.org/TR/2012/WD-SVG2-20120828/</a>
3732 </dl>
3734 <h3 class=no-num id=other-references> Other references</h3>
3735 <!--begin-informative-->
3736 <!-- Sorted by label -->
3738 <dl class=bibliography>
3739 <dt style="display: none"><!-- keeps the doc valid if the DL is empty -->
3740 <!---->
3742 <dt id=CSS3-TRANSFORMS>[CSS3-TRANSFORMS]
3744 <dd>Simon Fraser; et al. <a
3745 href="http://www.w3.org/TR/2012/WD-css3-transforms-20120911/"><cite>CSS
3746 Transforms.</cite></a> 11 September 2012. W3C Working Draft. (Work in
3747 progress.) URL: <a
3748 href="http://www.w3.org/TR/2012/WD-css3-transforms-20120911/">http://www.w3.org/TR/2012/WD-css3-transforms-20120911/</a>
3749 </dd>
3750 <!---->
3752 <dt id=CSSOM-VIEW>[CSSOM-VIEW]
3754 <dd>Anne van Kesteren. <a
3755 href="http://www.w3.org/TR/2011/WD-cssom-view-20110804/"><cite>CSSOM View
3756 Module.</cite></a> 4 August 2011. W3C Working Draft. (Work in progress.)
3757 URL: <a
3758 href="http://www.w3.org/TR/2011/WD-cssom-view-20110804/">http://www.w3.org/TR/2011/WD-cssom-view-20110804/</a>
3759 </dd>
3760 <!---->
3761 </dl>
3762 <!--end-informative-->
3764 <h2 class=no-num id=index> Index</h2>
3765 <!--begin-index-->
3767 <ul class=indexlist>
3768 <li>‘<a href="#alpha"><code class=css>alpha</code></a>’, <a
3769 href="#alpha" title="section 6.2."><strong>6.2.</strong></a>
3771 <li>‘<a href="#auto"><code class=css>auto</code></a>’, <a href="#auto"
3772 title="section 6.2."><strong>6.2.</strong></a>
3774 <li>‘<code class=css>border-box</code>’
3775 <ul>
3776 <li>‘<a href="#mask-clip"><code class=property>mask-clip</code></a>’
3777 value, <a href="#border-box"
3778 title="section 6.5."><strong>6.5.</strong></a>
3780 <li>‘<a href="#mask-origin"><code
3781 class=property>mask-origin</code></a>’ value, <a href="#border-box0"
3782 title="section 6.6."><strong>6.6.</strong></a>
3783 </ul>
3785 <li><bottom>, <a href="#ltbottomgt"
3786 title="section 8.3."><strong>8.3.</strong></a>
3788 <li>bounding client rect, <a href="#bounding-client-rect"
3789 title="section 4."><strong>4.</strong></a>, <a
3790 href="#bounding-client-rect0" title="section 8.1.">8.1.</a>, <a
3791 href="#bounding-client-rect1" title="section 8.1.">8.1.</a>, <a
3792 href="#bounding-client-rect2" title="section 8.5.">8.5.</a>
3794 <li><a href="#ltboxgt"><var><box></var></a>, <a href="#ltboxgt"
3795 title="section 6.5."><strong>6.5.</strong></a>
3797 <li><child-selector>, <a href="#ltchild-selectorgt"
3798 title="section 6.1."><strong>6.1.</strong></a>
3800 <li>clip, <a href="#ClipProperty"
3801 title="section 8.3."><strong>8.3.</strong></a>
3803 <li><a href="#ltclip-boxgt"><var><clip-box></var></a>, <a
3804 href="#ltclip-boxgt" title="section 6.5."><strong>6.5.</strong></a>
3806 <li>clipPath, <a href="#clippath"
3807 title="section 8.4."><strong>8.4.</strong></a>
3809 <li>clip-path, <a href="#clip-path"
3810 title="section 8.1."><strong>8.1.</strong></a>
3812 <li>clip-rule, <a href="#clip-rule"
3813 title="section 8.2."><strong>8.2.</strong></a>
3815 <li><clip-source>, <a href="#ltclip-sourcegt"
3816 title="section 8.1."><strong>8.1.</strong></a>
3818 <li>‘<a href="#ltcompound-selectorgt"><code
3819 class=css><compound-selector></code></a>’, <a
3820 href="#ltcompound-selectorgt"
3821 title="section 6.1."><strong>6.1.</strong></a>
3823 <li>‘<a href="#content-box0"><code class=css>content-box</code></a>’,
3824 <a href="#content-box0" title="section 6.6."><strong>6.6.</strong></a>
3825 <ul>
3826 <li>‘<a href="#mask-clip"><code class=property>mask-clip</code></a>’
3827 value, <a href="#content-box"
3828 title="section 6.5."><strong>6.5.</strong></a>
3829 </ul>
3831 <li>‘<a href="#evenodd"><code class=css>evenodd</code></a>’, <a
3832 href="#evenodd" title="section 8.2."><strong>8.2.</strong></a>
3834 <li><image>, <a href="#ltimagegt"
3835 title="section 6.1."><strong>6.1.</strong></a>
3837 <li>layers, <a href="#layers" title="section 5.1.">5.1.</a>
3839 <li><left>, <a href="#ltleftgt"
3840 title="section 8.3."><strong>8.3.</strong></a>
3842 <li>local coordinate system, <a href="#local-coordinate-system"
3843 title="section 4."><strong>4.</strong></a>
3845 <li>‘<a href="#luminance"><code class=css>luminance</code></a>’, <a
3846 href="#luminance" title="section 6.2."><strong>6.2.</strong></a>
3848 <li>mask, <a href="#MaskProperty"
3849 title="section 6.8."><strong>6.8.</strong></a>, <a href="#mask"
3850 title="section 6.10."><strong>6.10.</strong></a>, <a href="#mask0"
3851 title="section 4."><strong>4.</strong></a>
3853 <li>mask-box-image, <a href="#mask-box-image0"
3854 title="section 7.6."><strong>7.6.</strong></a>
3856 <li>mask box image area, <a href="#mask-box-image-area"
3857 title="section 7.4."><strong>7.4.</strong></a>
3859 <li>mask-box-image-outset, <a href="#mask-box-image-outset"
3860 title="section 7.4."><strong>7.4.</strong></a>
3862 <li>mask-box-image-repeat, <a href="#mask-box-image-repeat"
3863 title="section 7.5."><strong>7.5.</strong></a>
3865 <li>mask-box-image-slice, <a href="#mask-box-image-slice"
3866 title="section 7.2."><strong>7.2.</strong></a>
3868 <li>mask-box-image-source, <a href="#mask-box-image-source"
3869 title="section 7.1."><strong>7.1.</strong></a>
3871 <li>mask-box-image-width, <a href="#mask-box-image-width"
3872 title="section 7.3."><strong>7.3.</strong></a>
3874 <li>mask-clip, <a href="#mask-clip"
3875 title="section 6.5."><strong>6.5.</strong></a>
3877 <li><mask-element>, <a href="#ltmask-elementgt"
3878 title="section 6.1."><strong>6.1.</strong></a>
3880 <li><mask-image>, <a href="#ltmask-imagegt"
3881 title="section 6.1."><strong>6.1.</strong></a>
3883 <li>mask-image, <a href="#mask-image"
3884 title="section 6.1."><strong>6.1.</strong></a>
3886 <li>mask image area, <a href="#mask-image-area" title="section 7.">7.</a>
3888 <li><mask-layer>, <a href="#ltmask-layergt"
3889 title="section 6.8."><strong>6.8.</strong></a>
3891 <li>mask-origin, <a href="#mask-origin"
3892 title="section 6.6."><strong>6.6.</strong></a>
3894 <li>mask painting area, <a href="#mask-painting-area"
3895 title="section 6.5."><strong>6.5.</strong></a>, <a
3896 href="#mask-painting-area0" title="section 6.3.">6.3.</a>, <a
3897 href="#mask-painting-area1" title="section 6.4.">6.4.</a>
3899 <li>mask-position, <a href="#mask-position"
3900 title="section 6.4."><strong>6.4.</strong></a>
3902 <li>mask positioning area, <a href="#mask-positioning-area"
3903 title="section 6.6."><strong>6.6.</strong></a>
3905 <li><mask-reference>, <a href="#ltmask-referencegt"
3906 title="section 6.1."><strong>6.1.</strong></a>
3908 <li>mask-repeat, <a href="#mask-repeat"
3909 title="section 6.3."><strong>6.3.</strong></a>
3911 <li><a href="#ltmask-sizegt"><var><mask-size></var></a>, <a
3912 href="#ltmask-sizegt" title="section 6.7."><strong>6.7.</strong></a>
3914 <li>mask-size, <a href="#mask-size"
3915 title="section 6.7."><strong>6.7.</strong></a>
3917 <li>mask source, <a href="#mask-source"
3918 title="section 4."><strong>4.</strong></a>
3920 <li>mask-source-type, <a href="#mask-source-type"
3921 title="section 6.2."><strong>6.2.</strong></a>
3923 <li>mask-type, <a href="#mask-type"
3924 title="section 6.9."><strong>6.9.</strong></a>
3926 <li>‘<code class=css>no-clip</code>’
3927 <ul>
3928 <li>‘<a href="#mask-clip"><code class=property>mask-clip</code></a>’
3929 value, <a href="#no-clip"
3930 title="section 6.5."><strong>6.5.</strong></a>
3931 </ul>
3933 <li>‘<a href="#none"><code class=css>none</code></a>’, <a href="#none"
3934 title="section 6.1."><strong>6.1.</strong></a>
3936 <li>‘<a href="#nonzero"><code class=css>nonzero</code></a>’, <a
3937 href="#nonzero" title="section 8.2."><strong>8.2.</strong></a>
3939 <li>object bounding box units, <a href="#object-bounding-box-units"
3940 title="section 4."><strong>4.</strong></a>, <a
3941 href="#object-bounding-box-units0" title="section 8.4.">8.4.</a>
3943 <li>‘<code class=css>padding-box</code>’
3944 <ul>
3945 <li>‘<a href="#mask-clip"><code class=property>mask-clip</code></a>’
3946 value, <a href="#padding-box"
3947 title="section 6.5."><strong>6.5.</strong></a>
3949 <li>‘<a href="#mask-origin"><code
3950 class=property>mask-origin</code></a>’ value, <a href="#padding-box0"
3951 title="section 6.6."><strong>6.6.</strong></a>
3952 </ul>
3954 <li><a href="#ltpositiongt"><var><position></var></a>, <a
3955 href="#ltpositiongt" title="section 6.4."><strong>6.4.</strong></a>
3957 <li><a href="#ltrepeat-stylegt"><var><repeat-style></var></a>, <a
3958 href="#ltrepeat-stylegt" title="section 6.3."><strong>6.3.</strong></a>
3960 <li><right>, <a href="#ltrightgt"
3961 title="section 8.3."><strong>8.3.</strong></a>
3963 <li>‘<a href="#ltshapegt"><code class=css><shape></code></a>’,
3964 <a href="#ltshapegt" title="section 8.1."><strong>8.1.</strong></a>
3966 <li><a href="#ltsource-typegt"><var><source-type></var></a>, <a
3967 href="#ltsource-typegt" title="section 6.2."><strong>6.2.</strong></a>
3969 <li><top>, <a href="#lttopgt"
3970 title="section 8.3."><strong>8.3.</strong></a>
3972 <li>‘<a href="#lturlgt"><code class=css><url></code></a>’, <a
3973 href="#lturlgt" title="section 6.1."><strong>6.1.</strong></a>
3975 <li>user coordinate system, <a href="#user-coordinate-system"
3976 title="section 4."><strong>4.</strong></a>
3977 </ul>
3978 <!--end-index-->
3980 <h2 class=no-num id=property-index> Property index</h2>
3981 <!--begin-properties-->
3983 <table class=proptable>
3984 <thead>
3985 <tr>
3986 <th>Property
3988 <th>Values
3990 <th>Initial
3992 <th>Applies to
3994 <th>Inh.
3996 <th>Percentages
3998 <th>Media
4000 <tbody>
4001 <tr>
4002 <th><a class=property href="#ClipProperty">clip</a>
4004 <td><shape> | auto
4006 <td>see individual properties
4008 <td>Absolutely positioned elements. In SVG, it applies to elements which
4009 establish a new viewport, ‘pattern’ elements and ‘marker’
4010 elements.
4012 <td>no
4014 <td>N/A
4016 <td>visual
4018 <tr>
4019 <th><a class=property href="#clippath">clipPath</a>
4021 <td>
4023 <td>
4025 <td>
4027 <td>
4029 <td>
4031 <td>
4033 <tr>
4034 <th><a class=property href="#clip-path">clip-path</a>
4036 <td><shape> | <clip-source> | none
4038 <td>none
4040 <td>All elements. SVG container elements, graphics elements and
4041 ‘clipPath’
4043 <td>no
4045 <td>as specified
4047 <td>visual
4049 <tr>
4050 <th><a class=property href="#clip-rule">clip-rule</a>
4052 <td>nonzero | evenodd
4054 <td>nonzero
4056 <td>graphics elements within a ‘clipPath’ element
4058 <td>yes
4060 <td>N/A
4062 <td>visual
4064 <tr>
4065 <th><a class=property href="#mask">mask</a>
4067 <td>
4069 <td>
4071 <td>
4073 <td>
4075 <td>
4077 <td>
4079 <tr>
4080 <th><a class=property href="#MaskProperty">mask</a>
4082 <td><mask-layer>#
4084 <td>see individual properties
4086 <td>All elements. In SVG, it applies to container elements and graphics
4087 elements
4089 <td>no
4091 <td>see individual properties
4093 <td>visual
4095 <tr>
4096 <th><a class=property href="#mask-box-image0">mask-box-image</a>
4098 <td><‘mask-box-image-source’> ||
4099 <‘mask-box-image-slice’> [ /
4100 <‘mask-box-image-width’> | /
4101 <‘mask-box-image-width’>? /
4102 <‘mask-box-image-outset’> ]? ||
4103 <‘mask-box-image-repeat’>
4105 <td>See individual properties
4107 <td>See individual properties
4109 <td>no
4111 <td>N/A
4113 <td>visual
4115 <tr>
4116 <th><a class=property
4117 href="#mask-box-image-outset">mask-box-image-outset</a>
4119 <td>[ <length> | <number> ]{1,4}
4121 <td>0
4123 <td>All elements. In SVG, it applies to container elements and graphics
4124 elements.
4126 <td>no
4128 <td>N/A
4130 <td>visual
4132 <tr>
4133 <th><a class=property
4134 href="#mask-box-image-repeat">mask-box-image-repeat</a>
4136 <td>[ stretch | repeat | round | space ]{1,2}
4138 <td>stretch
4140 <td>All elements. In SVG, it applies to container elements and graphics
4141 elements.
4143 <td>no
4145 <td>N/A
4147 <td>visual
4149 <tr>
4150 <th><a class=property
4151 href="#mask-box-image-slice">mask-box-image-slice</a>
4153 <td>[<number> | <percentage>]{1,4} && fill?
4155 <td>0 fill
4157 <td>All elements. In SVG, it applies to container elements and graphics
4158 elements.
4160 <td>no
4162 <td>refer to size of the mask image
4164 <td>visual
4166 <tr>
4167 <th><a class=property
4168 href="#mask-box-image-source">mask-box-image-source</a>
4170 <td><mask-image>
4172 <td>none
4174 <td>All elements. In SVG, it applies to container elements and graphics
4175 elements.
4177 <td>no
4179 <td>N/A
4181 <td>visual
4183 <tr>
4184 <th><a class=property
4185 href="#mask-box-image-width">mask-box-image-width</a>
4187 <td>[ <length> | <percentage> | <number> | auto ]{1,4}
4189 <td>auto
4191 <td>All elements. In SVG, it applies to container elements and graphics
4192 elements.
4194 <td>no
4196 <td>relative to width/height of the mask box image area
4198 <td>visual
4200 <tr>
4201 <th><a class=property href="#mask-clip">mask-clip</a>
4203 <td><clip-box>#
4205 <td>border-box
4207 <td>All elements. In SVG, it applies to container elements and graphics
4208 elements
4210 <td>no
4212 <td>N/A
4214 <td>visual
4216 <tr>
4217 <th><a class=property href="#mask-image">mask-image</a>
4219 <td><mask-reference>
4221 <td>none
4223 <td>All elements. In SVG, it applies to container elements and graphics
4224 elements
4226 <td>no
4228 <td>N/A
4230 <td>visual
4232 <tr>
4233 <th><a class=property href="#mask-origin">mask-origin</a>
4235 <td><box>#
4237 <td>padding-box
4239 <td>All elements. In SVG, it applies to container elements and graphics
4240 elements
4242 <td>no
4244 <td>N/A
4246 <td>visual
4248 <tr>
4249 <th><a class=property href="#mask-position">mask-position</a>
4251 <td><position>#
4253 <td>0% 0%
4255 <td>All elements. In SVG, it applies to container elements and graphics
4256 elements
4258 <td>no
4260 <td>refer to size of mask painting area minus size of mask image; see
4261 text
4263 <td>visual
4265 <tr>
4266 <th><a class=property href="#mask-repeat">mask-repeat</a>
4268 <td><repeat-style>#
4270 <td>repeat
4272 <td>All elements. In SVG, it applies to container elements and graphics
4273 elements
4275 <td>no
4277 <td>N/A
4279 <td>visual
4281 <tr>
4282 <th><a class=property href="#mask-size">mask-size</a>
4284 <td><mask-size>#
4286 <td>auto
4288 <td>All elements. In SVG, it applies to container elements and graphics
4289 elements
4291 <td>no
4293 <td>see text
4295 <td>visual
4297 <tr>
4298 <th><a class=property href="#mask-source-type">mask-source-type</a>
4300 <td><source-type>#
4302 <td>auto
4304 <td>All elements. In SVG, it applies to container elements and graphics
4305 elements
4307 <td>no
4309 <td>N/A
4311 <td>visual
4313 <tr>
4314 <th><a class=property href="#mask-type">mask-type</a>
4316 <td>luminance | alpha
4318 <td>luminance
4320 <td>‘mask’ elements
4322 <td>no
4324 <td>N/A
4326 <td>visual
4327 </table>
4328 <!--end-properties-->
4329 </html>
4330 <!-- Keep this comment at the end of the file
4331 Local variables:
4332 mode: sgml
4333 sgml-declaration:"~/SGML/HTML4.decl"
4334 sgml-default-doctype-name:"html"
4335 sgml-minimize-attributes:t
4336 sgml-nofill-elements:("pre" "style" "br")
4337 sgml-live-element-indicator:t
4338 sgml-omittag:nil
4339 sgml-shorttag:nil
4340 sgml-namecase-general:t
4341 sgml-general-insert-case:lower
4342 sgml-always-quote-attributes:t
4343 sgml-indent-step:nil
4344 sgml-indent-data:t
4345 sgml-parent-document:nil
4346 sgml-exposed-tags:nil
4347 sgml-local-catalogs:nil
4348 sgml-local-ecat-files:nil
4349 End:
4350 -->
