masking/index.html@f0bee7474714
masking/index.html
Wed, 13 Mar 2013 13:16:38 -0700
- author
- Dirk Schulze <dschulze@adobe.com>
- date
- Wed, 13 Mar 2013 13:16:38 -0700
- changeset 746
- f0bee7474714
- parent 741
- cd0593275768
- child 805
- f984d3d17e42
- permissions
- -rw-r--r--
http://lists.w3.org/Archives/Public/www-style/2013Mar/0228.html
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-13 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 13 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-20130313/-->
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="#terminology"><span class=secno>4. </span>Terminology</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><a href="#conformance"><span class=secno>11. </span>Conformance</a>
268 <ul class=toc>
269 <li class=no-ref><a
270 href="#conformance-to-css-background-and-border"><span
271 class=secno>11.1. </span>Conformance to CSS Background and Borders</a>
272 </ul>
274 <li class=no-num><a href="#references"> References</a>
275 <ul class=toc>
276 <li class=no-num><a href="#normative-references"> Normative
277 references</a>
279 <li class=no-num><a href="#other-references"> Other references</a>
280 </ul>
282 <li class=no-num><a href="#index"> Index</a>
284 <li class=no-num><a href="#property-index"> Property index</a>
285 </ul>
286 <!--end-toc-->
288 <h2 id=intro><span class=secno>1. </span> Introduction</h2>
290 <p> With CSS Masking it is possible to specify another graphics element,
291 shape or file to be used as clipping region or an luminance or alpha mask
292 for compositing the current object into the background.
294 <p> A mask is applied using the ‘<a href="#mask"><code
295 class=property>mask</code></a>’, ‘<a href="#mask-image"><code
296 class=property>mask-image</code></a>’ or ‘<a
297 href="#mask-box-image0"><code class=property>mask-box-image</code></a>’
298 properties. The mask source may be defined using a <a class=element-name
299 href="#MaskElement">‘<code class=property>mask</code>’</a> element
300 referenced by the ‘<a href="#mask"><code
301 class=property>mask</code></a>’ property. Alternatively, for many simple
302 uses, the ‘<a href="#mask-image"><code
303 class=property>mask-image</code></a>’ property may refer directly to
304 graphical elements or images to be used as mask forgoing the need for an
305 explicit <a class=element-name href="#MaskElement">‘<code
306 class=property>mask</code>’</a> element. The ‘<a href="#mask"><code
307 class=property>mask</code></a>’ property is also a shorthand for other
308 masking properties. ‘<a href="#mask-box-image0"><code
309 class=property>mask-box-image</code></a>’ splits a mask image into 9
310 pieces. The pieces may be sliced, scaled and stretched in various ways to
311 fit the size of the mask image area.
313 <p> The effect of applying a mask is as if the mask images or mask source
314 elements are rendered into an off-screen image which has been initialized
315 to transparent black. The graphical object to which the mask is applied
316 will be painted onto the background through the mask, thus completely or
317 partially masking out parts of the graphical object.
319 <p> Clipping defines a visible region of a visual element. The region can
320 be specified with SVG <a
321 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/intro.html#TermGraphicsElement">graphics
322 element</a> or basic shapes. Everything outside of a region does not get
323 rendered.
325 <div class=example>
326 <div class=figure> <img alt="Example Mask" height=260px
327 src="images/luminance-mask.svg" width=655px>
328 <p class=caption> A luminance mask (middle) is applied on a shape filled
329 with a gradient (left). This results in a masked shape (right).
330 </div>
331 </div>
333 <h2 id=placement><span class=secno>2. </span>Module interactions</h2>
335 <p>This specification defines a set of CSS properties that affect the
336 visual rendering of elements to which those properties are applied; these
337 effects are applied after elements have been sized and positioned
338 according to the <a href="http://www.w3.org/TR/CSS2/visuren.html"
339 title="Visual formatting model">Visual formatting model</a> from <a
340 href="#CSS21" rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>. Some values of
341 these properties result in the creation of a <a
342 href="http://www.w3.org/TR/CSS2/visuren.html#containing-block"
343 title="Visual formatting model">containing block</a>, and/or the creation
344 of a <a href="http://www.w3.org/TR/CSS2/visuren.html#z-index"
345 title="Visual formatting model">stacking context</a>.
347 <h2 id=values><span class=secno>3. </span>Values</h2>
349 <p> This specification follows the <a
350 href="http://www.w3.org/TR/CSS21/about.html#property-defs">CSS property
351 definition conventions</a> from <a href="#CSS21"
352 rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>. Value types not defined in
353 this specification are defined in CSS Values and Units Module Level 3 <a
354 href="#CSS3VAL" rel=biblioentry>[CSS3VAL]<!--{{!CSS3VAL}}--></a>.
356 <p> In addition to the property-specific values listed in their
357 definitions, all properties defined in this specification also accept the
358 <a
359 href="http://www.w3.org/TR/CSS21/cascade.html#value-def-inherit">inherit</a>
360 keyword as their property value. For readability it has not been repeated
361 explicitly.
363 <h2 id=terminology><span class=secno>4. </span>Terminology</h2>
365 <p> When used in this specification, terms have the meanings assigned in
366 this section.
368 <dl>
369 <dt id=TermClientBoundingRect><dfn id=bounding-client-rect>bounding client
370 rect</dfn>
372 <dd>
373 <p> The union of all border boxes for the element that has an associated
374 CSS layout box and is not in the <code>http://www.w3.org/2000/svg</code>
375 namespace and its descendant elements. Or the object bounding box <a
376 href="#SVG11" rel=biblioentry>[SVG11]<!--{{!SVG11}}--></a>, if the
377 element does not have an associated CSS layout box and is in the
378 <code>http://www.w3.org/2000/svg</code> namespace (See <a
379 href="http://www.w3.org/TR/cssom-view/#dom-element-getboundingclientrect">getBoundingClientRect</a>
380 <a href="#CSSOM-VIEW"
381 rel=biblioentry>[CSSOM-VIEW]<!--{{CSSOM-VIEW}}--></a>).
383 <dt id=TermLocalCoordinateSystem><dfn id=local-coordinate-system>local
384 coordinate system</dfn>
386 <dt id=TermUserCoordinateSystem><dfn id=user-coordinate-system>user
387 coordinate system</dfn>
389 <dd>
390 <p> In general, a coordinate system defines locations and distances on
391 the current canvas. The current local coordinate system (also user
392 coordinate system) is the coordinate system that is currently active and
393 which is used to define how coordinates and lengths are located and
394 computed, respectively, on the current canvas <a href="#CSS3-TRANSFORMS"
395 rel=biblioentry>[CSS3-TRANSFORMS]<!--{{CSS3-TRANSFORMS}}--></a>.
397 <p> For elements that have an associated CSS layout box, the current user
398 coordinate system has its origin at the top-left corner of the <a
399 class=term href="#bounding-client-rect">bounding client rect</a> and one
400 unit equals one CSS pixel. The viewport for resolving percentage values
401 is defined by the width and height of the <a class=term
402 href="#bounding-client-rect">bounding client rect</a>.
404 <p> If the element does not have an associated CSS layout box and is in
405 the <code>http://www.w3.org/2000/svg</code> namespace, the current local
406 coordinate system has its origin at the top-left corner of the element's
407 nearest viewport.
409 <dt id=TermObjectBoundingBoxUnits><dfn id=object-bounding-box-units>object
410 bounding box units</dfn>
412 <dd> The <a class=term href="#bounding-client-rect">bounding client
413 rect</a> defines the coordinate system in which to resolve values, as
414 defined in <a
415 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/coords.html#ObjectBoundingBoxUnits">object
416 bounding box units</a> <a href="#SVG11"
417 rel=biblioentry>[SVG11]<!--{{!SVG11}}--></a>.
419 <dt id=TermMask><dfn id=mask0>mask</dfn>
421 <dd> An off-screen image which has been initialized to transparent black.
422 The graphical object to which the mask is applied will be painted onto
423 the background through the mask, thus completely or partially masking out
424 parts of the graphical object.
426 <dt id=TermMaskSource><dfn id=mask-source>mask source</dfn>
428 <dd> A mask defined by a <a class=element-name
429 href="#MaskElement">‘<code class=property>mask</code>’</a> element.
431 <dt id=TermClippingPath>clipping path
433 <dd> A combination of the SVG elements <a class=element-name
434 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/paths.html#PathElement">‘<code
435 class=property>path</code>’</a>, <a class=element-name
436 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/text.html#TextElement">‘<code
437 class=property>text</code>’</a> and <a
438 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/intro.html#TermBasicShapeElement">basic
439 shapes</a> which serve as the outline of a (in the absence of
440 anti-aliasing) 1-bit <a href="#TermMask">mask</a>, where everything on
441 the "inside" of the outline is allowed to show through but everything on
442 the outside is masked out. See ‘<a href="#clip-path"><code
443 class=property>clip-path</code></a>’.
444 </dl>
446 <p> Definitions of CSS properties and values in this specification are
447 analogous to definitions in CSS Backgrounds and Borders <a href="#CSS3BG"
448 rel=biblioentry>[CSS3BG]<!--{{!CSS3BG}}--></a>. To avoid redundancy, this
449 specification relies on descriptions and definitions of CSS Backgrounds
450 and Borders. The following terms in CSS Backgrounds and Borders have the
451 following meaning in this specification:
453 <table class=data id=term-matching>
454 <thead>
455 <tr>
456 <th>Term in <a href="#CSS3BG"
457 rel=biblioentry>[CSS3BG]<!--{{!CSS3BG}}--></a>
459 <th>Term in CSS Masking
461 <tbody>
462 <tr>
463 <th>background images
465 <td>mask images
467 <tr>
468 <th>background painting area
470 <td>mask painting area
472 <tr>
473 <th>background-size
475 <td>mask-size
477 <tr>
478 <th>background-position
480 <td>mask-position
482 <tr>
483 <th>background positioning area
485 <td>mask positioning area
487 <tr>
488 <th>border image area
490 <td>mask box image area
491 </table>
493 <h2 id=the-mask-rendering-model><span class=secno>5. </span>The Mask
494 Rendering Model</h2>
496 <p> The application of the ‘<a href="#clip-path"><code
497 class=property>clip-path</code></a>’, ‘<a href="#mask"><code
498 class=property>mask</code></a>’ or ‘<a href="#mask-image"><code
499 class=property>mask-image</code></a>’ properties to an element formatted
500 with the CSS box model establishes a stacking context in the same way that
501 CSS ‘<code class=property>opacity</code>’ does, and all the element's
502 descendants are rendered together as a group with the masking applied to
503 the group as a whole.
505 <p> The ‘<a href="#mask"><code class=property>mask</code></a>’ and
506 ‘<a href="#mask-image"><code class=property>mask-image</code></a>’
507 properties have no effect on the geometry of any element's CSS boxes.
509 <p> The compositing model follows the SVG compositing model <a
510 href="#SVG11" rel=biblioentry>[SVG11]<!--{{!SVG11}}--></a>: first any
511 filter effect is applied, then any clipping, masking and opacity. These
512 effects all apply after any other CSS effects such as ‘<code
513 class=property>border</code>’. As per SVG, the application of ‘<a
514 href="#mask"><code class=property>mask</code></a>’ or ‘<a
515 href="#mask-image"><code class=property>mask-image</code></a>’ has no
516 effect on hit-testing.
518 <h3 id=layering><span class=secno>5.1. </span>Layering Multiple Mask Images</h3>
520 <p>The mask of a box can have multiple <span class=index
521 id=layers>layers</span>. The number of layers is determined by the number
522 of comma-separated values in the ‘<a href="#mask-image"><code
523 class=property>mask-image</code></a>’ property. Note that a value of
524 ‘<a href="#none"><code class=property>none</code></a>’ still creates a
525 layer. See <a
526 href="http://www.w3.org/TR/css3-background/#layering">Layering Multiple
527 Background Images</a> <a href="#CSS3BG"
528 rel=biblioentry>[CSS3BG]<!--{{!CSS3BG}}--></a>.
530 <p>The first layer is the layer closest to the user, the next one is
531 painted behind the first, and so on. All mask images are transformed to
532 alpha masks (if necessary) and combined by compositing on the <a
533 href="#TermMask">mask</a>.
535 <h3 id=MaskValues><span class=secno>5.2. </span>Calculating mask values</h3>
537 <p> A mask may be interpreted using one of two different methods with
538 regards to calculating the mask values that will be multiplied with the
539 target alpha values.
541 <p> The first and simplest method of calculating the mask values is to use
542 the alpha channel of the mask source. In this case the mask value at a
543 given point is simply the value of the alpha channel at that point. The
544 color channels do not contribute to the mask value.
546 <p> The second method of calculating the mask values is to use the
547 luminance of the mask source. In this case the mask value at a given point
548 is computed from the color channel values and alpha channel value using
549 the following procedure.
551 <ol>
552 <li>Compute a luminance value from the color channel values.
553 <ul>
554 <li> If the computed value of ‘<code
555 class=property>color-interpolation</code>’ on the <a
556 class=element-name href="#MaskElement">‘<code
557 class=property>mask</code>’</a> element is ‘<code
558 class=property>linearRGB</code>’, convert the original image color
559 values (potentially in the sRGB color space) to the linear RGB color
560 space.
562 <li>Then, using non-premultiplied RGB color values, apply the
563 luminance-to-alpha coefficients (as defined in the <a
564 class=element-name
565 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/filters.html#feColorMatrixElement">‘<code
566 class=property>feColorMatrix</code>’</a> filter primitive <a
567 href="#SVG11" rel=biblioentry>[SVG11]<!--{{!SVG11}}--></a>) to convert
568 the RGB color values to luminance values.
569 </ul>
571 <li>Multiply the computed luminance value by the corresponding alpha value
572 to produce the mask value.
573 </ol>
575 <p>Regardless of the method used, the procedure for calculating mask values
576 assumes the content of the mask is a four-channel RGBA graphics object.
577 For other types of graphics objects, special handling is required as
578 follows.
580 <p>For a three-channel RGB graphics object that is used in a mask (e.g.,
581 when referencing a three-channel image file), the effect is as if the
582 object were converted into a four-channel RGBA image with the alpha
583 channel uniformly set to 1.
585 <p>For a single-channel image that is used in a mask (e.g., when
586 referencing a single-channel grayscale image file), the effect is as if
587 the object were converted into a four-channel RGBA image, where the single
588 channel from the referenced object is used to compute the three color
589 channels and the alpha channel is uniformly set to 1.
591 <p class=note>Note that when referencing a grayscale image file, the
592 transfer curve relating the encoded grayscale values to linear light
593 values must be taken into account when computing the color channels.
595 <p class=note>Note that SVG <a
596 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/intro.html#TermGraphicsElement">graphics
597 elements</a> (e.g., <a class=element-name
598 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/shapes.html#CircleElement">‘<code
599 class=property>circle</code>’</a> or <a class=element-name
600 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/text.html#TextElement">‘<code
601 class=property>text</code>’</a>) are all treated as four-channel RGBA
602 images for the purposes of masking operations.
604 <p>The effect of a mask is identical to what would have happened if there
605 were no mask but instead the alpha channel of the given object were
606 multiplied with the mask's resulting mask values.
608 <h2 id=masking><span class=secno>6. </span>Mask</h2>
610 <h3 id=the-mask-image><span class=secno>6.1. </span>The ‘<a
611 href="#mask-image"><code class=property>mask-image</code></a>’ property</h3>
613 <table class=propdef>
614 <tbody>
615 <tr>
616 <th>Name:
618 <td><dfn id=mask-image>mask-image</dfn>
620 <tr>
621 <th><a href="#values">Value</a>:
623 <td><a href="#ltmask-referencegt"><var><mask-reference></var></a>
625 <tr>
626 <th>Initial:
628 <td>none
630 <tr>
631 <th>Applies to:
633 <td>All elements. In SVG, it applies to <a
634 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/intro.html#TermContainerElement">container
635 elements</a> and <a
636 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/intro.html#TermGraphicsElement">graphics
637 elements</a>
639 <tr>
640 <th>Inherited:
642 <td>no
644 <tr>
645 <th>Percentages:
647 <td>N/A
649 <tr>
650 <th>Media:
652 <td>visual
654 <tr>
655 <th>Computed value:
657 <td>as specified, but with URIs made absolute
659 <tr>
660 <th>Animatable:
662 <td>no
663 </table>
665 <p>This property sets the mask image(s) or the mask source of an element.
666 Images are drawn with the first specified one on top (closest to the user)
667 and each subsequent image behind the previous one. Where:
669 <pre class=prod><var><dfn
670 id=ltmask-referencegt><mask-reference></dfn></var> = <a
671 href="#ltmask-imagegt"><var><mask-image></var></a># | <a
672 href="#ltmask-elementgt"><var><mask-element></var></a></pre>
674 <pre class=prod><var><dfn
675 id=ltmask-imagegt><mask-image></dfn></var> = <a
676 href="#ltimagegt"><var><image></var></a> | none </pre>
678 <pre class=prod><var><dfn
679 id=ltmask-elementgt><mask-element></dfn></var> = <a
680 href="#lturlgt"><var><url></var></a> | <var>child</var> | <a
681 href="#ltchild-selectorgt"><var><child-selector></var></a></pre>
683 <pre class=prod><dfn
684 id=ltchild-selectorgt><child-selector></dfn> = select(<a
685 href="#ltcompound-selectorgt"><var><compound-selector></var></a>#)</pre>
687 <p class=note>A <a
688 href="#ltmask-elementgt"><var><mask-element></var></a> can just be
689 specified as a single value and can not contibute to a list of <a
690 href="#ltmask-referencegt"><var><mask-reference></var></a> values.
691 Otherwise the specified value of the property is invalid. (See examples
692 below.)
694 <dl>
695 <dt> <dfn id=lturlgt>‘<code class=css><url></code>’</dfn>
697 <dd> A URL reference to a <a class=element-name
698 href="#MaskElement">‘<code class=property>mask</code>’</a> element
699 (for example ‘<code class=css>url(commonmasks.svg#mask)</code>’) or
700 an <a href="#ltimagegt"><var><image></var></a>.
702 <dt>‘<code class=css>child</code>’
704 <dd> A keyword to indicate that the last direct sibling <a
705 class=element-name href="#MaskElement">‘<code
706 class=property>mask</code>’</a> element of the element the ‘<a
707 href="#mask-image"><code class=property>mask-image</code></a>’ property
708 is applied should be used as the mask source. It is equivalent to
709 ‘<code class=css>select(mask:last-of-type)</code>’.
711 <dt>‘<a href="#ltchild-selectorgt"><code
712 class=css><child-selector></code></a>’
714 <dd> A comma-separated list of <a
715 href="http://dev.w3.org/csswg/selectors4/#compound">compound
716 selector</a>s scoped at the element to which the ‘<a
717 href="#mask-image"><code class=property>mask-image</code></a>’ property
718 is applied. The first matching element in <a
719 href="http://www.w3.org/TR/2012/WD-dom-20120405/#concept-tree-order">tree
720 order</a> (as defined in <a href="#DOM"
721 rel=biblioentry>[DOM]<!--{{!DOM}}--></a>) as a result of evaluating the
722 list of selectors is taken as the mask source. If there are no matching
723 elements the mask source is invalid.
725 <dt><dfn id=ltcompound-selectorgt>‘<code
726 class=css><compound-selector></code>’</dfn>
728 <dd> A <a href="http://dev.w3.org/csswg/selectors4/#compound">compound
729 selector</a> as defined in <a href="#SELECTORS4"
730 rel=biblioentry>[SELECTORS4]<!--{{!SELECTORS4}}--></a>.
732 <dd>
734 <dt><dfn id=ltimagegt><image></dfn>
736 <dd> A 2D image. (See <a href="#CSS3-IMAGES"
737 rel=biblioentry>[CSS3-IMAGES]<!--{{!CSS3-IMAGES}}--></a>.)
739 <dt><dfn id=none>‘<code class=css>none</code>’</dfn>
741 <dd> A value of ‘<a href="#none"><code class=css>none</code></a>’
742 counts as an image layer but does not mask the element.
743 </dl>
745 <p class=note>If the URI in the ‘<code class=css>url()</code>’ function
746 has a fragment identifier, the <a
747 href="#ltmask-referencegt"><var><mask-reference></var></a> is
748 treated as <a
749 href="#ltmask-elementgt"><var><mask-element></var></a>, otherwise as
750 <a href="#ltmask-imagegt"><var><mask-image></var></a>.
752 <p>An invalid or non-existent mask source is ignored and no masking is
753 applied.
755 <p>A mask image that is empty (zero width or zero height), that fails to
756 download, is non-existent, or that cannot be displayed (e.g. because it is
757 not in a supported image format) is ignored. No masking is applied.
759 <p>See the section <a href="#layering">“Layering multiple mask
760 images”</a> for how ‘<a href="#mask-image"><code
761 class=property>mask-image</code></a>’ interacts with other
762 comma-separated mask properties to form each mask image layer.
764 <div class=example>
765 <p>Some examples specifying mask images:
767 <pre>
768 body { mask-image: linear-gradient(black 0%, transparent 100%) }
769 p { mask-image: none }
770 div { mask-image: url(tl.png), url(tr.png) }
771 </pre>
773 <p>Some examples of a specified mask source:
775 <pre>
776 img { mask-image: url(#mask) }
777 span { mask-image: url(resources.svg#mask2) }
778 </pre>
780 <p>Examples of <i>invalid</i> mask source usages:
782 <pre>
783 p { mask-image: url(#mask), url(tl.png) }
784 img { mask-image: url(#mask), url(resources.svg#mask2) }
785 </pre>
787 <p>A <a href="#ltmask-elementgt"><var><mask-element></var></a> value
788 that is either used together with another <a
789 href="#ltmask-elementgt"><var><mask-element></var></a> value or an
790 <a href="#ltmask-imagegt"><var><mask-image></var></a> value makes
791 the whole specified ‘<a href="#mask-image"><code
792 class=property>mask-image</code></a>’ value list invalid.
793 </div>
795 <h3 id=the-mask-source-type><span class=secno>6.2. </span>The ‘<a
796 href="#mask-source-type"><code
797 class=property>mask-source-type</code></a>’ property</h3>
799 <table class=propdef>
800 <tbody>
801 <tr>
802 <th>Name:
804 <td><dfn id=mask-source-type>mask-source-type</dfn>
806 <tr>
807 <th><a href="#values">Value</a>:
809 <td><a href="#ltsource-typegt"><var><source-type></var></a>#
811 <tr>
812 <th>Initial:
814 <td>auto
816 <tr>
817 <th>Applies to:
819 <td>All elements. In SVG, it applies to <a
820 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/intro.html#TermContainerElement">container
821 elements</a> and <a
822 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/intro.html#TermGraphicsElement">graphics
823 elements</a>
825 <tr>
826 <th>Inherited:
828 <td>no
830 <tr>
831 <th>Percentages:
833 <td>N/A
835 <tr>
836 <th>Media:
838 <td>visual
840 <tr>
841 <th>Computed value:
843 <td>as specified
845 <tr>
846 <th>Animatable:
848 <td>no
849 </table>
851 <p>The ‘<a href="#mask-source-type"><code
852 class=property>mask-source-type</code></a>’ property indicates whether
853 the <a href="#ltmask-referencegt"><var><mask-reference></var></a> is
854 treated as luminance mask or alpha mask. (See <a
855 href="#MaskValues">Calculating mask values</a>.)
857 <pre class=prod><dfn
858 id=ltsource-typegt><var><source-type></var></dfn> = alpha | luminance | auto</pre>
860 <p>Values have the following meanings:
862 <dl>
863 <dt><dfn id=alpha>‘<code class=css>alpha</code>’</dfn>
865 <dd> A value of ‘<a href="#alpha"><code class=css>alpha</code></a>’
866 indicates that the alpha values of the mask image should be used as the
867 mask values. See <a href="#MaskValues">Calculating mask values</a>.
869 <dt><dfn id=luminance>‘<code class=css>luminance</code>’</dfn>
871 <dd> A value of ‘<a href="#luminance"><code
872 class=css>luminance</code></a>’ indicates that the luminance values of
873 the mask image should be used as the mask values. See <a
874 href="#MaskValues">Calculating mask values</a>.
876 <dt><dfn id=auto>‘<code class=css>auto</code>’</dfn>
878 <dd>
879 <p> If the <a
880 href="#ltmask-referencegt"><var><mask-reference></var></a> of the
881 ‘<a href="#mask-image"><code class=property>mask-image</code></a>’
882 property is of type <a
883 href="#ltmask-imagegt"><var><mask-image></var></a> the luminance
884 values of the mask image should be used as the mask values.
886 <p> If the <a
887 href="#ltmask-referencegt"><var><mask-reference></var></a> of the
888 ‘<a href="#mask-image"><code class=property>mask-image</code></a>’
889 property is of type <a
890 href="#ltmask-elementgt"><var><mask-element></var></a> the alpha
891 values of the mask image should be used as the mask values.
892 </dl>
894 <div class=example>
895 <p> In the following example, the ‘<a href="#mask-type"><code
896 class=property>mask-type</code></a>’ property sets the mask type value
897 for the <a class=element-name href="#MaskElement">‘<code
898 class=property>mask</code>’</a> element to ‘<a href="#alpha"><code
899 class=css>alpha</code></a>’. The ‘<a href="#mask-image"><code
900 class=property>mask-image</code></a>’ property has a reference to this
901 <a class=element-name href="#MaskElement">‘<code
902 class=property>mask</code>’</a> element and the ‘<a
903 href="#mask-source-type"><code
904 class=property>mask-source-type</code></a>’ property has a value of
905 ‘<a href="#luminance"><code class=css>luminance</code></a>’. The
906 ‘<a href="#mask-source-type"><code
907 class=property>mask-source-type</code></a>’ property will override the
908 definition of ‘<a href="#mask-type"><code
909 class=property>mask-type</code></a>’ to ‘<a href="#luminance"><code
910 class=css>luminance</code></a>’.
912 <pre>
913 <mask id="SVGMask" mask-type="alpha" maskContentUnits="objectBoundingBox">
914 <radialGradient id="radialFill">
915 <stop stop-color="white" offset="0"/>
916 <stop stop-color="black" offset="1"/>
917 </radialGradient>
918 <circle fill="url(#radialFill)" cx="0.5" cy="0.5" r="0.5"/>
919 </mask>
921 <style>
922 rect {
923 mask-image: url(#SVGMask);
924 mask-source-type: luminance;
925 }
926 </style>
928 <rect width="200" height="200" fill="green"/>
929 </pre>
930 </div>
932 <h3 id=the-mask-repeat><span class=secno>6.3. </span>The ‘<a
933 href="#mask-repeat"><code class=property>mask-repeat</code></a>’
934 property</h3>
936 <table class=propdef>
937 <tbody>
938 <tr>
939 <th>Name:
941 <td><dfn id=mask-repeat>mask-repeat</dfn>
943 <tr>
944 <th><a href="#values">Value</a>:
946 <td><a href="#ltrepeat-stylegt"><var><repeat-style></var></a>#
948 <tr>
949 <th>Initial:
951 <td>repeat
953 <tr>
954 <th>Applies to:
956 <td>All elements. In SVG, it applies to <a
957 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/intro.html#TermContainerElement">container
958 elements</a> and <a
959 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/intro.html#TermGraphicsElement">graphics
960 elements</a>
962 <tr>
963 <th>Inherited:
965 <td>no
967 <tr>
968 <th>Percentages:
970 <td>N/A
972 <tr>
973 <th>Media:
975 <td>visual
977 <tr>
978 <th>Computed value:
980 <td>A list, each item consisting of: two keywords, one per dimension
982 <tr>
983 <th>Animatable:
985 <td>no
986 </table>
988 <p>Specifies how mask images are tiled after they have been <a
989 href="#the-mask-size">sized</a> and <a
990 href="#the-mask-position">positioned</a>. Where
992 <pre class=prod><dfn
993 id=ltrepeat-stylegt><var><repeat-style></var></dfn> = repeat-x | repeat-y | [repeat | space | round | no-repeat]{1,2}</pre>
995 <p>See <a
996 href="http://www.w3.org/TR/css3-background/#the-background-repeat">Tiling
997 Images: the ‘<code class=property>background-repeat</code>’
998 property</a> <a href="#CSS3BG"
999 rel=biblioentry>[CSS3BG]<!--{{!CSS3BG}}--></a> for the definitions of the
1000 property values.
1002 <div class=example>
1003 <p style="display:none">Example(s):
1005 <pre>
1006 body {
1007 background-color: blue;
1008 mask-image: url(dot-mask.png) luminance;
1009 mask-repeat: space;
1010 }
1011 </pre>
1013 <div class=figure>
1014 <p><img alt="Image of an element with a dotted mask."
1015 src="images/mask-repeat.svg" style="border: solid black 1px;" width=240>
1017 <p class=caption>The effect of ‘<code class=property>space</code>’:
1018 the mask image of a dot is tiled to cover the whole <a class=index
1019 href="#mask-painting-area" id=mask-painting-area0>mask painting area</a>
1020 and the mask images are equally spaced.
1021 </div>
1022 </div>
1024 <p>See the section <a href="#layering">“Layering multiple mask
1025 images”</a> for how ‘<a href="#mask-repeat"><code
1026 class=property>mask-repeat</code></a>’ interacts with other
1027 comma-separated mask properties to form each mask image layer.
1029 <h3 id=the-mask-position><span class=secno>6.4. </span>The ‘<a
1030 href="#mask-position"><code class=property>mask-position</code></a>’
1031 property</h3>
1033 <table class=propdef>
1034 <tbody>
1035 <tr>
1036 <th>Name:
1038 <td><dfn id=mask-position>mask-position</dfn>
1040 <tr>
1041 <th><a href="#values">Value</a>:
1043 <td><a href="#ltpositiongt"><var><position></var></a>#
1045 <tr>
1046 <th>Initial:
1048 <td>0% 0%
1050 <tr>
1051 <th>Applies to:
1053 <td>All elements. In SVG, it applies to <a
1054 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/intro.html#TermContainerElement">container
1055 elements</a> and <a
1056 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/intro.html#TermGraphicsElement">graphics
1057 elements</a>
1059 <tr>
1060 <th>Inherited:
1062 <td>no
1064 <tr>
1065 <th>Percentages:
1067 <td>refer to size of <a class=index href="#mask-painting-area"
1068 id=mask-painting-area1>mask painting area</a> <em>minus</em> size of
1069 mask image; see text
1071 <tr>
1072 <th>Media:
1074 <td>visual
1076 <tr>
1077 <th>Computed value:
1079 <td>A list, each item consisting of: two keywords representing the
1080 origin and two offsets from that origin, each given as an absolute
1081 length (if given a <length>), otherwise as a percentage.
1083 <tr>
1084 <th>Animatable:
1086 <td>as <a
1087 href="http://dev.w3.org/csswg/css3-transitions/#animtype-repeatable-list">repeatable
1088 list</a> of <a
1089 href="http://dev.w3.org/csswg/css3-transitions/#animtype-simple-list">simple
1090 list</a> of <a
1091 href="http://dev.w3.org/csswg/css3-transitions/#animtype-lpcalc">length,
1092 percentage, or calc</a>
1093 </table>
1095 <p>Where
1097 <pre class=prod><dfn id=ltpositiongt><var><position></var></dfn> = [
1098 [ left | center | right | top | bottom | <var><percentage></var> | <var><length></var> ]
1099 |
1100 [ left | center | right | <var><percentage></var> | <var><length></var> ]
1101 [ top | center | bottom | <var><percentage></var> | <var><length></var> ]
1102 |
1103 [ center | [ left | right ] [ <var><percentage></var> | <var><length></var> ]? ] &&
1104 [ center | [ top | bottom ] [ <var><percentage></var> | <var><length></var> ]? ]
1105 ]</pre>
1107 <p>See <a
1108 href="http://www.w3.org/TR/css3-background/#the-background-position">Positioning
1109 Images: the ‘<code class=property>background-position</code>’
1110 property</a> <a href="#CSS3BG"
1111 rel=biblioentry>[CSS3BG]<!--{{!CSS3BG}}--></a> for the definitions of the
1112 property values.
1114 <div class=example>
1115 <p>In the example below, the (single) image is placed in the lower-right
1116 corner of the viewport.
1118 <pre>
1119 body {
1120 mask-image: url("logo.png");
1121 mask-position: 100% 100%;
1122 mask-repeat: no-repeat;
1123 }
1124 </pre>
1125 </div>
1127 <div class=example>
1128 <p>Mask positions can also be relative to other corners than the top left.
1129 E.g., the following puts the background image 10px from the bottom and
1130 3em from the right:
1132 <pre>mask-position: right 3em bottom 10px</pre>
1133 </div>
1135 <p>See the section <a href="#layering">“Layering multiple mask
1136 images”</a> for how ‘<a href="#mask-position"><code
1137 class=property>mask-position</code></a>’ interacts with other
1138 comma-separated mask properties to form each mask image layer.
1140 <h3 id=the-mask-clip><span class=secno>6.5. </span>The ‘<a
1141 href="#mask-clip"><code class=property>mask-clip</code></a>’ property</h3>
1143 <table class=propdef>
1144 <tbody>
1145 <tr>
1146 <th>Name:
1148 <td><dfn id=mask-clip>mask-clip</dfn>
1150 <tr>
1151 <th><a href="#values">Value</a>:
1153 <td><a href="#ltclip-boxgt"><var><clip-box></var></a>#
1155 <tr>
1156 <th>Initial:
1158 <td>border-box
1160 <tr>
1161 <th>Applies to:
1163 <td>All elements. In SVG, it applies to <a
1164 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/intro.html#TermContainerElement">container
1165 elements</a> and <a
1166 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/intro.html#TermGraphicsElement">graphics
1167 elements</a>
1169 <tr>
1170 <th>Inherited:
1172 <td>no
1174 <tr>
1175 <th>Percentages:
1177 <td>N/A
1179 <tr>
1180 <th>Media:
1182 <td>visual
1184 <tr>
1185 <th>Computed value:
1187 <td>as specified
1189 <tr>
1190 <th>Animatable:
1192 <td>no
1193 </table>
1195 <p>Determines the <dfn id=mask-painting-area>mask painting area</dfn>,
1196 which determines the area that is affected by the mask. The painted
1197 content of an element may be resricted to this area. The syntax of the
1198 property is given with
1200 <pre class=prod><dfn id=ltclip-boxgt><var><clip-box></var></dfn> = <a
1201 href="#ltboxgt"><var><box></var></a> | no-clip</pre>
1203 <pre class=prod><dfn
1204 id=ltboxgt><var><box></var></dfn> = border-box | padding-box | content-box</pre>
1206 <p>Values have the following meanings:
1208 <dl>
1209 <dt><dfn id=border-box title="''border-box''!!'mask-clip' value"> ‘<code
1210 class=css>border-box</code>’</dfn>
1212 <dd>The painted content is rectricted to (clipped to) the <span>border
1213 box</span> respectively <span>painting box</span> for objects without
1214 associated layout box.
1216 <dt><dfn id=padding-box title="''padding-box''!!'mask-clip' value">
1217 ‘<code class=css>padding-box</code>’</dfn>
1219 <dd>The painted content is rectricted to (clipped to) the <span>padding
1220 box.</span>
1222 <dt><dfn id=content-box title="''content-box''!!'mask-clip' value">
1223 ‘<code class=css>content-box</code>’</dfn>
1225 <dd>The painted content is rectricted to (clipped to) the <span>content
1226 box</span> respectively <span>object bounding box</span> <a href="#SVG11"
1227 rel=biblioentry>[SVG11]<!--{{!SVG11}}--></a> for objects without
1228 associated layout box.
1230 <dt><dfn id=no-clip title="''no-clip''!!'mask-clip' value"> ‘<code
1231 class=css>no-clip</code>’</dfn>
1233 <dd>The painted content is not restricted (not clipped). The <a
1234 href="#mask-painting-area">mask painting area</a> is set to the <a
1235 href="#bounding-client-rect">bounding client rect</a>.
1236 </dl>
1238 <p class=note>Note that there is no corresponding box for ‘<code
1239 class=css>padding-box</code>’ on objects without associated layout box
1240 and ‘<a href="#content-box0"><code class=css>content-box</code></a>’
1241 is choosen instead.
1243 <p>See the section <a href="#layering">“Layering multiple mask
1244 images”</a> for how ‘<a href="#mask-clip"><code
1245 class=property>mask-clip</code></a>’ interacts with other
1246 comma-separated mask properties to form each mask image layer.
1248 <h3 id=the-mask-origin><span class=secno>6.6. </span>The ‘<a
1249 href="#mask-origin"><code class=property>mask-origin</code></a>’
1250 property</h3>
1252 <table class=propdef>
1253 <tbody>
1254 <tr>
1255 <th>Name:
1257 <td><dfn id=mask-origin>mask-origin</dfn>
1259 <tr>
1260 <th><a href="#values">Value</a>:
1262 <td><a href="#ltboxgt"><var><box></var></a>#
1264 <tr>
1265 <th>Initial:
1267 <td>padding-box
1269 <tr>
1270 <th>Applies to:
1272 <td>All elements. In SVG, it applies to <a
1273 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/intro.html#TermContainerElement">container
1274 elements</a> and <a
1275 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/intro.html#TermGraphicsElement">graphics
1276 elements</a>
1278 <tr>
1279 <th>Inherited:
1281 <td>no
1283 <tr>
1284 <th>Percentages:
1286 <td>N/A
1288 <tr>
1289 <th>Media:
1291 <td>visual
1293 <tr>
1294 <th>Computed value:
1296 <td>as specified
1298 <tr>
1299 <th>Animatable:
1301 <td>no
1302 </table>
1304 <p>For elements rendered as a single box, specifies the <dfn
1305 id=mask-positioning-area>mask positioning area</dfn>. For elements
1306 rendered as multiple boxes (e.g., inline boxes on several lines, boxes on
1307 several pages) specifies which boxes ‘<code
1308 class=property>box-decoration-break</code>’ operates on to determine the
1309 mask positioning area(s).
1311 <dl>
1312 <dt><dfn id=padding-box0 title="''padding-box''!!'mask-origin' value">
1313 ‘<code class=css>padding-box</code>’</dfn>
1315 <dd>The position is relative to the padding box. (For single boxes
1316 ‘<code class=css>0 0</code>’ is the upper left corner of the padding
1317 edge, ‘<code class=css>100% 100%</code>’ is the lower right corner.)
1319 <dt><dfn id=border-box0 title="''border-box''!!'mask-origin' value">
1320 ‘<code class=css>border-box</code>’</dfn>
1322 <dd>The position is relative to the border box respectively <span>painting
1323 box</span> for objects without associated layout box.
1325 <dt><dfn id=content-box0>‘<code class=css>content-box</code>’</dfn>
1327 <dd>The position is relative to the content box respectively object
1328 bounding box <a href="#SVG11"
1329 rel=biblioentry>[SVG11]<!--{{!SVG11}}--></a> for objects without
1330 associated layout box.
1331 </dl>
1333 <p class=note>Note that there is no corresponding box for ‘<code
1334 class=css>padding-box</code>’ on objects without associated layout box
1335 and ‘<a href="#content-box0"><code class=css>content-box</code></a>’
1336 is choosen instead.
1338 <p class=note>Note that if ‘<a href="#mask-clip"><code
1339 class=property>mask-clip</code></a>’ is ‘<code
1340 class=css>padding-box</code>’, ‘<a href="#mask-origin"><code
1341 class=property>mask-origin</code></a>’ is ‘<code
1342 class=css>border-box</code>’, ‘<a href="#mask-position"><code
1343 class=property>mask-position</code></a>’ is ‘<code class=css>top
1344 left</code>’ (the initial value), and the element has a non-zero border,
1345 then the top and left of the mask image will be clipped.
1347 <p>See the section <a href="#layering">“Layering multiple mask
1348 images”</a> for how ‘<a href="#mask-origin"><code
1349 class=property>mask-origin</code></a>’ interacts with other
1350 comma-separated mask properties to form each mask image layer.
1352 <h3 id=the-mask-size><span class=secno>6.7. </span>The ‘<a
1353 href="#mask-size"><code class=property>mask-size</code></a>’ property</h3>
1355 <table class=propdef>
1356 <tbody>
1357 <tr>
1358 <th>Name:
1360 <td><dfn id=mask-size>mask-size</dfn>
1362 <tr>
1363 <th><a href="#values">Value</a>:
1365 <td><a href="#ltmask-sizegt"><var><mask-size></var></a>#
1367 <tr>
1368 <th>Initial:
1370 <td>auto
1372 <tr>
1373 <th>Applies to:
1375 <td>All elements. In SVG, it applies to <a
1376 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/intro.html#TermContainerElement">container
1377 elements</a> and <a
1378 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/intro.html#TermGraphicsElement">graphics
1379 elements</a>
1381 <tr>
1382 <th>Inherited:
1384 <td>no
1386 <tr>
1387 <th>Percentages:
1389 <td>see text
1391 <tr>
1392 <th>Media:
1394 <td>visual
1396 <tr>
1397 <th>Computed value:
1399 <td>as specified, but with lengths made absolute
1401 <tr>
1402 <th>Animatable:
1404 <td>as <a
1405 href="http://dev.w3.org/csswg/css3-transitions/#animtype-repeatable-list">repeatable
1406 list</a> of <a
1407 href="http://dev.w3.org/csswg/css3-transitions/#animtype-simple-list">simple
1408 list</a> of <a
1409 href="http://dev.w3.org/csswg/css3-transitions/#animtype-lpcalc">length,
1410 percentage, or calc</a> (<span class=note>This means keyword values are
1411 not animatable.</span>)
1412 </table>
1414 <p>Specifies the size of the mask images. Where
1416 <pre class=prod><dfn
1417 id=ltmask-sizegt><var><mask-size></var></dfn> = [ <var><length></var> | <var><percentage></var> | auto ]{1,2} | cover | contain</pre>
1419 <p>See <a
1420 href="http://www.w3.org/TR/css3-background/#the-background-size">Sizing
1421 Images: the ‘background-size’ property</a> <a href="#CSS3BG"
1422 rel=biblioentry>[CSS3BG]<!--{{!CSS3BG}}--></a> for the definitions of the
1423 property values.
1425 <p>See the section <a href="#layering">“Layering multiple mask
1426 images”</a> for how ‘<a href="#mask-size"><code
1427 class=property>mask-size</code></a>’ interacts with other
1428 comma-separated mask properties to form each mask image layer.
1430 <h3 id=mask-property><span class=secno>6.8. </span>The ‘<a
1431 href="#mask"><code class=property>mask</code></a>’ property</h3>
1433 <table class=propdef>
1434 <tbody>
1435 <tr>
1436 <th>Name:
1438 <td><dfn id=MaskProperty>mask</dfn>
1440 <tr>
1441 <th>Value:
1443 <td><a href="#ltmask-layergt"><var><mask-layer></var></a>#
1445 <tr>
1446 <th>Initial:
1448 <td>see individual properties
1450 <tr>
1451 <th>Applies to:
1453 <td>All elements. In SVG, it applies to <a
1454 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/intro.html#TermContainerElement">container
1455 elements</a> and <a
1456 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/intro.html#TermGraphicsElement">graphics
1457 elements</a>
1459 <tr>
1460 <th>Inherited:
1462 <td>no
1464 <tr>
1465 <th>Percentages:
1467 <td>see individual properties
1469 <tr>
1470 <th>Media:
1472 <td>visual
1474 <tr>
1475 <th>Computed value:
1477 <td>see individual properties
1479 <tr>
1480 <th>Animatable:
1482 <td>see individual properties
1483 </table>
1485 <p>Where
1487 <pre class=prod><dfn id=ltmask-layergt><mask-layer></dfn> = <a
1488 href="#ltmask-referencegt"><var><mask-reference></var></a> <a
1489 href="#ltsource-typegt"><var><source-type></var></a>? || <a
1490 href="#ltpositiongt"><var><position></var></a> [ / <a
1491 href="#ltmask-sizegt"><var><mask-size></var></a> ]? || <a
1492 href="#ltrepeat-stylegt"><var><repeat-style></var></a> || <a
1493 href="#ltboxgt"><var><box></var></a> || <a
1494 href="#ltclip-boxgt"><var><clip-box></var></a></pre>
1496 <p> If one <a href="#ltboxgt"><var><box></var></a> value is present
1497 then it sets both ‘<a href="#mask-origin"><code
1498 class=property>mask-origin</code></a>’ and ‘<a href="#mask-clip"><code
1499 class=property>mask-clip</code></a>’ to that value. If two <a
1500 href="#ltboxgt"><var><box></var></a> values are present, then the
1501 first sets ‘<a href="#mask-origin"><code
1502 class=property>mask-origin</code></a>’ and the second ‘<a
1503 href="#mask-clip"><code class=property>mask-clip</code></a>’.
1505 <p class=note> Note that the properties ‘<a href="#mask-image"><code
1506 class=property>mask-image</code></a>’, ‘<a href="#mask-repeat"><code
1507 class=property>mask-repeat</code></a>’, ‘<a
1508 href="#mask-position"><code class=property>mask-position</code></a>’,
1509 ‘<a href="#mask-clip"><code class=property>mask-clip</code></a>’,
1510 ‘<a href="#mask-origin"><code class=property>mask-origin</code></a>’
1511 and ‘<a href="#mask-size"><code class=property>mask-size</code></a>’
1512 have no affect on <a class=element-name href="#MaskElement">‘<code
1513 class=property>mask</code>’</a> elements.
1515 <h3 id=the-mask-type><span class=secno>6.9. </span>The ‘<a
1516 href="#mask-type"><code class=property>mask-type</code></a>’ property</h3>
1518 <table class=propdef>
1519 <tbody>
1520 <tr>
1521 <th>Name:
1523 <td><dfn id=mask-type>mask-type</dfn>
1525 <tr>
1526 <th><a href="#values">Value</a>:
1528 <td>luminance | alpha
1530 <tr>
1531 <th>Initial:
1533 <td>luminance
1535 <tr>
1536 <th>Applies to:
1538 <td><a class=element-name href="#MaskElement">‘<code
1539 class=property>mask</code>’</a> elements
1541 <tr>
1542 <th>Inherited:
1544 <td>no
1546 <tr>
1547 <th>Percentages:
1549 <td>N/A
1551 <tr>
1552 <th>Media:
1554 <td>visual
1556 <tr>
1557 <th>Computed value:
1559 <td>as specified
1561 <tr>
1562 <th>Animatable:
1564 <td>no
1565 </table>
1567 <p>The ‘<a href="#mask-type"><code class=property>mask-type</code></a>’
1568 property defines whether the content of the <a class=element-name
1569 href="#MaskElement">‘<code class=property>mask</code>’</a> is treated
1570 as as luminance mask or alpha mask, as described in <a
1571 href="#MaskValues">Calculating mask values</a>.
1573 <p>Values have the following meanings:
1575 <dl>
1576 <dt>‘<a href="#luminance"><code class=css>luminance</code></a>’
1578 <dd>Indicates that the luminance values of the mask should be used.
1580 <dt>‘<a href="#alpha"><code class=css>alpha</code></a>’
1582 <dd>Indicates that the alpha values of the mask should be used.
1583 </dl>
1585 <p>The ‘<a href="#mask-type"><code class=property>mask-type</code></a>’
1586 property is a presentation attribute for SVG elements.
1588 <h3 id=MaskElement><span class=secno>6.10. </span>The <a class=element-name
1589 href="#mask">‘<code class=property>mask</code>’</a> element</h3>
1591 <table class=propdef summary="mask element">
1592 <tbody>
1593 <tr>
1594 <th>Name:
1596 <td><dfn id=mask>mask</dfn>
1598 <tr>
1599 <th>Categories:
1601 <td><a
1602 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/intro.html#TermContainerElement">Container
1603 element</a>
1605 <tr>
1606 <th>Content model:
1608 <td>Any number of the following elements, in any order:
1609 <ul class=no-bullets>
1610 <li><a
1611 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/intro.html#TermAnimationElement">animation</a>
1612 <span class=expanding> — <a
1613 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/animate.html#AnimateElement"><span
1614 class=element-name>‘animate’</span></a>, <a
1615 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/animate.html#AnimateColorElement"><span
1616 class=element-name>‘animateColor’</span></a>, <a
1617 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/animate.html#AnimateMotionElement"><span
1618 class=element-name>‘animateMotion’</span></a>, <a
1619 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/animate.html#AnimateTransformElement"><span
1620 class=element-name>‘animateTransform’</span></a>, <a
1621 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/animate.html#SetElement"><span
1622 class=element-name>‘set’</span></a></span>
1624 <li><a
1625 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/intro.html#TermDescriptiveElement">descriptive</a>
1626 <span class=expanding> — <a
1627 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/struct.html#DescElement"><span
1628 class=element-name>‘desc’</span></a>, <a
1629 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/struct.html#TitleElement"><span
1630 class=element-name>‘title’</span></a>, <a
1631 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/metadata.html#MetadataElement"><span
1632 class=element-name>‘metadata’</span></a></span>
1634 <li><a
1635 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/intro.html#TermShapeElement">shape</a>
1636 <span class=expanding> — <a
1637 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/shapes.html#CircleElement"><span
1638 class=element-name>‘circle’</span></a>, <a
1639 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/shapes.html#EllipseElement"><span
1640 class=element-name>‘ellipse’</span></a>, <a
1641 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/shapes.html#LineElement"><span
1642 class=element-name>‘line’</span></a>, <a
1643 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/paths.html#PathElement"><span
1644 class=element-name>‘path’</span></a>, <a
1645 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/shapes.html#PolygonElement"><span
1646 class=element-name>‘polygon’</span></a>, <a
1647 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/shapes.html#PolylineElement"><span
1648 class=element-name>‘polyline’</span></a>, <a
1649 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/shapes.html#RectElement"><span
1650 class=element-name>‘rect’</span></a></span>
1652 <li><a
1653 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/intro.html#TermStructuralElement">structural</a>
1654 <span class=expanding> — <a
1655 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/struct.html#DefsElement"><span
1656 class=element-name>‘defs’</span></a>, <a
1657 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/struct.html#GElement"><span
1658 class=element-name>‘g’</span></a>, <a
1659 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/struct.html#SVGElement"><span
1660 class=element-name>‘svg’</span></a>, <a
1661 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/struct.html#SymbolElement"><span
1662 class=element-name>‘symbol’</span></a>, <a
1663 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/struct.html#UseElement"><span
1664 class=element-name>‘use’</span></a></span>
1666 <li><a
1667 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/intro.html#TermGradientElement">gradient</a>
1668 <span class=expanding> — <a
1669 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/pservers.html#LinearGradientElement"><span
1670 class=element-name>‘linearGradient’</span></a>, <a
1671 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/pservers.html#RadialGradientElement"><span
1672 class=element-name>‘radialGradient’</span></a></span>
1674 <li><a
1675 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/linking.html#AElement"><span
1676 class=element-name>‘a’</span></a>
1678 <li><a href="#ClipPathElement"><span
1679 class=element-name>‘clipPath’</span></a>
1681 <li><a
1682 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/color.html#ColorProfileElement"><span
1683 class=element-name>‘color-profile’</span></a>
1685 <li><a
1686 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/interact.html#CursorElement"><span
1687 class=element-name>‘cursor’</span></a>
1689 <li><a
1690 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/filters.html#FilterElement"><span
1691 class=element-name>‘filter’</span></a>
1693 <li><a
1694 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/fonts.html#FontElement"><span
1695 class=element-name>‘font’</span></a>
1697 <li><a
1698 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/fonts.html#FontFaceElement"><span
1699 class=element-name>‘font-face’</span></a>
1701 <li><a
1702 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/extend.html#ForeignObjectElement"><span
1703 class=element-name>‘foreignObject’</span></a>
1705 <li><a
1706 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/struct.html#ImageElement"><span
1707 class=element-name>‘image’</span></a>
1709 <li><a
1710 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/painting.html#MarkerElement"><span
1711 class=element-name>‘marker’</span></a>
1713 <li><a href="#MaskElement"><span
1714 class=element-name>‘mask’</span></a>
1716 <li><a
1717 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/pservers.html#PatternElement"><span
1718 class=element-name>‘pattern’</span></a>
1720 <li><a
1721 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/script.html#ScriptElement"><span
1722 class=element-name>‘script’</span></a>
1724 <li><a
1725 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/styling.html#StyleElement"><span
1726 class=element-name>‘style’</span></a>
1728 <li><a
1729 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/struct.html#SwitchElement"><span
1730 class=element-name>‘switch’</span></a>
1732 <li><a
1733 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/linking.html#ViewElement"><span
1734 class=element-name>‘view’</span></a>
1736 <li><a
1737 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/text.html#TextElement"><span
1738 class=element-name>‘text’</span></a>
1740 <li><a
1741 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/text.html#AltGlyphDefElement"><span
1742 class=element-name>‘altGlyphDef’</span></a>
1743 </ul>
1745 <tr>
1746 <th>Attributes:
1748 <td>
1749 <ul class=no-bullets>
1750 <li><a
1751 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/intro.html#TermConditionalProcessingAttribute">conditional
1752 processing attributes</a><span class=expanding> — <a
1753 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/struct.html#RequiredFeaturesAttribute"><span
1754 class=attr-name>‘requiredFeatures’</span></a>, <a
1755 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/struct.html#RequiredExtensionsAttribute"><span
1756 class=attr-name>‘requiredExtensions’</span></a>, <a
1757 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/struct.html#SystemLanguageAttribute"><span
1758 class=attr-name>‘systemLanguage’</span></a></span>
1760 <li><a
1761 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/intro.html#TermCoreAttributes">core
1762 attributes</a><span class=expanding> — <a
1763 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/struct.html#IDAttribute"><span
1764 class=attr-name>‘id’</span></a>, <a
1765 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/struct.html#XMLBaseAttribute"><span
1766 class=attr-name>‘xml:base’</span></a>, <a
1767 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/struct.html#XMLLangAttribute"><span
1768 class=attr-name>‘xml:lang’</span></a>, <a
1769 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/struct.html#XMLSpaceAttribute"><span
1770 class=attr-name>‘xml:space’</span></a></span>
1772 <li><a
1773 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/intro.html#TermPresentationAttribute">presentation
1774 attributes</a><span class=expanding> — <a
1775 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/text.html#AlignmentBaselineProperty"><span
1776 class=attr-name>‘alignment-baseline’</span></a>, <a
1777 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/text.html#BaselineShiftProperty"><span
1778 class=attr-name>‘baseline-shift’</span></a>, <a
1779 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/masking.html#ClipProperty"><span
1780 class=attr-name>‘clip’</span></a>, <a
1781 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/masking.html#ClipPathProperty"><span
1782 class=attr-name>‘clip-path’</span></a>, <a
1783 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/masking.html#ClipRuleProperty"><span
1784 class=attr-name>‘clip-rule’</span></a>, <a
1785 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/color.html#ColorProperty"><span
1786 class=attr-name>‘color’</span></a>, <a
1787 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/painting.html#ColorInterpolationProperty"><span
1788 class=attr-name>‘color-interpolation’</span></a>, <a
1789 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/painting.html#ColorInterpolationFiltersProperty"><span
1790 class=attr-name>‘color-interpolation-filters’</span></a>, <a
1791 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/color.html#ColorProfileProperty"><span
1792 class=attr-name>‘color-profile’</span></a>, <a
1793 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/painting.html#ColorRenderingProperty"><span
1794 class=attr-name>‘color-rendering’</span></a>, <a
1795 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/interact.html#CursorProperty"><span
1796 class=attr-name>‘cursor’</span></a>, <a
1797 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/text.html#DirectionProperty"><span
1798 class=attr-name>‘direction’</span></a>, <a
1799 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/painting.html#DisplayProperty"><span
1800 class=attr-name>‘display’</span></a>, <a
1801 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/text.html#DominantBaselineProperty"><span
1802 class=attr-name>‘dominant-baseline’</span></a>, <a
1803 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/filters.html#EnableBackgroundProperty"><span
1804 class=attr-name>‘enable-background’</span></a>, <a
1805 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/painting.html#FillProperty"><span
1806 class=attr-name>‘fill’</span></a>, <a
1807 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/painting.html#FillOpacityProperty"><span
1808 class=attr-name>‘fill-opacity’</span></a>, <a
1809 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/painting.html#FillRuleProperty"><span
1810 class=attr-name>‘fill-rule’</span></a>, <a
1811 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/filters.html#FilterProperty"><span
1812 class=attr-name>‘filter’</span></a>, <a
1813 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/filters.html#FloodColorProperty"><span
1814 class=attr-name>‘flood-color’</span></a>, <a
1815 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/filters.html#FloodOpacityProperty"><span
1816 class=attr-name>‘flood-opacity’</span></a>, <a
1817 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/text.html#FontProperty"><span
1818 class=attr-name>‘font’</span></a>, <a
1819 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/text.html#FontFamilyProperty"><span
1820 class=attr-name>‘font-family’</span></a>, <a
1821 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/text.html#FontSizeProperty"><span
1822 class=attr-name>‘font-size’</span></a>, <a
1823 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/text.html#FontSizeAdjustProperty"><span
1824 class=attr-name>‘font-size-adjust’</span></a>, <a
1825 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/text.html#FontStretchProperty"><span
1826 class=attr-name>‘font-stretch’</span></a>, <a
1827 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/text.html#FontStyleProperty"><span
1828 class=attr-name>‘font-style’</span></a>, <a
1829 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/text.html#FontVariantProperty"><span
1830 class=attr-name>‘font-variant’</span></a>, <a
1831 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/text.html#FontWeightProperty"><span
1832 class=attr-name>‘font-weight’</span></a>, <a
1833 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/text.html#GlyphOrientationHorizontalProperty"><span
1834 class=attr-name>‘glyph-orientation-horizontal’</span></a>, <a
1835 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/text.html#GlyphOrientationVerticalProperty"><span
1836 class=attr-name>‘glyph-orientation-vertical’</span></a>, <a
1837 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/painting.html#ImageRenderingProperty"><span
1838 class=attr-name>‘image-rendering’</span></a>, <a
1839 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/text.html#KerningProperty"><span
1840 class=attr-name>‘kerning’</span></a>, <a
1841 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/text.html#LetterSpacingProperty"><span
1842 class=attr-name>‘letter-spacing’</span></a>, <a
1843 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/filters.html#LightingColorProperty"><span
1844 class=attr-name>‘lighting-color’</span></a>, <a
1845 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/painting.html#MarkerProperty"><span
1846 class=attr-name>‘marker’</span></a>, <a
1847 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/painting.html#MarkerEndProperty"><span
1848 class=attr-name>‘marker-end’</span></a>, <a
1849 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/painting.html#MarkerMidProperty"><span
1850 class=attr-name>‘marker-mid’</span></a>, <a
1851 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/painting.html#MarkerStartProperty"><span
1852 class=attr-name>‘marker-start’</span></a>, <a
1853 href="#MaskProperty"><span class=attr-name>‘mask’</span></a>, <a
1854 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/masking.html#OpacityProperty"><span
1855 class=attr-name>‘opacity’</span></a>, <a
1856 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/masking.html#OverflowProperty"><span
1857 class=attr-name>‘overflow’</span></a>, <a
1858 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/interact.html#PointerEventsProperty"><span
1859 class=attr-name>‘pointer-events’</span></a>, <a
1860 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/painting.html#ShapeRenderingProperty"><span
1861 class=attr-name>‘shape-rendering’</span></a>, <a
1862 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/pservers.html#StopColorProperty"><span
1863 class=attr-name>‘stop-color’</span></a>, <a
1864 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/pservers.html#StopOpacityProperty"><span
1865 class=attr-name>‘stop-opacity’</span></a>, <a
1866 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/painting.html#StrokeProperty"><span
1867 class=attr-name>‘stroke’</span></a>, <a
1868 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/painting.html#StrokeDasharrayProperty"><span
1869 class=attr-name>‘stroke-dasharray’</span></a>, <a
1870 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/painting.html#StrokeDashoffsetProperty"><span
1871 class=attr-name>‘stroke-dashoffset’</span></a>, <a
1872 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/painting.html#StrokeLinecapProperty"><span
1873 class=attr-name>‘stroke-linecap’</span></a>, <a
1874 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/painting.html#StrokeLinejoinProperty"><span
1875 class=attr-name>‘stroke-linejoin’</span></a>, <a
1876 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/painting.html#StrokeMiterlimitProperty"><span
1877 class=attr-name>‘stroke-miterlimit’</span></a>, <a
1878 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/painting.html#StrokeOpacityProperty"><span
1879 class=attr-name>‘stroke-opacity’</span></a>, <a
1880 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/painting.html#StrokeWidthProperty"><span
1881 class=attr-name>‘stroke-width’</span></a>, <a
1882 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/text.html#TextAnchorProperty"><span
1883 class=attr-name>‘text-anchor’</span></a>, <a
1884 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/text.html#TextDecorationProperty"><span
1885 class=attr-name>‘text-decoration’</span></a>, <a
1886 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/painting.html#TextRenderingProperty"><span
1887 class=attr-name>‘text-rendering’</span></a>, <a
1888 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/text.html#UnicodeBidiProperty"><span
1889 class=attr-name>‘unicode-bidi’</span></a>, <a
1890 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/painting.html#VisibilityProperty"><span
1891 class=attr-name>‘visibility’</span></a>, <a
1892 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/text.html#WordSpacingProperty"><span
1893 class=attr-name>‘word-spacing’</span></a>, <a
1894 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/text.html#WritingModeProperty"><span
1895 class=attr-name>‘writing-mode’</span></a></span>
1897 <li><a
1898 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/styling.html#ClassAttribute"><span
1899 class=attr-name>‘class’</span></a>
1901 <li><a
1902 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/styling.html#StyleAttribute"><span
1903 class=attr-name>‘style’</span></a>
1905 <li><a href="#MaskElementXAttribute"><span
1906 class=attr-name>‘x’</span></a>
1908 <li><a href="#MaskElementYAttribute"><span
1909 class=attr-name>‘y’</span></a>
1911 <li><a href="#MaskElementWidthAttribute"><span
1912 class=attr-name>‘width’</span></a>
1914 <li><a href="#MaskElementHeightAttribute"><span
1915 class=attr-name>‘height’</span></a>
1917 <li><a href="#MaskElementMaskUnitsAttribute"><span
1918 class=attr-name>‘maskUnits’</span></a>
1920 <li><a href="#MaskElementMaskContentUnitsAttribute"><span
1921 class=attr-name>‘maskContentUnits’</span></a>
1922 </ul>
1924 <tr>
1925 <th>DOM Interfaces:
1927 <td><a class=idlinterface
1928 href="#InterfaceSVGMaskElement">SVGMaskElement</a>
1929 </table>
1931 <div class=adef-list>
1932 <p><em>Attribute definitions:</em>
1934 <dl>
1935 <dt id=MaskElementMaskUnitsAttribute><span class=adef>maskUnits</span> =
1936 "<em>userSpaceOnUse</em> | <em>objectBoundingBox</em>"
1938 <dd>Defines the coordinate system for attributes <a class=attr-name
1939 href="#MaskElementXAttribute">‘<code class=property>x</code>’</a>,
1940 <a class=attr-name href="#MaskElementYAttribute">‘<code
1941 class=property>y</code>’</a>, <a class=attr-name
1942 href="#MaskElementWidthAttribute">‘<code
1943 class=property>width</code>’</a> and <a class=attr-name
1944 href="#MaskElementHeightAttribute">‘<code
1945 class=property>height</code>’</a>.<br>
1946 If <span class=attr-value>maskUnits="userSpaceOnUse"</span>, <a
1947 class=attr-name href="#MaskElementXAttribute">‘<code
1948 class=property>x</code>’</a>, <a class=attr-name
1949 href="#MaskElementYAttribute">‘<code class=property>y</code>’</a>,
1950 <a class=attr-name href="#MaskElementWidthAttribute">‘<code
1951 class=property>width</code>’</a> and <a class=attr-name
1952 href="#MaskElementHeightAttribute">‘<code
1953 class=property>height</code>’</a> represent values in the current user
1954 coordinate system in place at the time when the <a class=element-name
1955 href="#MaskElement">‘<code class=property>mask</code>’</a> element
1956 is referenced (i.e., the user coordinate system for the element
1957 referencing the <a class=element-name href="#MaskElement">‘<code
1958 class=property>mask</code>’</a> element via the ‘<a
1959 href="#mask"><code class=property>mask</code></a>’ property).<br>
1960 If <span class=attr-value>maskUnits="objectBoundingBox"</span>, <a
1961 class=attr-name href="#MaskElementXAttribute">‘<code
1962 class=property>x</code>’</a>, <a class=attr-name
1963 href="#MaskElementYAttribute">‘<code class=property>y</code>’</a>,
1964 <a class=attr-name href="#MaskElementWidthAttribute">‘<code
1965 class=property>width</code>’</a> and <a class=attr-name
1966 href="#MaskElementHeightAttribute">‘<code
1967 class=property>height</code>’</a> represent fractions or percentages
1968 of the bounding box of the element to which the mask is applied. (See <a
1969 class=term href="#object-bounding-box-units">object bounding box
1970 units</a>.)<br>
1971 If attribute <a class=attr-name
1972 href="#MaskElementMaskUnitsAttribute">‘<code
1973 class=property>maskUnits</code>’</a> is not specified, then the effect
1974 is as if a value of <span class=attr-value>‘<code
1975 class=property>objectBoundingBox</code>’</span> were specified.<br>
1976 <span class=anim-target>Animatable: yes.</span>
1978 <dt id=MaskElementMaskContentUnitsAttribute><span
1979 class=adef>maskContentUnits</span> = "<em>userSpaceOnUse</em> |
1980 <em>objectBoundingBox</em>"
1982 <dd>Defines the coordinate system for the contents of the <a
1983 class=element-name href="#MaskElement">‘<code
1984 class=property>mask</code>’</a>.<br>
1985 If <span class=attr-value>maskContentUnits="userSpaceOnUse"</span>, the
1986 user coordinate system for the contents of the <a class=element-name
1987 href="#MaskElement">‘<code class=property>mask</code>’</a> element
1988 is the current user coordinate system in place at the time when the <a
1989 class=element-name href="#MaskElement">‘<code
1990 class=property>mask</code>’</a> element is referenced (i.e., the user
1991 coordinate system for the element referencing the <a class=element-name
1992 href="#MaskElement">‘<code class=property>mask</code>’</a> element
1993 via the ‘<a href="#mask"><code class=property>mask</code></a>’
1994 property).<br>
1995 If <span class=attr-value>maskContentUnits="objectBoundingBox"</span>,
1996 the user coordinate system for the contents of the <a class=element-name
1997 href="#MaskElement">‘<code class=property>mask</code>’</a> is
1998 established using the bounding box of the element to which the mask is
1999 applied. (See <a class=term href="#object-bounding-box-units">object
2000 bounding box units</a>.)<br>
2001 If attribute <a class=attr-name
2002 href="#MaskElementMaskContentUnitsAttribute">‘<code
2003 class=property>maskContentUnits</code>’</a> is not specified, then the
2004 effect is as if a value of <span class=attr-value>‘<code
2005 class=property>userSpaceOnUse</code>’</span> were specified.<br>
2006 <span class=anim-target>Animatable: yes.</span>
2008 <dt id=MaskElementXAttribute><span class=adef>x</span> =
2009 "<var><length></var> | <var><percentage></var>"
2011 <dd>The x-axis coordinate of one corner of the rectangle for the largest
2012 possible offscreen buffer. If the attribute is not specified but at
2013 least one of the attributes <a class=attr-name
2014 href="#MaskElementYAttribute">‘<code class=property>y</code>’</a>,
2015 <a class=attr-name href="#MaskElementWidthAttribute">‘<code
2016 class=property>width</code>’</a> or <a class=attr-name
2017 href="#MaskElementHeightAttribute">‘<code
2018 class=property>height</code>’</a> are specified, the effect is as if a
2019 value of <span class=attr-value>‘<code class=css>-10%</code>’</span>
2020 were specified.<br>
2021 <span class=anim-target>Animatable: yes.</span>
2023 <dt id=MaskElementYAttribute><span class=adef>y</span> =
2024 "<var><length></var> | <var><percentage></var>"
2026 <dd>The y-axis coordinate of one corner of the rectangle for the largest
2027 possible offscreen buffer.<br>
2028 If the attribute is not specified but at least one of the attributes <a
2029 class=attr-name href="#MaskElementXAttribute">‘<code
2030 class=property>x</code>’</a>, <a class=attr-name
2031 href="#MaskElementWidthAttribute">‘<code
2032 class=property>width</code>’</a> or <a class=attr-name
2033 href="#MaskElementHeightAttribute">‘<code
2034 class=property>height</code>’</a> are specified, the effect is as if a
2035 value of <span class=attr-value>‘<code class=css>-10%</code>’</span>
2036 were specified.<br>
2037 <span class=anim-target>Animatable: yes.</span>
2039 <dt id=MaskElementWidthAttribute><span class=adef>width</span> =
2040 "<var><length></var> | <var><percentage></var>"
2042 <dd>The width of the largest possible offscreen buffer. A negative value
2043 or a value of zero disables rendering of the element.<br>
2044 If the attribute is not specified but at least one of the attributes <a
2045 class=attr-name href="#MaskElementXAttribute">‘<code
2046 class=property>x</code>’</a>, <a class=attr-name
2047 href="#MaskElementYAttribute">‘<code class=property>y</code>’</a> or
2048 <a class=attr-name 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>120%</code>’</span>
2051 were specified.<br>
2052 <span class=anim-target>Animatable: yes.</span>
2054 <dt id=MaskElementHeightAttribute><span class=adef>height</span> =
2055 "<var><length></var> | <var><percentage></var>"
2057 <dd>The height of the largest possible offscreen buffer.<br>
2058 A negative value or a value of zero disables rendering of the
2059 element.<br>
2060 If the attribute is not specified but at least one of the attributes <a
2061 class=attr-name href="#MaskElementXAttribute">‘<code
2062 class=property>x</code>’</a>, <a class=attr-name
2063 href="#MaskElementYAttribute">‘<code class=property>y</code>’</a> or
2064 <a class=attr-name href="#MaskElementWidthAttribute">‘<code
2065 class=property>width</code>’</a> are specified, the effect is as if a
2066 value of <span class=attr-value>‘<code class=css>120%</code>’</span>
2067 were specified.<br>
2068 <span class=anim-target>Animatable: yes.</span>
2069 </dl>
2070 </div>
2072 <p>If at least one of the attributes <a class=attr-name
2073 href="#MaskElementXAttribute">‘<code class=property>x</code>’</a>, <a
2074 class=attr-name href="#MaskElementYAttribute">‘<code
2075 class=property>y</code>’</a>, <a class=attr-name
2076 href="#MaskElementWidthAttribute">‘<code
2077 class=property>width</code>’</a> or <a class=attr-name
2078 href="#MaskElementHeightAttribute">‘<code
2079 class=property>height</code>’</a> are specified, the given object and
2080 the rectangle defined by <a class=attr-name
2081 href="#MaskElementXAttribute">‘<code class=property>x</code>’</a>, <a
2082 class=attr-name href="#MaskElementYAttribute">‘<code
2083 class=property>y</code>’</a>, <a class=attr-name
2084 href="#MaskElementWidthAttribute">‘<code
2085 class=property>width</code>’</a> and <a class=attr-name
2086 href="#MaskElementHeightAttribute">‘<code
2087 class=property>height</code>’</a> establish a current clipping path. The
2088 rendered content of the mask must be clipped by this current clipping
2089 path.
2091 <p>
2093 <p>CSS properties inherit into the <a class=element-name
2094 href="#MaskElement">‘<code class=property>mask</code>’</a> element
2095 from its ancestors; properties do <em>not</em> inherit from the element
2096 referencing the <a class=element-name href="#MaskElement">‘<code
2097 class=property>mask</code>’</a> element.
2099 <p><a class=element-name href="#MaskElement">‘<code
2100 class=property>mask</code>’</a> elements are never rendered directly;
2101 their only usage is as something that can be referenced using the ‘<a
2102 href="#mask"><code class=property>mask</code></a>’ property. The
2103 ‘<code class=property>opacity</code>’, ‘<code
2104 class=property>filter</code>’ and ‘<code
2105 class=property>display</code>’ properties do not apply to the <a
2106 class=element-name href="#MaskElement">‘<code
2107 class=property>mask</code>’</a> element; thus, <a class=element-name
2108 href="#MaskElement">‘<code class=property>mask</code>’</a> elements
2109 are not directly rendered even if the ‘<code
2110 class=property>display</code>’ property is set to a value other than
2111 ‘<a href="#none"><code class=property>none</code></a>’, and <a
2112 class=element-name href="#MaskElement">‘<code
2113 class=property>mask</code>’</a> elements are available for referencing
2114 even when the ‘<code class=property>display</code>’ property on the <a
2115 class=element-name href="#MaskElement">‘<code
2116 class=property>mask</code>’</a> element or any of its ancestors is set
2117 to <a class=prop-value href="#none">none</a>.
2119 <h2 id=mask-box-image><span class=secno>7. </span>Mask Box Image</h2>
2121 <p> With ‘<a href="#mask-box-image0"><code
2122 class=property>mask-box-image</code></a>’ a mask can be split into nine
2123 pieces: four corners, four edges and the middle piece as demonstrated in
2124 the figure below.
2126 <div class=figure> <img alt="pieces of a mask box image"
2127 src="images/mask-box-image-mask.svg" width=240>
2128 <p class=caption> Pieces of a mask box image.
2129 </div>
2131 <p> These pieces may be sliced, scaled and stretched in various ways to fit
2132 the size of the <span class=index id=mask-image-area>mask image
2133 area</span>. The usage of ‘<a href="#mask-box-image0"><code
2134 class=property>mask-box-image</code></a>’ corresponds to the ‘<code
2135 class=property>border-image</code>’ property of CSS Background and
2136 Borders <a href="#CSS3BG" rel=biblioentry>[CSS3BG]<!--{{!CSS3BG}}--></a>.
2138 <div class=example>
2139 <p> The mask image in the following example is split into four corners
2140 with dimensions of 75 pixels, four edges and the middle piece that is
2141 stretched and scaled.
2143 <div class=figure> <img alt="Example for 'mask-box-image'" height=240
2144 src="images/mask-box-image.svg" width=720>
2145 <p class=caption> Example for ‘<a href="#mask-box-image0"><code
2146 class=property>mask-box-image</code></a>’. The object on the left is
2147 the object to mask. The second image is the alpha mask and the last
2148 image the masked object.
2149 </div>
2151 <pre>
2152 div {
2153 background: linear-gradient(bottom, #F27BAA 0%, #FCC8AD 100%);
2154 mask-box-image-slice: 25 fill;
2155 mask-box-image-repeat: stretch;
2156 mask-box-image-source: url(mask.png);
2157 }</pre>
2158 </div>
2160 <h3 id=the-mask-box-image-source><span class=secno>7.1. </span>The ‘<a
2161 href="#mask-box-image-source"><code
2162 class=property>mask-box-image-source</code></a>’ property</h3>
2164 <table class=propdef>
2165 <tbody>
2166 <tr>
2167 <th>Name:
2169 <td><dfn id=mask-box-image-source>mask-box-image-source</dfn>
2171 <tr>
2172 <th><a href="#values">Value</a>:
2174 <td><a href="#ltmask-imagegt"><var><mask-image></var></a>
2176 <tr>
2177 <th>Initial:
2179 <td>none
2181 <tr>
2182 <th>Applies to:
2184 <td>All elements. In SVG, it applies to <a
2185 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/intro.html#TermContainerElement">container
2186 elements</a> and <a
2187 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/intro.html#TermGraphicsElement">graphics
2188 elements</a>.
2190 <tr>
2191 <th>Inherited:
2193 <td>no
2195 <tr>
2196 <th>Percentages:
2198 <td>N/A
2200 <tr>
2201 <th>Media:
2203 <td>visual
2205 <tr>
2206 <th>Computed value:
2208 <td>‘<a href="#none"><code class=css>none</code></a>’ or the image
2209 with its URI made absolute
2211 <tr>
2212 <th>Animatable:
2214 <td>no
2215 </table>
2217 <p>Specifies an image to be used as mask. If the value is ‘<a
2218 href="#none"><code class=css>none</code></a>’ or if the image cannot be
2219 displayed (or the property doesn't apply), the content won't get masked.
2221 <h3 id=the-mask-box-image-slice><span class=secno>7.2. </span>The ‘<a
2222 href="#mask-box-image-slice"><code
2223 class=property>mask-box-image-slice</code></a>’ property</h3>
2225 <table class=propdef>
2226 <tbody>
2227 <tr>
2228 <th>Name:
2230 <td><dfn id=mask-box-image-slice>mask-box-image-slice</dfn>
2232 <tr>
2233 <th><a href="#values">Value</a>:
2235 <td>[<var><number></var> | <var><percentage></var>]{1,4}
2236 && fill?
2238 <tr>
2239 <th>Initial:
2241 <td>0 fill
2243 <tr>
2244 <th>Applies to:
2246 <td>All elements. In SVG, it applies to <a
2247 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/intro.html#TermContainerElement">container
2248 elements</a> and <a
2249 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/intro.html#TermGraphicsElement">graphics
2250 elements</a>.
2252 <tr>
2253 <th>Inherited:
2255 <td>no
2257 <tr>
2258 <th>Percentages:
2260 <td>refer to size of the mask image
2262 <tr>
2263 <th>Media:
2265 <td>visual
2267 <tr>
2268 <th>Computed value:
2270 <td>as specified
2272 <tr>
2273 <th>Animatable:
2275 <td>no
2276 </table>
2278 <p>This property specifies inward offsets from the top, right, bottom, and
2279 left edges of the mask image, dividing it into nine regions: four corners,
2280 four edges and a middle. The middle image part is discarded (treated as
2281 fully transparent black) unless the ‘<code class=css>fill</code>’
2282 keyword is present.
2284 <p>See <a
2285 href="http://www.w3.org/TR/css3-background/#the-border-image-slice">Image
2286 Slicing: the ‘<code class=property>border-image-slice</code>’
2287 property</a> <a href="#CSS3BG"
2288 rel=biblioentry>[CSS3BG]<!--{{!CSS3BG}}--></a> for the definitions of the
2289 property values.
2291 <h3 id=the-mask-box-image-width><span class=secno>7.3. </span>The ‘<a
2292 href="#mask-box-image-width"><code
2293 class=property>mask-box-image-width</code></a>’ property</h3>
2295 <table class=propdef>
2296 <tbody>
2297 <tr>
2298 <th>Name:
2300 <td><dfn id=mask-box-image-width>mask-box-image-width</dfn>
2302 <tr>
2303 <th><a href="#values">Value</a>:
2305 <td>[ <var><length></var> | <var><percentage></var> |
2306 <var><number></var> | auto ]{1,4}
2308 <tr>
2309 <th>Initial:
2311 <td>auto
2313 <tr>
2314 <th>Applies to:
2316 <td>All elements. In SVG, it applies to <a
2317 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/intro.html#TermContainerElement">container
2318 elements</a> and <a
2319 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/intro.html#TermGraphicsElement">graphics
2320 elements</a>.
2322 <tr>
2323 <th>Inherited:
2325 <td>no
2327 <tr>
2328 <th>Percentages:
2330 <td>relative to width/height of the <a
2331 href="#mask-box-image-area"><em>mask box image area</em></a>
2333 <tr>
2334 <th>Media:
2336 <td>visual
2338 <tr>
2339 <th>Computed value:
2341 <td>all <var><length></var>s made absolute, otherwise as specified
2343 <tr>
2344 <th>Animatable:
2346 <td>no
2347 </table>
2349 <p>The mask image is drawn inside an area called the <a
2350 href="#mask-box-image-area"><em>mask box image area</em></a>. This is an
2351 area whose boundaries by default correspond to the mask box, see ‘<a
2352 href="#mask-box-image-outset"><code
2353 class=property>mask-box-image-outset</code></a>’.
2355 <p>See <a
2356 href="http://www.w3.org/TR/css3-background/#the-border-image-width">Drawing
2357 Areas: the ‘border-image-width’ property</a> <a href="#CSS3BG"
2358 rel=biblioentry>[CSS3BG]<!--{{!CSS3BG}}--></a> for the definitions of the
2359 property values.
2361 <p class=note> Note that for SVG elements without an associated layout box
2362 the ‘<code class=property>border-width</code>’ is considered to be
2363 ‘<code class=css>0</code>’.
2365 <h3 id=the-mask-box-image-outset><span class=secno>7.4. </span>The ‘<a
2366 href="#mask-box-image-outset"><code
2367 class=property>mask-box-image-outset</code></a>’ property</h3>
2369 <table class=propdef>
2370 <tbody>
2371 <tr>
2372 <th>Name:
2374 <td><dfn id=mask-box-image-outset>mask-box-image-outset</dfn>
2376 <tr>
2377 <th><a href="#values">Value</a>:
2379 <td>[ <var><length></var> | <var><number></var> ]{1,4}
2381 <tr>
2382 <th>Initial:
2384 <td>0
2386 <tr>
2387 <th>Applies to:
2389 <td>All elements. In SVG, it applies to <a
2390 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/intro.html#TermContainerElement">container
2391 elements</a> and <a
2392 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/intro.html#TermGraphicsElement">graphics
2393 elements</a>.
2395 <tr>
2396 <th>Inherited:
2398 <td>no
2400 <tr>
2401 <th>Percentages:
2403 <td>N/A
2405 <tr>
2406 <th>Media:
2408 <td>visual
2410 <tr>
2411 <th>Computed value:
2413 <td>all <var><length></var>s made absolute, otherwise as specified
2415 <tr>
2416 <th>Animatable:
2418 <td>no
2419 </table>
2421 <p>The values specify the amount by which the <dfn
2422 id=mask-box-image-area>mask box image area</dfn> extends beyond the border
2423 box. If it has four values, they set the outsets on the top, right, bottom
2424 and left sides in that order. If the left is missing, it is the same as
2425 the right; if the bottom is missing, it is the same as the top; if the
2426 right is missing, it is the same as the top.
2428 <p>As with ‘<a href="#mask-box-image-width"><code
2429 class=property>mask-box-image-width</code></a>’, a <number>
2430 represents a multiple of the corresponding ‘<code
2431 class=property>border-width</code>’. Negative values are not allowed for
2432 any of the ‘<a href="#mask-box-image-outset"><code
2433 class=property>mask-box-image-outset</code></a>’ values.
2435 <p class=note>Note that for SVG elements without associated layout box the
2436 ‘<code class=property>border-width</code>’ is considered to be
2437 ‘<code class=css>0</code>’.
2439 <h3 id=the-mask-box-image-repeat><span class=secno>7.5. </span>The ‘<a
2440 href="#mask-box-image-repeat"><code
2441 class=property>mask-box-image-repeat</code></a>’ property</h3>
2443 <table class=propdef>
2444 <tbody>
2445 <tr>
2446 <th>Name:
2448 <td><dfn id=mask-box-image-repeat>mask-box-image-repeat</dfn>
2450 <tr>
2451 <th><a href="#values">Value</a>:
2453 <td>[ stretch | repeat | round | space ]{1,2}
2455 <tr>
2456 <th>Initial:
2458 <td>stretch
2460 <tr>
2461 <th>Applies to:
2463 <td>All elements. In SVG, it applies to <a
2464 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/intro.html#TermContainerElement">container
2465 elements</a> and <a
2466 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/intro.html#TermGraphicsElement">graphics
2467 elements</a>.
2469 <tr>
2470 <th>Inherited:
2472 <td>no
2474 <tr>
2475 <th>Percentages:
2477 <td>N/A
2479 <tr>
2480 <th>Media:
2482 <td>visual
2484 <tr>
2485 <th>Computed value:
2487 <td>as specified
2489 <tr>
2490 <th>Animatable:
2492 <td>no
2493 </table>
2495 <p>This property specifies how the images for the sides and the middle part
2496 of the mask image are scaled and tiled. The first keyword applies to the
2497 horizontal sides, the second to the vertical ones. If the second keyword
2498 is absent, it is assumed to be the same as the first.
2500 <p>See <a
2501 href="http://www.w3.org/TR/css3-background/#the-border-image-repeat">Image
2502 Tiling: the ‘<code class=property>border-image-repeat</code>’
2503 property</a> <a href="#CSS3BG"
2504 rel=biblioentry>[CSS3BG]<!--{{!CSS3BG}}--></a> for the definitions of the
2505 property values.
2507 <p>The exact process for scaling and tiling the mask box image parts is
2508 given in the section <a href="#masking-with-the-mask-box-image">Masking
2509 with the mask-box-image</a>.
2511 <h3 id=the-mask-box-image><span class=secno>7.6. </span>The ‘<a
2512 href="#mask-box-image0"><code class=property>mask-box-image</code></a>’
2513 property</h3>
2515 <table class=propdef>
2516 <tbody>
2517 <tr>
2518 <th>Name:
2520 <td><dfn id=mask-box-image0>mask-box-image</dfn>
2522 <tr>
2523 <th><a href="#values">Value</a>:
2525 <td> <var><‘<a href="#mask-box-image-source"><code
2526 class=property>mask-box-image-source</code></a>’></var> ||
2527 <var><‘<a href="#mask-box-image-slice"><code
2528 class=property>mask-box-image-slice</code></a>’></var> [ /
2529 <var><‘<a href="#mask-box-image-width"><code
2530 class=property>mask-box-image-width</code></a>’></var> | /
2531 <var><‘<a href="#mask-box-image-width"><code
2532 class=property>mask-box-image-width</code></a>’></var>? /
2533 <var><‘<a href="#mask-box-image-outset"><code
2534 class=property>mask-box-image-outset</code></a>’></var> ]? ||
2535 <var><‘<a href="#mask-box-image-repeat"><code
2536 class=property>mask-box-image-repeat</code></a>’></var>
2538 <tr>
2539 <th>Initial:
2541 <td>See individual properties
2543 <tr>
2544 <th>Applies to:
2546 <td>See individual properties
2548 <tr>
2549 <th>Inherited:
2551 <td>no
2553 <tr>
2554 <th>Percentages:
2556 <td>N/A
2558 <tr>
2559 <th>Media:
2561 <td>visual
2563 <tr>
2564 <th>Computed value:
2566 <td>See individual properties
2568 <tr>
2569 <th>Animatable:
2571 <td>See individual properties
2572 </table>
2574 <p>This is a shorthand property for setting ‘<a
2575 href="#mask-box-image-source"><code
2576 class=property>mask-box-image-source</code></a>’, ‘<a
2577 href="#mask-box-image-slice"><code
2578 class=property>mask-box-image-slice</code></a>’, ‘<a
2579 href="#mask-box-image-width"><code
2580 class=property>mask-box-image-width</code></a>’, ‘<a
2581 href="#mask-box-image-outset"><code
2582 class=property>mask-box-image-outset</code></a>’ and ‘<a
2583 href="#mask-box-image-repeat"><code
2584 class=property>mask-box-image-repeat</code></a>’. Omitted values are set
2585 to their initial values.
2587 <h3 id=masking-with-the-mask-box-image><span class=secno>7.7.
2588 </span>Masking with the mask-box-image</h3>
2590 <p> After the mask-box-image given by ‘<a
2591 href="#mask-box-image-source"><code
2592 class=property>mask-box-image-source</code></a>’ is sliced by the ‘<a
2593 href="#mask-box-image-slice"><code
2594 class=property>mask-box-image-slice</code></a>’ values, the resulting
2595 nine images are scaled, positioned, and tiled into their corresponding
2596 mask image regions in four steps as described in the section <a
2597 href="http://www.w3.org/TR/css3-background/#border-image-process">Drawing
2598 the Border Image</a> <a href="#CSS3BG"
2599 rel=biblioentry>[CSS3BG]<!--{{!CSS3BG}}--></a>.
2601 <h2 id=clipping-paths><span class=secno>8. </span>Clipping paths</h2>
2603 <p> The clipping path restricts the region to which paint can be applied,
2604 the so-called clipping region. Conceptually, any parts of the drawing that
2605 lie outside of this region are not drawn. This includes any content,
2606 background, borders, text decoration, outline and visible scrolling
2607 mechanism of the element to which the clipping path is applied, and those
2608 of its descendants.
2610 <p> An element's ancestors may also clip portions of their content (e.g.,
2611 via their own ‘<a href="#ClipProperty"><code
2612 class=property>clip</code></a>’ or ‘<a href="#clip-path"><code
2613 class=property>clip-path</code></a>’ properties and/or if their ‘<code
2614 class=property>overflow</code>’ property is not ‘<code
2615 class=css>visible</code>’). What is rendered is the cumulative
2616 intersection.
2618 <p> If the clipping region exceeds the bounds of the UA's document window,
2619 content may be clipped to that window by the native operating environment.
2621 <h3 id=the-clip-path><span class=secno>8.1. </span>The ‘<a
2622 href="#clip-path"><code class=property>clip-path</code></a>’ property</h3>
2624 <table class=propdef>
2625 <tbody>
2626 <tr>
2627 <th>Name:
2629 <td><dfn id=clip-path>clip-path</dfn>
2631 <tr>
2632 <th>Value:
2634 <td><a href="#ltshapegt"><var><shape></var></a> | <a
2635 href="#ltclip-sourcegt"><var><clip-source></var></a> | none
2637 <tr>
2638 <th>Initial:
2640 <td>none
2642 <tr>
2643 <th>Applies to:
2645 <td>All elements. SVG <a
2646 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/intro.html#TermContainerElement">container
2647 elements</a>, <a
2648 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/intro.html#TermGraphicsElement">graphics
2649 elements</a> and <a class=element-name href="#ClipPathElement">‘<code
2650 class=property>clipPath</code>’</a>
2652 <tr>
2653 <th>Inherited:
2655 <td>no
2657 <tr>
2658 <th>Percentages:
2660 <td>as specified
2662 <tr>
2663 <th>Media:
2665 <td>visual
2667 <tr>
2668 <th>Computed value:
2670 <td>as specified, but with <a href="#lturlgt"><var><url></var></a>
2671 values made absolute
2673 <tr>
2674 <th>Animatable:
2676 <td>See <a
2677 href="http://dev.w3.org/csswg/css3-exclusions/#shape-inside">‘<code
2678 class=property>shape-inside</code>’</a> and <a
2679 href="http://dev.w3.org/csswg/css3-exclusions/#shape-outside">‘<code
2680 class=property>shape-outside</code>’</a> <a href="#CSS3-EXCLUSIONS"
2681 rel=biblioentry>[CSS3-EXCLUSIONS]<!--{{!CSS3-EXCLUSIONS}}--></a>
2682 </table>
2684 <pre class=prod><dfn id=ltclip-sourcegt><clip-source></dfn> = <a
2685 href="#lturlgt"><var><url></var></a> | <var>child</var> | <a
2686 href="#ltchild-selectorgt"><var><child-selector></var></a>
2687 </pre>
2689 <dl>
2690 <dt> <dfn id=ltshapegt>‘<code class=css><shape></code>’</dfn>
2692 <dd> A basic shape function as defined in CSS3 Exclusions. The origin of
2693 clipping shapes is on the top left of the <a class=index
2694 href="#bounding-client-rect" id=bounding-client-rect0>bounding client
2695 rect</a>. Percentage values are resolved against the <a class=index
2696 href="#bounding-client-rect" id=bounding-client-rect1>bounding client
2697 rect</a> width and height. (See <a href="#CSS3-EXCLUSIONS"
2698 rel=biblioentry>[CSS3-EXCLUSIONS]<!--{{!CSS3-EXCLUSIONS}}--></a>.)
2700 <dt>‘<code class=css>child</code>’
2702 <dd> A keyword to indicate that the last direct sibling <a
2703 class=element-name href="#ClipPathElement">‘<code
2704 class=property>clipPath</code>’</a> element of the element the ‘<a
2705 href="#clip-path"><code class=property>clip-path</code></a>’ property
2706 is applied should be used as the clip source. It is equivalent to
2707 ‘<code class=css>select(clipPath:last-of-type)</code>’.
2709 <dt>‘<a href="#ltchild-selectorgt"><code
2710 class=css><child-selector></code></a>’
2712 <dd> A comma-separated list of <a
2713 href="http://dev.w3.org/csswg/selectors4/#compound">compound
2714 selector</a>s scoped at the element to which the ‘<a
2715 href="#clip-path"><code class=property>clip-path</code></a>’ property
2716 is applied. The first matching element in <a
2717 href="http://www.w3.org/TR/2012/WD-dom-20120405/#concept-tree-order">tree
2718 order</a> (as defined in <a href="#DOM"
2719 rel=biblioentry>[DOM]<!--{{!DOM}}--></a>) as a result of evaluating the
2720 list of selectors is taken as the clip source. If there are no matching
2721 elements the clip source is invalid.
2722 </dl>
2724 <h3 id=the-clip-rule><span class=secno>8.2. </span>The ‘<a
2725 href="#clip-rule"><code class=property>clip-rule</code></a>’ property</h3>
2727 <table class=propdef>
2728 <tbody>
2729 <tr>
2730 <th>Name:
2732 <td><dfn id=clip-rule>clip-rule</dfn>
2734 <tr>
2735 <th>Value:
2737 <td>nonzero | evenodd
2739 <tr>
2740 <th>Initial:
2742 <td>nonzero
2744 <tr>
2745 <th>Applies to:
2747 <td><a
2748 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/intro.html#TermGraphicsElement">graphics
2749 elements</a> within a <a class=element-name
2750 href="#ClipPathElement">‘<code class=property>clipPath</code>’</a>
2751 element
2753 <tr>
2754 <th>Inherited:
2756 <td>yes
2758 <tr>
2759 <th>Percentages:
2761 <td>N/A
2763 <tr>
2764 <th>Media:
2766 <td>visual
2768 <tr>
2769 <th>Computed value:
2771 <td>as specified
2773 <tr>
2774 <th>Animatable:
2776 <td>no
2777 </table>
2779 <dl>
2780 <dt><dfn id=nonzero>‘<code class=css>nonzero</code>’</dfn>
2782 <dd>See description of <a class=property
2783 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/painting.html#FillRuleProperty">‘<code
2784 class=property>fill-rule</code>’</a> property <a href="#SVG11"
2785 rel=biblioentry>[SVG11]<!--{{SVG11}}--></a>.
2787 <dt><dfn id=evenodd>‘<code class=css>evenodd</code>’</dfn>
2789 <dd>See description of <a class=property
2790 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/painting.html#FillRuleProperty">‘<code
2791 class=property>fill-rule</code>’</a> property <a href="#SVG11"
2792 rel=biblioentry>[SVG11]<!--{{SVG11}}--></a>.
2793 </dl>
2795 <p>The ‘<a href="#clip-rule"><code class=property>clip-rule</code></a>’
2796 property only applies to graphics elements that are contained within a <a
2797 class=element-name href="#ClipPathElement">‘<code
2798 class=property>clipPath</code>’</a> element.
2800 <div class=example> The following fragment of code will cause an evenodd
2801 clipping rule to be applied to the clipping path because ‘<a
2802 href="#clip-rule"><code class=property>clip-rule</code></a>’ is
2803 specified on the <a class=element-name
2804 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/paths.html#PathElement">‘<code
2805 class=property>path</code>’</a> element that defines the clipping shape:
2807 <pre>
2808 <g clip-rule="nonzero">
2809 <clipPath id="MyClip">
2810 <path d="..." clip-rule="evenodd" />
2811 </clipPath>
2812 <rect clip-path="url(#MyClip)" ... />
2813 </g>
2814 </pre>
2816 <p>whereas the following fragment of code will <em>not</em> cause an
2817 evenodd clipping rule to be applied because the ‘<a
2818 href="#clip-rule"><code class=property>clip-rule</code></a>’ is
2819 specified on the referencing element, not on the object defining the
2820 clipping shape:
2822 <pre>
2823 <g clip-rule="nonzero">
2824 <clipPath id="MyClip">
2825 <path d="..." />
2826 </clipPath>
2827 <rect clip-path="url(#MyClip)" clip-rule="evenodd" ... />
2828 </g>
2829 </pre>
2830 </div>
2832 <h3 id=clip-property><span class=secno>8.3. </span>The ‘<a
2833 href="#ClipProperty"><code class=property>clip</code></a>’ property</h3>
2835 <table class=propdef>
2836 <tbody>
2837 <tr>
2838 <th>Name:
2840 <td><dfn id=ClipProperty>clip</dfn>
2842 <tr>
2843 <th>Value:
2845 <td><a href="#ltshapegt"><var><shape></var></a> | auto
2847 <tr>
2848 <th>Initial:
2850 <td>see individual properties
2852 <tr>
2853 <th>Applies to:
2855 <td>Absolutely positioned elements. In SVG, it applies to <a
2856 href="http://www.w3.org/TR/SVG2/coords.html#EstablishingANewViewport">elements
2857 which establish a new viewport</a>, <a class=element-name
2858 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/pservers.html#PatternElement">‘<code
2859 class=property>pattern</code>’</a> elements and <a class=element-name
2860 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/painting.html#MarkerElement">‘<code
2861 class=property>marker</code>’</a> elements.
2863 <tr>
2864 <th>Inherited:
2866 <td>no
2868 <tr>
2869 <th>Percentages:
2871 <td>N/A
2873 <tr>
2874 <th>Media:
2876 <td>visual
2878 <tr>
2879 <th>Computed value:
2881 <td>as specified
2883 <tr>
2884 <th>Animatable:
2886 <td>as <a
2887 href="http://dev.w3.org/csswg/css3-transitions/#animtype-rect">rectangle</a>
2888 </table>
2890 <p class=note>With this specification the ‘<a href="#ClipProperty"><code
2891 class=property>clip</code></a>’ property is deprecated. Authors are
2892 encouraged to use the ‘<a href="#clip-path"><code
2893 class=property>clip-path</code></a>’ property instead. UAs must support
2894 the ‘<a href="#ClipProperty"><code class=property>clip</code></a>’
2895 property.
2897 <p> The ‘<a href="#ClipProperty"><code class=property>clip</code></a>’
2898 property applies only to absolutely positioned elements. In SVG, it
2899 applies to <a
2900 href="http://www.w3.org/TR/SVG2/coords.html#EstablishingANewViewport">elements
2901 which establish a new viewport</a>, <a class=element-name
2902 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/pservers.html#PatternElement">‘<code
2903 class=property>pattern</code>’</a> elements and <a class=element-name
2904 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/painting.html#MarkerElement">‘<code
2905 class=property>marker</code>’</a> elements. Values have the following
2906 meanings:
2908 <dl>
2909 <dt>‘<a href="#auto"><code class=css>auto</code></a>’
2911 <dd>The element does not clip.
2913 <dt><a href="#ltshapegt"><var><shape></var></a>
2915 <dd>
2916 <p> In CSS 2.1, the only valid <shape> value is: rect(<a
2917 href="#lttopgt"><var><top></var></a>, <a
2918 href="#ltrightgt"><var><right></var></a>, <a
2919 href="#ltbottomgt"><var><bottom></var></a>, <a
2920 href="#ltleftgt"><var><left></var></a>) where <a
2921 href="#lttopgt"><var><top></var></a> and <a
2922 href="#ltbottomgt"><var><bottom></var></a> specify offsets from
2923 the top border edge of the box, and <a
2924 href="#ltrightgt"><var><right></var></a>, and <a
2925 href="#ltleftgt"><var><left></var></a> specify offsets from the
2926 left border edge of the box. Authors should separate offset values with
2927 commas. User agents must support separation with commas, but may also
2928 support separation without commas (but not a combination), because a
2929 previous revision of this specification was ambiguous in this respect.
2931 <p><dfn id=lttopgt><top></dfn>, <dfn
2932 id=ltrightgt><right></dfn>, <dfn
2933 id=ltbottomgt><bottom></dfn>, and <dfn
2934 id=ltleftgt><left></dfn> may either have a
2935 <var><length></var> value or ‘<a href="#auto"><code
2936 class=css>auto</code></a>’. Negative lengths are permitted. The value
2937 ‘<a href="#auto"><code class=css>auto</code></a>’ means that a given
2938 edge of the clipping region will be the same as the edge of the
2939 element's generated border box (i.e., ‘<a href="#auto"><code
2940 class=css>auto</code></a>’ means the same as ‘<code
2941 class=css>0</code>’ for <a href="#lttopgt"><var><top></var></a>
2942 and <a href="#ltleftgt"><var><left></var></a>, the same as the
2943 used value of the height plus the sum of vertical padding and border
2944 widths for <a href="#ltbottomgt"><var><bottom></var></a>, and the
2945 same as the used value of the width plus the sum of the horizontal
2946 padding and border widths for <a
2947 href="#ltrightgt"><var><right></var></a>, such that four ‘<a
2948 href="#auto"><code class=property>auto</code></a>’ values result in
2949 the clipping region being the same as the element's border box).
2951 <p> When coordinates are rounded to pixel coordinates, care should be
2952 taken that no pixels remain visible when <a
2953 href="#ltleftgt"><var><left></var></a> and <a
2954 href="#ltrightgt"><var><right></var></a> have the same value (or
2955 <a href="#lttopgt"><var><top></var></a> and <a
2956 href="#ltbottomgt"><var><bottom></var></a> have the same value),
2957 and conversely that no pixels within the element's border box remain
2958 hidden when these values are ‘<a href="#auto"><code
2959 class=css>auto</code></a>’.
2960 </dl>
2962 <div class=example>
2963 <p> Example: The following two rules:
2965 <pre><code>
2966 p#one { clip: rect(5px, 40px, 45px, 5px); }
2967 p#two { clip: rect(5px, 55px, 45px, 5px); }</code></pre>
2969 <p> and assuming both Ps are 50 by 55 pixel, will create, respectively,
2970 the rectangular clipping regions delimited by the dashed lines in the
2971 following illustrations:
2973 <div class=figure> <img alt="Values for rect shape" height=577
2974 src="images/clip.png" width=292>
2975 <p class=caption>This diagram illustrates two block boxes, one above the
2976 other, with rectangular clipping regions of different dimensions. (See
2977 <a href="http://www.w3.org/TR/CSS2/images/longdesc/clip-desc.html">long
2978 description</a>.)
2979 </div>
2980 </div>
2982 <h3 id=ClipPathElement><span class=secno>8.4. </span>The <a
2983 class=element-name href="#ClipPathElement">‘<code
2984 class=property>clipPath</code>’</a> element</h3>
2986 <table class=propdef summary="clipPath element">
2987 <tbody>
2988 <tr>
2989 <th>Name:
2991 <td><dfn id=clippath>clipPath</dfn>
2993 <tr>
2994 <th>Categories:
2996 <td>None.
2998 <tr>
2999 <th>Content model:
3001 <td>Any number of the following elements, in any order:
3002 <ul class=no-bullets>
3003 <li><a
3004 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/intro.html#TermDescriptiveElement">descriptive</a>
3005 <span class=expanding> — <a
3006 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/struct.html#DescElement"><span
3007 class=element-name>‘desc’</span></a>, <a
3008 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/struct.html#TitleElement"><span
3009 class=element-name>‘title’</span></a>, <a
3010 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/metadata.html#MetadataElement"><span
3011 class=element-name>‘metadata’</span></a></span>
3013 <li><a
3014 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/intro.html#TermAnimationElement">animation</a>
3015 <span class=expanding> — <a
3016 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/animate.html#AnimateElement"><span
3017 class=element-name>‘animate’</span></a>, <a
3018 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/animate.html#AnimateColorElement"><span
3019 class=element-name>‘animateColor’</span></a>, <a
3020 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/animate.html#AnimateMotionElement"><span
3021 class=element-name>‘animateMotion’</span></a>, <a
3022 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/animate.html#AnimateTransformElement"><span
3023 class=element-name>‘animateTransform’</span></a>, <a
3024 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/animate.html#SetElement"><span
3025 class=element-name>‘set’</span></a></span>
3027 <li><a
3028 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/intro.html#TermShapeElement">shape</a>
3029 <span class=expanding> — <a
3030 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/shapes.html#CircleElement"><span
3031 class=element-name>‘circle’</span></a>, <a
3032 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/shapes.html#EllipseElement"><span
3033 class=element-name>‘ellipse’</span></a>, <a
3034 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/shapes.html#LineElement"><span
3035 class=element-name>‘line’</span></a>, <a
3036 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/paths.html#PathElement"><span
3037 class=element-name>‘path’</span></a>, <a
3038 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/shapes.html#PolygonElement"><span
3039 class=element-name>‘polygon’</span></a>, <a
3040 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/shapes.html#PolylineElement"><span
3041 class=element-name>‘polyline’</span></a>, <a
3042 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/shapes.html#RectElement"><span
3043 class=element-name>‘rect’</span></a></span>
3045 <li><a
3046 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/text.html#TextElement"><span
3047 class=element-name>‘text’</span></a>
3049 <li><a
3050 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/struct.html#UseElement"><span
3051 class=element-name>‘use’</span></a>
3052 </ul>
3054 <tr>
3055 <th>Attributes:
3057 <td>
3058 <ul class=no-bullets>
3059 <li><a
3060 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/intro.html#TermConditionalProcessingAttribute">conditional
3061 processing attributes</a><span class=expanding> — <a
3062 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/struct.html#RequiredFeaturesAttribute"><span
3063 class=attr-name>‘requiredFeatures’</span></a>, <a
3064 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/struct.html#RequiredExtensionsAttribute"><span
3065 class=attr-name>‘requiredExtensions’</span></a>, <a
3066 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/struct.html#SystemLanguageAttribute"><span
3067 class=attr-name>‘systemLanguage’</span></a></span>
3069 <li><a
3070 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/intro.html#TermCoreAttributes">core
3071 attributes</a><span class=expanding> — <a
3072 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/struct.html#IDAttribute"><span
3073 class=attr-name>‘id’</span></a>, <a
3074 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/struct.html#XMLBaseAttribute"><span
3075 class=attr-name>‘xml:base’</span></a>, <a
3076 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/struct.html#XMLLangAttribute"><span
3077 class=attr-name>‘xml:lang’</span></a>, <a
3078 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/struct.html#XMLSpaceAttribute"><span
3079 class=attr-name>‘xml:space’</span></a></span>
3081 <li><a
3082 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/intro.html#TermPresentationAttribute">presentation
3083 attributes</a><span class=expanding> — <a
3084 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/text.html#AlignmentBaselineProperty"><span
3085 class=attr-name>‘alignment-baseline’</span></a>, <a
3086 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/text.html#BaselineShiftProperty"><span
3087 class=attr-name>‘baseline-shift’</span></a>, <a
3088 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/masking.html#ClipProperty"><span
3089 class=attr-name>‘clip’</span></a>, <a
3090 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/masking.html#ClipPathProperty"><span
3091 class=attr-name>‘clip-path’</span></a>, <a
3092 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/masking.html#ClipRuleProperty"><span
3093 class=attr-name>‘clip-rule’</span></a>, <a
3094 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/color.html#ColorProperty"><span
3095 class=attr-name>‘color’</span></a>, <a
3096 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/painting.html#ColorInterpolationProperty"><span
3097 class=attr-name>‘color-interpolation’</span></a>, <a
3098 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/painting.html#ColorInterpolationFiltersProperty"><span
3099 class=attr-name>‘color-interpolation-filters’</span></a>, <a
3100 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/color.html#ColorProfileProperty"><span
3101 class=attr-name>‘color-profile’</span></a>, <a
3102 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/painting.html#ColorRenderingProperty"><span
3103 class=attr-name>‘color-rendering’</span></a>, <a
3104 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/interact.html#CursorProperty"><span
3105 class=attr-name>‘cursor’</span></a>, <a
3106 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/text.html#DirectionProperty"><span
3107 class=attr-name>‘direction’</span></a>, <a
3108 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/painting.html#DisplayProperty"><span
3109 class=attr-name>‘display’</span></a>, <a
3110 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/text.html#DominantBaselineProperty"><span
3111 class=attr-name>‘dominant-baseline’</span></a>, <a
3112 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/filters.html#EnableBackgroundProperty"><span
3113 class=attr-name>‘enable-background’</span></a>, <a
3114 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/painting.html#FillProperty"><span
3115 class=attr-name>‘fill’</span></a>, <a
3116 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/painting.html#FillOpacityProperty"><span
3117 class=attr-name>‘fill-opacity’</span></a>, <a
3118 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/painting.html#FillRuleProperty"><span
3119 class=attr-name>‘fill-rule’</span></a>, <a
3120 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/filters.html#FilterProperty"><span
3121 class=attr-name>‘filter’</span></a>, <a
3122 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/filters.html#FloodColorProperty"><span
3123 class=attr-name>‘flood-color’</span></a>, <a
3124 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/filters.html#FloodOpacityProperty"><span
3125 class=attr-name>‘flood-opacity’</span></a>, <a
3126 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/text.html#FontProperty"><span
3127 class=attr-name>‘font’</span></a>, <a
3128 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/text.html#FontFamilyProperty"><span
3129 class=attr-name>‘font-family’</span></a>, <a
3130 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/text.html#FontSizeProperty"><span
3131 class=attr-name>‘font-size’</span></a>, <a
3132 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/text.html#FontSizeAdjustProperty"><span
3133 class=attr-name>‘font-size-adjust’</span></a>, <a
3134 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/text.html#FontStretchProperty"><span
3135 class=attr-name>‘font-stretch’</span></a>, <a
3136 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/text.html#FontStyleProperty"><span
3137 class=attr-name>‘font-style’</span></a>, <a
3138 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/text.html#FontVariantProperty"><span
3139 class=attr-name>‘font-variant’</span></a>, <a
3140 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/text.html#FontWeightProperty"><span
3141 class=attr-name>‘font-weight’</span></a>, <a
3142 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/text.html#GlyphOrientationHorizontalProperty"><span
3143 class=attr-name>‘glyph-orientation-horizontal’</span></a>, <a
3144 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/text.html#GlyphOrientationVerticalProperty"><span
3145 class=attr-name>‘glyph-orientation-vertical’</span></a>, <a
3146 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/painting.html#ImageRenderingProperty"><span
3147 class=attr-name>‘image-rendering’</span></a>, <a
3148 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/text.html#KerningProperty"><span
3149 class=attr-name>‘kerning’</span></a>, <a
3150 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/text.html#LetterSpacingProperty"><span
3151 class=attr-name>‘letter-spacing’</span></a>, <a
3152 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/filters.html#LightingColorProperty"><span
3153 class=attr-name>‘lighting-color’</span></a>, <a
3154 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/painting.html#MarkerProperty"><span
3155 class=attr-name>‘marker’</span></a>, <a
3156 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/painting.html#MarkerEndProperty"><span
3157 class=attr-name>‘marker-end’</span></a>, <a
3158 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/painting.html#MarkerMidProperty"><span
3159 class=attr-name>‘marker-mid’</span></a>, <a
3160 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/painting.html#MarkerStartProperty"><span
3161 class=attr-name>‘marker-start’</span></a>, <a
3162 href="#MaskProperty"><span class=attr-name>‘mask’</span></a>, <a
3163 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/masking.html#OpacityProperty"><span
3164 class=attr-name>‘opacity’</span></a>, <a
3165 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/masking.html#OverflowProperty"><span
3166 class=attr-name>‘overflow’</span></a>, <a
3167 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/interact.html#PointerEventsProperty"><span
3168 class=attr-name>‘pointer-events’</span></a>, <a
3169 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/painting.html#ShapeRenderingProperty"><span
3170 class=attr-name>‘shape-rendering’</span></a>, <a
3171 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/pservers.html#StopColorProperty"><span
3172 class=attr-name>‘stop-color’</span></a>, <a
3173 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/pservers.html#StopOpacityProperty"><span
3174 class=attr-name>‘stop-opacity’</span></a>, <a
3175 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/painting.html#StrokeProperty"><span
3176 class=attr-name>‘stroke’</span></a>, <a
3177 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/painting.html#StrokeDasharrayProperty"><span
3178 class=attr-name>‘stroke-dasharray’</span></a>, <a
3179 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/painting.html#StrokeDashoffsetProperty"><span
3180 class=attr-name>‘stroke-dashoffset’</span></a>, <a
3181 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/painting.html#StrokeLinecapProperty"><span
3182 class=attr-name>‘stroke-linecap’</span></a>, <a
3183 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/painting.html#StrokeLinejoinProperty"><span
3184 class=attr-name>‘stroke-linejoin’</span></a>, <a
3185 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/painting.html#StrokeMiterlimitProperty"><span
3186 class=attr-name>‘stroke-miterlimit’</span></a>, <a
3187 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/painting.html#StrokeOpacityProperty"><span
3188 class=attr-name>‘stroke-opacity’</span></a>, <a
3189 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/painting.html#StrokeWidthProperty"><span
3190 class=attr-name>‘stroke-width’</span></a>, <a
3191 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/text.html#TextAnchorProperty"><span
3192 class=attr-name>‘text-anchor’</span></a>, <a
3193 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/text.html#TextDecorationProperty"><span
3194 class=attr-name>‘text-decoration’</span></a>, <a
3195 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/painting.html#TextRenderingProperty"><span
3196 class=attr-name>‘text-rendering’</span></a>, <a
3197 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/text.html#UnicodeBidiProperty"><span
3198 class=attr-name>‘unicode-bidi’</span></a>, <a
3199 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/painting.html#VisibilityProperty"><span
3200 class=attr-name>‘visibility’</span></a>, <a
3201 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/text.html#WordSpacingProperty"><span
3202 class=attr-name>‘word-spacing’</span></a>, <a
3203 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/text.html#WritingModeProperty"><span
3204 class=attr-name>‘writing-mode’</span></a></span>
3206 <li><a
3207 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/styling.html#ClassAttribute"><span
3208 class=attr-name>‘class’</span></a>
3210 <li><a
3211 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/styling.html#StyleAttribute"><span
3212 class=attr-name>‘style’</span></a>
3214 <li><a
3215 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/struct.html#ExternalResourcesRequiredAttribute"><span
3216 class=attr-name>‘externalResourcesRequired’</span></a>
3218 <li><a
3219 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/coords.html#TransformAttribute"><span
3220 class=attr-name>‘transform’</span></a>
3222 <li><a href="#ClipPathElementClipPathUnitsAttribute"><span
3223 class=attr-name>‘clipPathUnits’</span></a>
3224 </ul>
3226 <tr>
3227 <th>DOM Interfaces:
3229 <td><a class=idlinterface
3230 href="#InterfaceSVGClipPathElement">SVGClipPathElement</a>
3231 </table>
3233 <div class=adef-list>
3234 <p><em>Attribute definitions:</em>
3236 <dl>
3237 <dt id=ClipPathElementClipPathUnitsAttribute><span
3238 class=adef>clipPathUnits</span> = "<em>userSpaceOnUse</em> |
3239 <em>objectBoundingBox</em>"
3241 <dd>Defines the coordinate system for the contents of the <a
3242 class=element-name href="#ClipPathElement">‘<code
3243 class=property>clipPath</code>’</a>.<br>
3244 If <span class=attr-value>clipPathUnits="userSpaceOnUse"</span>, the
3245 contents of the <a class=element-name href="#ClipPathElement">‘<code
3246 class=property>clipPath</code>’</a> represent values in the current
3247 user coordinate system in place at the time when the <a
3248 class=element-name href="#ClipPathElement">‘<code
3249 class=property>clipPath</code>’</a> element is referenced (i.e., the
3250 user coordinate system for the element referencing the <a
3251 class=element-name href="#ClipPathElement">‘<code
3252 class=property>clipPath</code>’</a> element via the <a class=property
3253 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/masking.html#ClipPathProperty">‘<code
3254 class=property>clip-path</code>’</a> property).<br>
3255 If <span class=attr-value>clipPathUnits="objectBoundingBox"</span>, then
3256 the user coordinate system for the contents of the <a class=element-name
3257 href="#ClipPathElement">‘<code class=property>clipPath</code>’</a>
3258 element is established using the bounding box of the element to which
3259 the clipping path is applied (see <a class=index
3260 href="#object-bounding-box-units" id=object-bounding-box-units0>object
3261 bounding box units</a>).<br>
3262 If attribute <a class=attr-name
3263 href="#ClipPathElementClipPathUnitsAttribute">‘<code
3264 class=property>clipPathUnits</code>’</a> is not specified, then the
3265 effect is as if a value of <span class=attr-value>‘<code
3266 class=property>userSpaceOnUse</code>’</span> were specified.<br>
3267 <span class=anim-target>Animatable: yes.</span>
3268 </dl>
3269 </div>
3271 <p>CSS properties inherit into the <a class=element-name
3272 href="#ClipPathElement">‘<code class=property>clipPath</code>’</a>
3273 element from its ancestors; properties do <em>not</em> inherit from the
3274 element referencing the <a class=element-name
3275 href="#ClipPathElement">‘<code class=property>clipPath</code>’</a>
3276 element.
3278 <p><a class=element-name href="#ClipPathElement">‘<code
3279 class=property>clipPath</code>’</a> elements are never rendered
3280 directly; their only usage is as something that can be referenced using
3281 the <a class=property
3282 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/masking.html#ClipPathProperty">‘<code
3283 class=property>clip-path</code>’</a> property. The <a class=property
3284 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/painting.html#DisplayProperty">‘<code
3285 class=property>display</code>’</a> property does not apply to the <a
3286 class=element-name href="#ClipPathElement">‘<code
3287 class=property>clipPath</code>’</a> element; thus, <a class=element-name
3288 href="#ClipPathElement">‘<code class=property>clipPath</code>’</a>
3289 elements are not directly rendered even if the ‘<code
3290 class=property>display</code>’ property is set to a value other than <a
3291 class=prop-value href="#none">none</a>, and <a class=element-name
3292 href="#ClipPathElement">‘<code class=property>clipPath</code>’</a>
3293 elements are available for referencing even when the <a class=property
3294 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/painting.html#DisplayProperty">‘<code
3295 class=property>display</code>’</a> property on the <a class=element-name
3296 href="#ClipPathElement">‘<code class=property>clipPath</code>’</a>
3297 element or any of its ancestors is set to <a class=prop-value
3298 href="#none">none</a>.
3300 <p>A <a class=element-name href="#ClipPathElement">‘<code
3301 class=property>clipPath</code>’</a> element can contain <a
3302 class=element-name
3303 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/paths.html#PathElement">‘<code
3304 class=property>path</code>’</a> elements, <a class=element-name
3305 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/text.html#TextElement">‘<code
3306 class=property>text</code>’</a> elements, <a
3307 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/intro.html#TermBasicShapeElement">basic
3308 shapes</a> (such as <a class=element-name
3309 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/shapes.html#CircleElement">‘<code
3310 class=property>circle</code>’</a>) or a <a class=element-name
3311 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/struct.html#UseElement">‘<code
3312 class=property>use</code>’</a> element. If a <a class=element-name
3313 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/struct.html#UseElement">‘<code
3314 class=property>use</code>’</a> element is a child of a <a
3315 class=element-name href="#ClipPathElement">‘<code
3316 class=property>clipPath</code>’</a> element, it must directly reference
3317 <a class=element-name
3318 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/paths.html#PathElement">‘<code
3319 class=property>path</code>’</a>, <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> or <a
3322 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/intro.html#TermBasicShapeElement">basic
3323 shapes</a> elements. Indirect references are an error and the <a
3324 class=element-name href="#ClipPathElement">‘<code
3325 class=property>clipPath</code>’</a> element must be ignored.
3327 <p>The raw geometry of each child element exclusive of rendering properties
3328 such as ‘<code class=property>fill</code>’, ‘<code
3329 class=property>stroke</code>’, ‘<code
3330 class=property>stroke-width</code>’ within a <a class=element-name
3331 href="#ClipPathElement">‘<code class=property>clipPath</code>’</a>
3332 conceptually defines a 1-bit mask (with the possible exception of
3333 anti-aliasing along the edge of the geometry) which represents the
3334 silhouette of the graphics associated with that element. Anything outside
3335 the outline of the object is masked out. If a child element is made
3336 invisible by ‘<code class=property>display</code>’ or ‘<code
3337 class=property>visibility</code>’ it does not contribute to the clipping
3338 path. When the <a class=element-name href="#ClipPathElement">‘<code
3339 class=property>clipPath</code>’</a> element contains multiple child
3340 elements, the silhouettes of the child elements are logically OR'd
3341 together to create a single silhouette which is then used to restrict the
3342 region onto which paint can be applied. Thus, a point is inside the
3343 clipping path if it is inside any of the children of the <a
3344 class=element-name href="#ClipPathElement">‘<code
3345 class=property>clipPath</code>’</a>.
3347 <p>For a given graphics element, the actual clipping path used will be the
3348 intersection of the clipping path specified by its ‘<a
3349 href="#clip-path"><code class=property>clip-path</code></a>’ property
3350 (if any) with any clipping paths on its ancestors, as specified by the
3351 ‘<a href="#clip-path"><code class=property>clip-path</code></a>’
3352 property on the elements which establish a new viewport. (See <a
3353 href="#SVG11" rel=biblioentry>[SVG11]<!--{{SVG11}}--></a>)
3355 <p>A couple of additions:
3357 <ul>
3358 <li>The <a class=element-name href="#ClipPathElement">‘<code
3359 class=property>clipPath</code>’</a> element itself and its child
3360 elements do <em>not</em> inherit clipping paths from the ancestors of the
3361 <a class=element-name href="#ClipPathElement">‘<code
3362 class=property>clipPath</code>’</a> element.
3364 <li>The <a class=element-name href="#ClipPathElement">‘<code
3365 class=property>clipPath</code>’</a> element or any of its children can
3366 specify property ‘<a href="#clip-path"><code
3367 class=property>clip-path</code></a>’.<br>
3368 If a valid ‘<a href="#clip-path"><code
3369 class=property>clip-path</code></a>’ reference is placed on a <a
3370 class=element-name href="#ClipPathElement">‘<code
3371 class=property>clipPath</code>’</a> element, the resulting clipping
3372 path is the intersection of the contents of the <a class=element-name
3373 href="#ClipPathElement">‘<code class=property>clipPath</code>’</a>
3374 element with the referenced clipping path.<br>
3375 If a valid ‘<a href="#clip-path"><code
3376 class=property>clip-path</code></a>’ reference is placed on one of the
3377 children of a <a class=element-name href="#ClipPathElement">‘<code
3378 class=property>clipPath</code>’</a> element, then the given child
3379 element is clipped by the referenced clipping path before OR'ing the
3380 silhouette of the child element with the silhouettes of the other child
3381 elements.
3383 <li>An empty clipping path will completely clip away the element that had
3384 the ‘<a href="#clip-path"><code class=property>clip-path</code></a>’
3385 property applied.
3386 </ul>
3388 <h3 id=clipPath-geometry><span class=secno>8.5. </span>Clipping paths,
3389 geometry, and pointer events</h3>
3391 <p>A clipping path is conceptually equivalent to a custom viewport for the
3392 referencing element. Thus, it affects the rendering of an element, but not
3393 the element's inherent geometry. The <a class=index
3394 href="#bounding-client-rect" id=bounding-client-rect2>bounding client
3395 rect</a> of a clipped element (that is, an element which references a <a
3396 class=element-name href="#ClipPathElement">‘<code
3397 class=property>clipPath</code>’</a> element via a ‘<a
3398 href="#clip-path"><code class=property>clip-path</code></a>’ property,
3399 or a child of the referencing element) must remain the same as if it were
3400 not clipped.
3402 <p>By default, <a
3403 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/interact.html#PointerEventsProperty">pointer
3404 events</a> must not be dispatched on the clipped (non-visible) regions of
3405 a shape. For example, a circle with a radius of 10 which is clipped to a
3406 circle with a radius of 5 will not receive <span class=event-name>‘<code
3407 class=property>click</code>’</span> events outside the smaller radius.
3408 Later versions of this specification may define new properties to enable
3409 fine-grained control over the interactions between hit testing and
3410 clipping.
3412 <h2 id=security><span class=secno>9. </span>Security</h2>
3414 <h3 id=origin-restrictions><span class=secno>9.1. </span>Origin
3415 Restrictions</h3>
3417 <p> External references to resources like <a class=element-name
3418 href="#MaskElement">‘<code class=property>mask</code>’</a> or <a
3419 class=element-name href="#ClipPathElement">‘<code
3420 class=property>clipPath</code>’</a> must not violate the same origin
3421 restrictions <a href="#CORS" rel=biblioentry>[CORS]<!--{{!CORS}}--></a>.
3423 <p>This restriction includes:
3425 <ul>
3426 <li>Any images, either as content or via styling, that are not exposed
3427 with CORS
3429 <li>Any tainted canvas
3431 <li>Any cross-origin content referenced by ‘<code
3432 class=css>xlink:href</code>’ or <use>
3433 </ul>
3435 <p> If content falls under this restriction, the resource must be rejected.
3436 The element is drawn as if the resource was not specified (i.e. the ‘<a
3437 href="#clip-path"><code class=property>clip-path</code></a>’ or ‘<a
3438 href="#mask"><code class=property>mask</code></a>’ property were set to
3439 ‘<a href="#none"><code class=css>none</code></a>’).
3441 <h2 id=DOMInterfaces><span class=secno>10. </span>DOM interfaces</h2>
3443 <h3 id=InterfaceSVGClipPathElement><span class=secno>10.1. </span>Interface
3444 SVGClipPathElement</h3>
3446 <p>The <a href="#InterfaceSVGClipPathElement">SVGClipPathElement</a>
3447 interface corresponds to the <a class=element-name
3448 href="#ClipPathElement">‘<code class=property>clipPath</code>’</a>
3449 element.
3451 <pre class=idl>interface <b>SVGClipPathElement</b> : <a
3452 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/types.html#InterfaceSVGElement">SVGElement</a> {
3453 readonly attribute <a
3454 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/types.html#InterfaceSVGAnimatedEnumeration">SVGAnimatedEnumeration</a> <a
3455 href="#SVGClipPathElement__clipPathUnits">clipPathUnits</a>;
3456 readonly attribute <a
3457 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/coords.html#InterfaceSVGAnimatedTransformList">SVGAnimatedTransformList</a> <a
3458 href="#SVGClipPathElement__transform">transform</a>;
3459 };
3461 <a
3462 href="#InterfaceSVGClipPathElement">SVGClipPathElement</a> implements <a
3463 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/types.html#InterfaceSVGUnitTypes">SVGUnitTypes</a>;</pre>
3465 <dl class=interface>
3466 <dt class=attributes-header>Attributes:
3468 <dd>
3469 <dl class=attributes>
3470 <dt class="attribute first-child"
3471 id="SVGClipPathElement__clipPathUnits"><b>clipPathUnits</b><span
3472 class=idl-type-parenthetical> (readonly <a
3473 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/types.html#InterfaceSVGAnimatedEnumeration">SVGAnimatedEnumeration</a>)</span>
3475 <dd class=attribute>
3476 <div> Corresponds to attribute <a class=attr-name
3477 href="#ClipPathElementClipPathUnitsAttribute">‘<code
3478 class=property>clipPathUnits</code>’</a> on the given <a
3479 class=element-name href="#ClipPathElement">‘<code
3480 class=property>clipPath</code>’</a> element. Takes one of the
3481 constants defined in <a
3482 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/types.html#InterfaceSVGUnitTypes">SVGUnitTypes</a>.</div>
3484 <dt class="attribute first-child"
3485 id="SVGClipPathElement__transform"><b>transform</b><span
3486 class=idl-type-parenthetical> (readonly <a
3487 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/coords.html#InterfaceSVGAnimatedTransformList">SVGAnimatedTransformList</a>)</span>
3489 <dd class=attribute>
3490 <div> Corresponds to attribute <a class=attr-name
3491 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/coords.html#TransformAttribute">‘<code
3492 class=property>transform</code>’</a> on the given element.</div>
3493 </dl>
3494 </dl>
3496 <h3 id=InterfaceSVGMaskElement><span class=secno>10.2. </span>Interface
3497 SVGMaskElement</h3>
3499 <p>The <a href="#InterfaceSVGMaskElement">SVGMaskElement</a> interface
3500 corresponds to the <a class=element-name href="#MaskElement">‘<code
3501 class=property>mask</code>’</a> element.
3503 <pre class=idl>interface <b>SVGMaskElement</b> : <a
3504 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/types.html#InterfaceSVGElement">SVGElement</a> {
3505 readonly attribute <a
3506 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/types.html#InterfaceSVGAnimatedEnumeration">SVGAnimatedEnumeration</a> <a
3507 href="#SVGMaskElement__maskUnits">maskUnits</a>;
3508 readonly attribute <a
3509 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/types.html#InterfaceSVGAnimatedEnumeration">SVGAnimatedEnumeration</a> <a
3510 href="#SVGMaskElement__maskContentUnits">maskContentUnits</a>;
3511 readonly attribute <a
3512 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/types.html#InterfaceSVGAnimatedLength">SVGAnimatedLength</a> <a
3513 href="#SVGMaskElement__x">x</a>;
3514 readonly attribute <a
3515 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/types.html#InterfaceSVGAnimatedLength">SVGAnimatedLength</a> <a
3516 href="#SVGMaskElement__y">y</a>;
3517 readonly attribute <a
3518 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/types.html#InterfaceSVGAnimatedLength">SVGAnimatedLength</a> <a
3519 href="#SVGMaskElement__width">width</a>;
3520 readonly attribute <a
3521 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/types.html#InterfaceSVGAnimatedLength">SVGAnimatedLength</a> <a
3522 href="#SVGMaskElement__height">height</a>;
3523 };
3525 <a
3526 href="#InterfaceSVGMaskElement">SVGMaskElement</a> implements <a
3527 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/types.html#InterfaceSVGUnitTypes">SVGUnitTypes</a>;</pre>
3529 <dl class=interface>
3530 <dt class=attributes-header>Attributes:
3532 <dd>
3533 <dl class=attributes>
3534 <dt class="attribute first-child"
3535 id="SVGMaskElement__maskUnits"><b>maskUnits</b><span
3536 class=idl-type-parenthetical> (readonly <a
3537 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/types.html#InterfaceSVGAnimatedEnumeration">SVGAnimatedEnumeration</a>)</span>
3539 <dd class=attribute>
3540 <div> Corresponds to attribute <a class=attr-name
3541 href="#MaskElementMaskUnitsAttribute">‘<code
3542 class=property>maskUnits</code>’</a> on the given <a
3543 class=element-name href="#MaskElement">‘<code
3544 class=property>mask</code>’</a> element. Takes one of the constants
3545 defined in <a
3546 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/types.html#InterfaceSVGUnitTypes">SVGUnitTypes</a>.</div>
3548 <dt class=attribute
3549 id="SVGMaskElement__maskContentUnits"><b>maskContentUnits</b><span
3550 class=idl-type-parenthetical> (readonly <a
3551 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/types.html#InterfaceSVGAnimatedEnumeration">SVGAnimatedEnumeration</a>)</span>
3553 <dd class=attribute>
3554 <div> Corresponds to attribute <a class=attr-name
3555 href="#MaskElementMaskContentUnitsAttribute">‘<code
3556 class=property>maskContentUnits</code>’</a> on the given <a
3557 class=element-name href="#MaskElement">‘<code
3558 class=property>mask</code>’</a> element. Takes one of the constants
3559 defined in <a
3560 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/types.html#InterfaceSVGUnitTypes">SVGUnitTypes</a>.</div>
3562 <dt class=attribute id="SVGMaskElement__x"><b>x</b><span
3563 class=idl-type-parenthetical> (readonly <a
3564 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/types.html#InterfaceSVGAnimatedLength">SVGAnimatedLength</a>)</span>
3566 <dd class=attribute>
3567 <div> Corresponds to attribute <a class=attr-name
3568 href="#MaskElementXAttribute">‘<code class=property>x</code>’</a>
3569 on the given <a class=element-name href="#MaskElement">‘<code
3570 class=property>mask</code>’</a> element.</div>
3572 <dt class=attribute id="SVGMaskElement__y"><b>y</b><span
3573 class=idl-type-parenthetical> (readonly <a
3574 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/types.html#InterfaceSVGAnimatedLength">SVGAnimatedLength</a>)</span>
3576 <dd class=attribute>
3577 <div> Corresponds to attribute <a class=attr-name
3578 href="#MaskElementYAttribute">‘<code class=property>y</code>’</a>
3579 on the given <a class=element-name href="#MaskElement">‘<code
3580 class=property>mask</code>’</a> element.</div>
3582 <dt class=attribute id="SVGMaskElement__width"><b>width</b><span
3583 class=idl-type-parenthetical> (readonly <a
3584 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/types.html#InterfaceSVGAnimatedLength">SVGAnimatedLength</a>)</span>
3586 <dd class=attribute>
3587 <div> Corresponds to attribute <a class=attr-name
3588 href="#MaskElementWidthAttribute">‘<code
3589 class=property>width</code>’</a> on the given <a class=element-name
3590 href="#MaskElement">‘<code class=property>mask</code>’</a>
3591 element.</div>
3593 <dt class=attribute id="SVGMaskElement__height"><b>height</b><span
3594 class=idl-type-parenthetical> (readonly <a
3595 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/types.html#InterfaceSVGAnimatedLength">SVGAnimatedLength</a>)</span>
3597 <dd class=attribute>
3598 <div> Corresponds to attribute <a class=attr-name
3599 href="#MaskElementHeightAttribute">‘<code
3600 class=property>height</code>’</a> on the given <a class=element-name
3601 href="#MaskElement">‘<code class=property>mask</code>’</a>
3602 element.</div>
3603 </dl>
3604 </dl>
3606 <h2 id=conformance><span class=secno>11. </span>Conformance</h2>
3608 <h3 class=no-ref id=conformance-to-css-background-and-border><span
3609 class=secno>11.1. </span>Conformance to CSS Background and Borders</h3>
3611 <p> Some property and element definitions in this specification require an
3612 SVG 1.1 implementation <a href="#SVG11"
3613 rel=biblioentry>[SVG11]<!--{{!SVG11}}--></a>. UAs without support for SVG
3614 must not implement any of the following properties and elements: ‘<a
3615 href="#mask-type"><code class=property>mask-type</code></a>’, ‘<a
3616 href="#clip-rule"><code class=property>clip-rule</code></a>’, <a
3617 class=element-name href="#ClipPathElement">‘<code
3618 class=property>clipPath</code>’</a> element, <a class=element-name
3619 href="#MaskElement">‘<code class=property>mask</code>’</a> element.
3620 For UAs without support for SVG, the ‘<a href="#mask"><code
3621 class=property>mask</code></a>’ and ‘<a href="#clip-path"><code
3622 class=property>clip-path</code></a>’ properties must neither support
3623 references to <a class=element-name href="#MaskElement">‘<code
3624 class=property>mask</code>’</a> elements nor to <a class=element-name
3625 href="#ClipPathElement">‘<code class=property>clipPath</code>’</a>
3626 elements.</p>
3627 <!--begin-conformance-->
3629 <h3 class=no-ref id=conventions> Document conventions</h3>
3631 <p>Conformance requirements are expressed with a combination of descriptive
3632 assertions and RFC 2119 terminology. The key words “MUST”, “MUST
3633 NOT”, “REQUIRED”, “SHALL”, “SHALL NOT”, “SHOULD”,
3634 “SHOULD NOT”, “RECOMMENDED”, “MAY”, and “OPTIONAL” in the
3635 normative parts of this document are to be interpreted as described in RFC
3636 2119. However, for readability, these words do not appear in all uppercase
3637 letters in this specification.
3639 <p>All of the text of this specification is normative except sections
3640 explicitly marked as non-normative, examples, and notes. <a
3641 href="#RFC2119" rel=biblioentry>[RFC2119]<!--{{!RFC2119}}--></a>
3643 <p>Examples in this specification are introduced with the words “for
3644 example” or are set apart from the normative text with
3645 <code>class="example"</code>, like this:
3647 <div class=example>
3648 <p>This is an example of an informative example.
3649 </div>
3651 <p>Informative notes begin with the word “Note” and are set apart from
3652 the normative text with <code>class="note"</code>, like this:
3654 <p class=note>Note, this is an informative note.
3656 <h3 class=no-ref id=conformance-classes> Conformance classes</h3>
3658 <p>Conformance to this is defined for three conformance classes:
3660 <dl>
3661 <dt><dfn id=style-sheet title="style sheet!!as conformance class">style
3662 sheet</dfn>
3664 <dd>A <a href="http://www.w3.org/TR/CSS21/conform.html#style-sheet">CSS
3665 style sheet</a>.
3667 <dt><dfn id=renderer>renderer</dfn>
3669 <dd>A <a href="http://www.w3.org/TR/CSS21/conform.html#user-agent">UA</a>
3670 that interprets the semantics of a style sheet and renders documents that
3671 use them.
3673 <dt><dfn id=authoring-tool>authoring tool</dfn>
3675 <dd>A <a href="http://www.w3.org/TR/CSS21/conform.html#user-agent">UA</a>
3676 that writes a style sheet.
3677 </dl>
3679 <p>A style sheet is conformant to this specification if all of its
3680 statements that use syntax defined in this module are valid according to
3681 the generic CSS grammar and the individual grammars of each feature
3682 defined in this module.
3684 <p>A renderer is conformant to this specification if, in addition to
3685 interpreting the style sheet as defined by the appropriate specifications,
3686 it supports all the features defined by this specification by parsing them
3687 correctly and rendering the document accordingly. However, the inability
3688 of a UA to correctly render a document due to limitations of the device
3689 does not make the UA non-conformant. (For example, a UA is not required to
3690 render color on a monochrome monitor.)
3692 <p>An authoring tool is conformant to this specification if it writes style
3693 sheets that are syntactically correct according to the generic CSS grammar
3694 and the individual grammars of each feature in this module, and meet all
3695 other conformance requirements of style sheets as described in this
3696 module.
3698 <h3 class=no-ref id=partial> Partial implementations</h3>
3700 <p>So that authors can exploit the forward-compatible parsing rules to
3701 assign fallback values, CSS renderers <strong>must</strong> treat as
3702 invalid (and <a
3703 href="http://www.w3.org/TR/CSS21/conform.html#ignore">ignore as
3704 appropriate</a>) any at-rules, properties, property values, keywords, and
3705 other syntactic constructs for which they have no usable level of support.
3706 In particular, user agents <strong>must not</strong> selectively ignore
3707 unsupported component values and honor supported values in a single
3708 multi-value property declaration: if any value is considered invalid (as
3709 unsupported values must be), CSS requires that the entire declaration be
3710 ignored.
3712 <h3 class=no-ref id=experimental> Experimental implementations</h3>
3714 <p>To avoid clashes with future CSS features, the CSS 2.1 specification
3715 reserves a <a
3716 href="http://www.w3.org/TR/CSS21/syndata.html#vendor-keywords">prefixed
3717 syntax</a> for proprietary and experimental extensions to CSS.
3719 <p>Prior to a specification reaching the Candidate Recommendation stage in
3720 the W3C process, all implementations of a CSS feature are considered
3721 experimental. The CSS Working Group recommends that implementations use a
3722 vendor-prefixed syntax for such features, including those in W3C Working
3723 Drafts. This avoids incompatibilities with future changes in the draft.
3725 <h3 class=no-ref id=testing> Non-experimental implementations</h3>
3727 <p>Once a specification reaches the Candidate Recommendation stage,
3728 non-experimental implementations are possible, and implementors should
3729 release an unprefixed implementation of any CR-level feature they can
3730 demonstrate to be correctly implemented according to spec.
3732 <p>To establish and maintain the interoperability of CSS across
3733 implementations, the CSS Working Group requests that non-experimental CSS
3734 renderers submit an implementation report (and, if necessary, the
3735 testcases used for that implementation report) to the W3C before releasing
3736 an unprefixed implementation of any CSS features. Testcases submitted to
3737 W3C are subject to review and correction by the CSS Working Group.
3739 <p>Further information on submitting testcases and implementation reports
3740 can be found from on the CSS Working Group's website at <a
3741 href="http://www.w3.org/Style/CSS/Test/">http://www.w3.org/Style/CSS/Test/</a>.
3742 Questions should be directed to the <a
3743 href="http://lists.w3.org/Archives/Public/public-css-testsuite">public-css-testsuite@w3.org</a>
3744 mailing list. <!--end-conformance-->
3746 <h2 class=no-num id=references> References</h2>
3748 <h3 class=no-num id=normative-references> Normative references</h3>
3749 <!--begin-normative-->
3750 <!-- Sorted by label -->
3752 <dl class=bibliography>
3753 <dt style="display: none"><!-- keeps the doc valid if the DL is empty -->
3754 <!---->
3756 <dt id=CORS>[CORS]
3758 <dd>Anne van Kesteren. <a
3759 href="http://www.w3.org/TR/2013/CR-cors-20130129/"><cite>Cross-Origin
3760 Resource Sharing.</cite></a> 29 January 2013. W3C Candidate
3761 Recommendation. (Work in progress.) URL: <a
3762 href="http://www.w3.org/TR/2013/CR-cors-20130129/">http://www.w3.org/TR/2013/CR-cors-20130129/</a>
3763 </dd>
3764 <!---->
3766 <dt id=CSS21>[CSS21]
3768 <dd>Bert Bos; et al. <a
3769 href="http://www.w3.org/TR/2011/REC-CSS2-20110607/"><cite>Cascading Style
3770 Sheets Level 2 Revision 1 (CSS 2.1) Specification.</cite></a> 7 June
3771 2011. W3C Recommendation. URL: <a
3772 href="http://www.w3.org/TR/2011/REC-CSS2-20110607/">http://www.w3.org/TR/2011/REC-CSS2-20110607/</a>
3773 </dd>
3774 <!---->
3776 <dt id=CSS3-EXCLUSIONS>[CSS3-EXCLUSIONS]
3778 <dd>Vincent Hardy; Rossen Atanassov; Alan Stearns. <a
3779 href="http://www.w3.org/TR/2012/WD-css3-exclusions-20120503/"><cite>CSS
3780 Exclusions and Shapes Module Level 3.</cite></a> 3 May 2012. W3C Working
3781 Draft. (Work in progress.) URL: <a
3782 href="http://www.w3.org/TR/2012/WD-css3-exclusions-20120503/">http://www.w3.org/TR/2012/WD-css3-exclusions-20120503/</a>
3783 </dd>
3784 <!---->
3786 <dt id=CSS3-IMAGES>[CSS3-IMAGES]
3788 <dd>Elika J. Etemad; Tab Atkins Jr. <a
3789 href="http://www.w3.org/TR/2012/CR-css3-images-20120417/"><cite>CSS Image
3790 Values and Replaced Content Module Level 3.</cite></a> 17 April 2012. W3C
3791 Candidate Recommendation. (Work in progress.) URL: <a
3792 href="http://www.w3.org/TR/2012/CR-css3-images-20120417/">http://www.w3.org/TR/2012/CR-css3-images-20120417/</a>
3793 </dd>
3794 <!---->
3796 <dt id=CSS3BG>[CSS3BG]
3798 <dd>Bert Bos; Elika J. Etemad; Brad Kemper. <a
3799 href="http://www.w3.org/TR/2012/CR-css3-background-20120724/"><cite>CSS
3800 Backgrounds and Borders Module Level 3.</cite></a> 24 July 2012. W3C
3801 Candidate Recommendation. (Work in progress.) URL: <a
3802 href="http://www.w3.org/TR/2012/CR-css3-background-20120724/">http://www.w3.org/TR/2012/CR-css3-background-20120724/</a>
3803 </dd>
3804 <!---->
3806 <dt id=CSS3VAL>[CSS3VAL]
3808 <dd>Håkon Wium Lie; Tab Atkins; Elika J. Etemad. <a
3809 href="http://www.w3.org/TR/2012/CR-css3-values-20120828/"><cite>CSS
3810 Values and Units Module Level 3.</cite></a> 28 August 2012. W3C Candidate
3811 Recommendation. (Work in progress.) URL: <a
3812 href="http://www.w3.org/TR/2012/CR-css3-values-20120828/">http://www.w3.org/TR/2012/CR-css3-values-20120828/</a>
3813 </dd>
3814 <!---->
3816 <dt id=DOM>[DOM]
3818 <dd>Anne van Kesteren; et al. <a
3819 href="http://www.w3.org/TR/2012/WD-dom-20121206/"><cite>DOM4.</cite></a>
3820 6 December 2012. W3C Working Draft. (Work in progress.) URL: <a
3821 href="http://www.w3.org/TR/2012/WD-dom-20121206/">http://www.w3.org/TR/2012/WD-dom-20121206/</a>
3822 </dd>
3823 <!---->
3825 <dt id=RFC2119>[RFC2119]
3827 <dd>S. Bradner. <a href="http://www.ietf.org/rfc/rfc2119.txt"><cite>Key
3828 words for use in RFCs to Indicate Requirement Levels.</cite></a> Internet
3829 RFC 2119. URL: <a
3830 href="http://www.ietf.org/rfc/rfc2119.txt">http://www.ietf.org/rfc/rfc2119.txt</a>
3831 </dd>
3832 <!---->
3834 <dt id=SELECTORS4>[SELECTORS4]
3836 <dd>Elika J. Etemad. <a
3837 href="http://www.w3.org/TR/2012/WD-selectors4-20120823/"><cite>Selectors
3838 Level 4.</cite></a> 23 August 2012. W3C Working Draft. (Work in
3839 progress.) URL: <a
3840 href="http://www.w3.org/TR/2012/WD-selectors4-20120823/">http://www.w3.org/TR/2012/WD-selectors4-20120823/</a>
3841 </dd>
3842 <!---->
3844 <dt id=SVG11>[SVG11]
3846 <dd>Erik Dahlström; et al. <a
3847 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/"><cite>Scalable
3848 Vector Graphics (SVG) 1.1 (Second Edition).</cite></a> 16 August 2011.
3849 W3C Recommendation. URL: <a
3850 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/">http://www.w3.org/TR/2011/REC-SVG11-20110816/</a>
3851 </dd>
3852 <!---->
3853 </dl>
3854 <!--end-normative-->
3856 <dl>
3857 <dt id=ref-svg2><strong class=normref>[SVG2]</strong>
3859 <dd> Cameron McCormack; et al. <a
3860 href="http://www.w3.org/TR/2012/WD-SVG2-20120828/"><cite>Scalable Vector
3861 Graphics (SVG) 2</cite>.</a> 28 August 2012. W3C Working Draft. (Work in
3862 progress.) URL: <a
3863 href="http://www.w3.org/TR/2012/WD-SVG2-20120828/">http://www.w3.org/TR/2012/WD-SVG2-20120828/</a>
3864 </dl>
3866 <h3 class=no-num id=other-references> Other references</h3>
3867 <!--begin-informative-->
3868 <!-- Sorted by label -->
3870 <dl class=bibliography>
3871 <dt style="display: none"><!-- keeps the doc valid if the DL is empty -->
3872 <!---->
3874 <dt id=CSS3-TRANSFORMS>[CSS3-TRANSFORMS]
3876 <dd>Simon Fraser; et al. <a
3877 href="http://www.w3.org/TR/2012/WD-css3-transforms-20120911/"><cite>CSS
3878 Transforms.</cite></a> 11 September 2012. W3C Working Draft. (Work in
3879 progress.) URL: <a
3880 href="http://www.w3.org/TR/2012/WD-css3-transforms-20120911/">http://www.w3.org/TR/2012/WD-css3-transforms-20120911/</a>
3881 </dd>
3882 <!---->
3884 <dt id=CSSOM-VIEW>[CSSOM-VIEW]
3886 <dd>Anne van Kesteren. <a
3887 href="http://www.w3.org/TR/2011/WD-cssom-view-20110804/"><cite>CSSOM View
3888 Module.</cite></a> 4 August 2011. W3C Working Draft. (Work in progress.)
3889 URL: <a
3890 href="http://www.w3.org/TR/2011/WD-cssom-view-20110804/">http://www.w3.org/TR/2011/WD-cssom-view-20110804/</a>
3891 </dd>
3892 <!---->
3893 </dl>
3894 <!--end-informative-->
3896 <h2 class=no-num id=index> Index</h2>
3897 <!--begin-index-->
3899 <ul class=indexlist>
3900 <li>‘<a href="#alpha"><code class=css>alpha</code></a>’, <a
3901 href="#alpha" title="section 6.2."><strong>6.2.</strong></a>
3903 <li>authoring tool, <a href="#authoring-tool"
3904 title="section 11.1."><strong>11.1.</strong></a>
3906 <li>‘<a href="#auto"><code class=css>auto</code></a>’, <a href="#auto"
3907 title="section 6.2."><strong>6.2.</strong></a>
3909 <li>‘<code class=css>border-box</code>’
3910 <ul>
3911 <li>‘<a href="#mask-clip"><code class=property>mask-clip</code></a>’
3912 value, <a href="#border-box"
3913 title="section 6.5."><strong>6.5.</strong></a>
3915 <li>‘<a href="#mask-origin"><code
3916 class=property>mask-origin</code></a>’ value, <a href="#border-box0"
3917 title="section 6.6."><strong>6.6.</strong></a>
3918 </ul>
3920 <li><bottom>, <a href="#ltbottomgt"
3921 title="section 8.3."><strong>8.3.</strong></a>
3923 <li>bounding client rect, <a href="#bounding-client-rect"
3924 title="section 4."><strong>4.</strong></a>, <a
3925 href="#bounding-client-rect0" title="section 8.1.">8.1.</a>, <a
3926 href="#bounding-client-rect1" title="section 8.1.">8.1.</a>, <a
3927 href="#bounding-client-rect2" title="section 8.5.">8.5.</a>
3929 <li><a href="#ltboxgt"><var><box></var></a>, <a href="#ltboxgt"
3930 title="section 6.5."><strong>6.5.</strong></a>
3932 <li><child-selector>, <a href="#ltchild-selectorgt"
3933 title="section 6.1."><strong>6.1.</strong></a>
3935 <li>clip, <a href="#ClipProperty"
3936 title="section 8.3."><strong>8.3.</strong></a>
3938 <li><a href="#ltclip-boxgt"><var><clip-box></var></a>, <a
3939 href="#ltclip-boxgt" title="section 6.5."><strong>6.5.</strong></a>
3941 <li>clipPath, <a href="#clippath"
3942 title="section 8.4."><strong>8.4.</strong></a>
3944 <li>clip-path, <a href="#clip-path"
3945 title="section 8.1."><strong>8.1.</strong></a>
3947 <li>clip-rule, <a href="#clip-rule"
3948 title="section 8.2."><strong>8.2.</strong></a>
3950 <li><clip-source>, <a href="#ltclip-sourcegt"
3951 title="section 8.1."><strong>8.1.</strong></a>
3953 <li>‘<a href="#ltcompound-selectorgt"><code
3954 class=css><compound-selector></code></a>’, <a
3955 href="#ltcompound-selectorgt"
3956 title="section 6.1."><strong>6.1.</strong></a>
3958 <li>‘<a href="#content-box0"><code class=css>content-box</code></a>’,
3959 <a href="#content-box0" title="section 6.6."><strong>6.6.</strong></a>
3960 <ul>
3961 <li>‘<a href="#mask-clip"><code class=property>mask-clip</code></a>’
3962 value, <a href="#content-box"
3963 title="section 6.5."><strong>6.5.</strong></a>
3964 </ul>
3966 <li>‘<a href="#evenodd"><code class=css>evenodd</code></a>’, <a
3967 href="#evenodd" title="section 8.2."><strong>8.2.</strong></a>
3969 <li><image>, <a href="#ltimagegt"
3970 title="section 6.1."><strong>6.1.</strong></a>
3972 <li>layers, <a href="#layers" title="section 5.1.">5.1.</a>
3974 <li><left>, <a href="#ltleftgt"
3975 title="section 8.3."><strong>8.3.</strong></a>
3977 <li>local coordinate system, <a href="#local-coordinate-system"
3978 title="section 4."><strong>4.</strong></a>
3980 <li>‘<a href="#luminance"><code class=css>luminance</code></a>’, <a
3981 href="#luminance" title="section 6.2."><strong>6.2.</strong></a>
3983 <li>mask, <a href="#MaskProperty"
3984 title="section 6.8."><strong>6.8.</strong></a>, <a href="#mask"
3985 title="section 6.10."><strong>6.10.</strong></a>, <a href="#mask0"
3986 title="section 4."><strong>4.</strong></a>
3988 <li>mask-box-image, <a href="#mask-box-image0"
3989 title="section 7.6."><strong>7.6.</strong></a>
3991 <li>mask box image area, <a href="#mask-box-image-area"
3992 title="section 7.4."><strong>7.4.</strong></a>
3994 <li>mask-box-image-outset, <a href="#mask-box-image-outset"
3995 title="section 7.4."><strong>7.4.</strong></a>
3997 <li>mask-box-image-repeat, <a href="#mask-box-image-repeat"
3998 title="section 7.5."><strong>7.5.</strong></a>
4000 <li>mask-box-image-slice, <a href="#mask-box-image-slice"
4001 title="section 7.2."><strong>7.2.</strong></a>
4003 <li>mask-box-image-source, <a href="#mask-box-image-source"
4004 title="section 7.1."><strong>7.1.</strong></a>
4006 <li>mask-box-image-width, <a href="#mask-box-image-width"
4007 title="section 7.3."><strong>7.3.</strong></a>
4009 <li>mask-clip, <a href="#mask-clip"
4010 title="section 6.5."><strong>6.5.</strong></a>
4012 <li><mask-element>, <a href="#ltmask-elementgt"
4013 title="section 6.1."><strong>6.1.</strong></a>
4015 <li><mask-image>, <a href="#ltmask-imagegt"
4016 title="section 6.1."><strong>6.1.</strong></a>
4018 <li>mask-image, <a href="#mask-image"
4019 title="section 6.1."><strong>6.1.</strong></a>
4021 <li>mask image area, <a href="#mask-image-area" title="section 7.">7.</a>
4023 <li><mask-layer>, <a href="#ltmask-layergt"
4024 title="section 6.8."><strong>6.8.</strong></a>
4026 <li>mask-origin, <a href="#mask-origin"
4027 title="section 6.6."><strong>6.6.</strong></a>
4029 <li>mask painting area, <a href="#mask-painting-area"
4030 title="section 6.5."><strong>6.5.</strong></a>, <a
4031 href="#mask-painting-area0" title="section 6.3.">6.3.</a>, <a
4032 href="#mask-painting-area1" title="section 6.4.">6.4.</a>
4034 <li>mask-position, <a href="#mask-position"
4035 title="section 6.4."><strong>6.4.</strong></a>
4037 <li>mask positioning area, <a href="#mask-positioning-area"
4038 title="section 6.6."><strong>6.6.</strong></a>
4040 <li><mask-reference>, <a href="#ltmask-referencegt"
4041 title="section 6.1."><strong>6.1.</strong></a>
4043 <li>mask-repeat, <a href="#mask-repeat"
4044 title="section 6.3."><strong>6.3.</strong></a>
4046 <li><a href="#ltmask-sizegt"><var><mask-size></var></a>, <a
4047 href="#ltmask-sizegt" title="section 6.7."><strong>6.7.</strong></a>
4049 <li>mask-size, <a href="#mask-size"
4050 title="section 6.7."><strong>6.7.</strong></a>
4052 <li>mask source, <a href="#mask-source"
4053 title="section 4."><strong>4.</strong></a>
4055 <li>mask-source-type, <a href="#mask-source-type"
4056 title="section 6.2."><strong>6.2.</strong></a>
4058 <li>mask-type, <a href="#mask-type"
4059 title="section 6.9."><strong>6.9.</strong></a>
4061 <li>‘<code class=css>no-clip</code>’
4062 <ul>
4063 <li>‘<a href="#mask-clip"><code class=property>mask-clip</code></a>’
4064 value, <a href="#no-clip"
4065 title="section 6.5."><strong>6.5.</strong></a>
4066 </ul>
4068 <li>‘<a href="#none"><code class=css>none</code></a>’, <a href="#none"
4069 title="section 6.1."><strong>6.1.</strong></a>
4071 <li>‘<a href="#nonzero"><code class=css>nonzero</code></a>’, <a
4072 href="#nonzero" title="section 8.2."><strong>8.2.</strong></a>
4074 <li>object bounding box units, <a href="#object-bounding-box-units"
4075 title="section 4."><strong>4.</strong></a>, <a
4076 href="#object-bounding-box-units0" title="section 8.4.">8.4.</a>
4078 <li>‘<code class=css>padding-box</code>’
4079 <ul>
4080 <li>‘<a href="#mask-clip"><code class=property>mask-clip</code></a>’
4081 value, <a href="#padding-box"
4082 title="section 6.5."><strong>6.5.</strong></a>
4084 <li>‘<a href="#mask-origin"><code
4085 class=property>mask-origin</code></a>’ value, <a href="#padding-box0"
4086 title="section 6.6."><strong>6.6.</strong></a>
4087 </ul>
4089 <li><a href="#ltpositiongt"><var><position></var></a>, <a
4090 href="#ltpositiongt" title="section 6.4."><strong>6.4.</strong></a>
4092 <li>renderer, <a href="#renderer"
4093 title="section 11.1."><strong>11.1.</strong></a>
4095 <li><a href="#ltrepeat-stylegt"><var><repeat-style></var></a>, <a
4096 href="#ltrepeat-stylegt" title="section 6.3."><strong>6.3.</strong></a>
4098 <li><right>, <a href="#ltrightgt"
4099 title="section 8.3."><strong>8.3.</strong></a>
4101 <li>‘<a href="#ltshapegt"><code class=css><shape></code></a>’,
4102 <a href="#ltshapegt" title="section 8.1."><strong>8.1.</strong></a>
4104 <li><a href="#ltsource-typegt"><var><source-type></var></a>, <a
4105 href="#ltsource-typegt" title="section 6.2."><strong>6.2.</strong></a>
4107 <li>style sheet
4108 <ul>
4109 <li>as conformance class, <a href="#style-sheet"
4110 title="section 11.1."><strong>11.1.</strong></a>
4111 </ul>
4113 <li><top>, <a href="#lttopgt"
4114 title="section 8.3."><strong>8.3.</strong></a>
4116 <li>‘<a href="#lturlgt"><code class=css><url></code></a>’, <a
4117 href="#lturlgt" title="section 6.1."><strong>6.1.</strong></a>
4119 <li>user coordinate system, <a href="#user-coordinate-system"
4120 title="section 4."><strong>4.</strong></a>
4121 </ul>
4122 <!--end-index-->
4124 <h2 class=no-num id=property-index> Property index</h2>
4125 <!--begin-properties-->
4127 <table class=proptable>
4128 <thead>
4129 <tr>
4130 <th>Property
4132 <th>Values
4134 <th>Initial
4136 <th>Applies to
4138 <th>Inh.
4140 <th>Percentages
4142 <th>Media
4144 <tbody>
4145 <tr>
4146 <th><a class=property href="#ClipProperty">clip</a>
4148 <td><shape> | auto
4150 <td>see individual properties
4152 <td>Absolutely positioned elements. In SVG, it applies to elements which
4153 establish a new viewport, ‘pattern’ elements and ‘marker’
4154 elements.
4156 <td>no
4158 <td>N/A
4160 <td>visual
4162 <tr>
4163 <th><a class=property href="#clippath">clipPath</a>
4165 <td>
4167 <td>
4169 <td>
4171 <td>
4173 <td>
4175 <td>
4177 <tr>
4178 <th><a class=property href="#clip-path">clip-path</a>
4180 <td><shape> | <clip-source> | none
4182 <td>none
4184 <td>All elements. SVG container elements, graphics elements and
4185 ‘clipPath’
4187 <td>no
4189 <td>as specified
4191 <td>visual
4193 <tr>
4194 <th><a class=property href="#clip-rule">clip-rule</a>
4196 <td>nonzero | evenodd
4198 <td>nonzero
4200 <td>graphics elements within a ‘clipPath’ element
4202 <td>yes
4204 <td>N/A
4206 <td>visual
4208 <tr>
4209 <th><a class=property href="#mask">mask</a>
4211 <td>
4213 <td>
4215 <td>
4217 <td>
4219 <td>
4221 <td>
4223 <tr>
4224 <th><a class=property href="#MaskProperty">mask</a>
4226 <td><mask-layer>#
4228 <td>see individual properties
4230 <td>All elements. In SVG, it applies to container elements and graphics
4231 elements
4233 <td>no
4235 <td>see individual properties
4237 <td>visual
4239 <tr>
4240 <th><a class=property href="#mask-box-image0">mask-box-image</a>
4242 <td><‘mask-box-image-source’> ||
4243 <‘mask-box-image-slice’> [ /
4244 <‘mask-box-image-width’> | /
4245 <‘mask-box-image-width’>? /
4246 <‘mask-box-image-outset’> ]? ||
4247 <‘mask-box-image-repeat’>
4249 <td>See individual properties
4251 <td>See individual properties
4253 <td>no
4255 <td>N/A
4257 <td>visual
4259 <tr>
4260 <th><a class=property
4261 href="#mask-box-image-outset">mask-box-image-outset</a>
4263 <td>[ <length> | <number> ]{1,4}
4265 <td>0
4267 <td>All elements. In SVG, it applies to container elements and graphics
4268 elements.
4270 <td>no
4272 <td>N/A
4274 <td>visual
4276 <tr>
4277 <th><a class=property
4278 href="#mask-box-image-repeat">mask-box-image-repeat</a>
4280 <td>[ stretch | repeat | round | space ]{1,2}
4282 <td>stretch
4284 <td>All elements. In SVG, it applies to container elements and graphics
4285 elements.
4287 <td>no
4289 <td>N/A
4291 <td>visual
4293 <tr>
4294 <th><a class=property
4295 href="#mask-box-image-slice">mask-box-image-slice</a>
4297 <td>[<number> | <percentage>]{1,4} && fill?
4299 <td>0 fill
4301 <td>All elements. In SVG, it applies to container elements and graphics
4302 elements.
4304 <td>no
4306 <td>refer to size of the mask image
4308 <td>visual
4310 <tr>
4311 <th><a class=property
4312 href="#mask-box-image-source">mask-box-image-source</a>
4314 <td><mask-image>
4316 <td>none
4318 <td>All elements. In SVG, it applies to container elements and graphics
4319 elements.
4321 <td>no
4323 <td>N/A
4325 <td>visual
4327 <tr>
4328 <th><a class=property
4329 href="#mask-box-image-width">mask-box-image-width</a>
4331 <td>[ <length> | <percentage> | <number> | auto ]{1,4}
4333 <td>auto
4335 <td>All elements. In SVG, it applies to container elements and graphics
4336 elements.
4338 <td>no
4340 <td>relative to width/height of the mask box image area
4342 <td>visual
4344 <tr>
4345 <th><a class=property href="#mask-clip">mask-clip</a>
4347 <td><clip-box>#
4349 <td>border-box
4351 <td>All elements. In SVG, it applies to container elements and graphics
4352 elements
4354 <td>no
4356 <td>N/A
4358 <td>visual
4360 <tr>
4361 <th><a class=property href="#mask-image">mask-image</a>
4363 <td><mask-reference>
4365 <td>none
4367 <td>All elements. In SVG, it applies to container elements and graphics
4368 elements
4370 <td>no
4372 <td>N/A
4374 <td>visual
4376 <tr>
4377 <th><a class=property href="#mask-origin">mask-origin</a>
4379 <td><box>#
4381 <td>padding-box
4383 <td>All elements. In SVG, it applies to container elements and graphics
4384 elements
4386 <td>no
4388 <td>N/A
4390 <td>visual
4392 <tr>
4393 <th><a class=property href="#mask-position">mask-position</a>
4395 <td><position>#
4397 <td>0% 0%
4399 <td>All elements. In SVG, it applies to container elements and graphics
4400 elements
4402 <td>no
4404 <td>refer to size of mask painting area minus size of mask image; see
4405 text
4407 <td>visual
4409 <tr>
4410 <th><a class=property href="#mask-repeat">mask-repeat</a>
4412 <td><repeat-style>#
4414 <td>repeat
4416 <td>All elements. In SVG, it applies to container elements and graphics
4417 elements
4419 <td>no
4421 <td>N/A
4423 <td>visual
4425 <tr>
4426 <th><a class=property href="#mask-size">mask-size</a>
4428 <td><mask-size>#
4430 <td>auto
4432 <td>All elements. In SVG, it applies to container elements and graphics
4433 elements
4435 <td>no
4437 <td>see text
4439 <td>visual
4441 <tr>
4442 <th><a class=property href="#mask-source-type">mask-source-type</a>
4444 <td><source-type>#
4446 <td>auto
4448 <td>All elements. In SVG, it applies to container elements and graphics
4449 elements
4451 <td>no
4453 <td>N/A
4455 <td>visual
4457 <tr>
4458 <th><a class=property href="#mask-type">mask-type</a>
4460 <td>luminance | alpha
4462 <td>luminance
4464 <td>‘mask’ elements
4466 <td>no
4468 <td>N/A
4470 <td>visual
4471 </table>
4472 <!--end-properties-->
4473 </html>
4474 <!-- Keep this comment at the end of the file
4475 Local variables:
4476 mode: sgml
4477 sgml-declaration:"~/SGML/HTML4.decl"
4478 sgml-default-doctype-name:"html"
4479 sgml-minimize-attributes:t
4480 sgml-nofill-elements:("pre" "style" "br")
4481 sgml-live-element-indicator:t
4482 sgml-omittag:nil
4483 sgml-shorttag:nil
4484 sgml-namecase-general:t
4485 sgml-general-insert-case:lower
4486 sgml-always-quote-attributes:t
4487 sgml-indent-step:nil
4488 sgml-indent-data:t
4489 sgml-parent-document:nil
4490 sgml-exposed-tags:nil
4491 sgml-local-catalogs:nil
4492 sgml-local-ecat-files:nil
4493 End:
4494 -->
