masking/index.html

Sun, 10 Mar 2013 19:35:27 -0700

author
Dirk Schulze <dschulze@adobe.com>
date
Sun, 10 Mar 2013 19:35:27 -0700
changeset 734
59236286d848
parent 731
fd09b94a3a4d
child 741
cd0593275768
permissions
-rw-r--r--

Incorporate feedback from Liam R E Quin.

dschulze@344 1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
dschulze@344 2 "http://www.w3.org/TR/html4/strict.dtd">
dschulze@273 3
dschulze@273 4 <html lang=en>
dschulze@427 5 <head profile="http://dublincore.org/documents/2008/08/04/dc-html/ ">
dschulze@427 6 <meta content="text/html; charset=utf-8" http-equiv=Content-Type>
dschulze@273 7 <title>CSS Masking</title>
dschulze@427 8
dschulze@445 9 <link href="http://purl.org/dc/terms/" rel=schema.dcterms>
dschulze@445 10 <link href="http://www.w3.org/Consortium/Legal/ipr-notice#Copyright"
dschulze@445 11 rel=dcterms.rights>
dschulze@445 12 <meta content="CSS Masking" name=dcterms.title>
dschulze@445 13 <meta content=text name=dcterms.type>
dschulze@734 14 <meta content=2013-03-11 name=dcterms.issued>
dschulze@708 15 <meta
dschulze@708 16 content="http://dvcs.w3.org/hg/FXTF/raw-file/default/masking/index.html"
dschulze@445 17 name=dcterms.creator>
dschulze@445 18 <meta content=W3C name=dcterms.publisher>
dschulze@659 19 <meta content="http://dev.w3.org/csswg/css-masking/"
dschulze@445 20 name=dcterms.identifier>
dschulze@273 21 <link href="#contents" rel=contents>
dschulze@273 22 <link href="#index" rel=index>
dschulze@273 23 <link href=default.css rel=stylesheet type="text/css">
dschulze@273 24 <link href="http://www.w3.org/StyleSheets/TR/W3C-ED.css" rel=stylesheet
dschulze@427 25 type="text/css">
dschulze@696 26 <script defer=defer
dschulze@696 27 src="http://test.csswg.org/harness/annotate.js#CSS-MASKING_DEV"
dschulze@696 28 type="text/javascript"></script>
dschulze@273 29
dschulze@273 30 <body>
dschulze@273 31 <div class=head> <!--begin-logo-->
dschulze@273 32 <p><a href="http://www.w3.org/"><img alt=W3C height=48
dschulze@273 33 src="http://www.w3.org/Icons/w3c_home" width=72></a> <!--end-logo-->
dschulze@273 34
dschulze@273 35 <h1>CSS Masking</h1>
dschulze@273 36
dschulze@734 37 <h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 11 March 2013</h2>
dschulze@273 38
dschulze@273 39 <dl>
dschulze@273 40 <dt>This version:
dschulze@273 41
dschulze@273 42 <dd><a
dschulze@708 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>
dschulze@734 44 <!--http://www.w3.org/TR/2013/WD-css-masking-20130311/-->
dschulze@273 45
dschulze@273 46 <dt>Latest version:
dschulze@273 47
dschulze@273 48 <dd><a
dschulze@273 49 href="http://www.w3.org/TR/css-masking/">http://www.w3.org/TR/css-masking/</a>
dschulze@273 50
dschulze@273 51 <dt>Editor's draft:
dschulze@273 52
dschulze@273 53 <dd><a
dschulze@708 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>
dschulze@273 55
dschulze@273 56 <dt>Editors:
dschulze@273 57
dschulze@427 58 <dd class=vcard> <span class=fn>Dirk Schulze</span>, <span
dschulze@427 59 class=org>Adobe Systems</span>, <span
dschulze@427 60 class=email>dschulze@adobe.com</span>
dschulze@427 61
dschulze@441 62 <dd class=vcard> <span class=fn>Brian Birtles</span>, <span
dschulze@441 63 class=org>Mozilla Japan</span>, <span
dschulze@441 64 class=email>bbirtles@mozilla.com</span>
dschulze@441 65
dschulze@427 66 <dd class=vcard> <span class=fn><a
dschulze@427 67 href="http://www.xanthir.com/contact/">Tab Atkins Jr.</a></span>, <span
dschulze@427 68 class=org>Google, Inc.</span>
dschulze@273 69 </dl>
dschulze@273 70 <!--begin-copyright-->
dschulze@273 71 <p class=copyright><a
dschulze@273 72 href="http://www.w3.org/Consortium/Legal/ipr-notice#Copyright"
dschulze@607 73 rel=license>Copyright</a> © 2013 <a href="http://www.w3.org/"><abbr
dschulze@273 74 title="World Wide Web Consortium">W3C</abbr></a><sup>®</sup> (<a
dschulze@273 75 href="http://www.csail.mit.edu/"><abbr
dschulze@273 76 title="Massachusetts Institute of Technology">MIT</abbr></a>, <a
dschulze@273 77 href="http://www.ercim.eu/"><abbr
dschulze@273 78 title="European Research Consortium for Informatics and Mathematics">ERCIM</abbr></a>,
dschulze@659 79 <a href="http://www.keio.ac.jp/">Keio</a>, <a
dschulze@659 80 href="http://ev.buaa.edu.cn/">Beihang</a>), All Rights Reserved. W3C <a
dschulze@273 81 href="http://www.w3.org/Consortium/Legal/ipr-notice#Legal_Disclaimer">liability</a>,
dschulze@273 82 <a
dschulze@273 83 href="http://www.w3.org/Consortium/Legal/ipr-notice#W3C_Trademarks">trademark</a>
dschulze@273 84 and <a
dschulze@273 85 href="http://www.w3.org/Consortium/Legal/copyright-documents">document
dschulze@273 86 use</a> rules apply.</p>
dschulze@273 87 <!--end-copyright-->
dschulze@273 88 <hr title="Separator for header">
dschulze@273 89 </div>
dschulze@273 90
dschulze@273 91 <h2 class="no-num no-toc" id=abstract>Abstract</h2>
dschulze@273 92
birtles@466 93 <p> CSS Masking provides two means for partially or fully hiding portions
birtles@466 94 of visual elements: masking and clipping.
dschulze@454 95
dschulze@454 96 <p> Masking describes how to use another graphical element or image as a
birtles@466 97 luminance or alpha mask. Typically, rendering an element via CSS or SVG
dschulze@279 98 can conceptually described as if the element, including its children, are
birtles@466 99 drawn into a buffer and then that buffer is composited into the element's
birtles@466 100 parent. Luminance and alpha masks influence the transparency of this
birtles@466 101 buffer before the compositing stage.
birtles@466 102
birtles@466 103 <p> Clipping describes the visible region of visual elements. The region
birtles@466 104 can be described by using certain SVG graphics elements or basic shapes.
birtles@466 105 Anything outside of this region is not rendered.
dschulze@454 106
dschulze@273 107 <h2 class="no-num no-toc" id=status>Status of this document</h2>
dschulze@273 108 <!--begin-status-->
dschulze@273 109
dschulze@273 110 <p>This is a public copy of the editors' draft. It is provided for
dschulze@273 111 discussion only and may change at any moment. Its publication here does
dschulze@273 112 not imply endorsement of its contents by W3C. Don't cite this document
dschulze@273 113 other than as work in progress.
dschulze@273 114
dschulze@273 115 <p>The (<a
dschulze@273 116 href="http://lists.w3.org/Archives/Public/public-fx/">archived</a>) public
dschulze@273 117 mailing list <a href="mailto:public-fx@w3.org">public-fx@w3.org</a> (see
dschulze@273 118 <a href="http://www.w3.org/Mail/Request">instructions</a>) is preferred
dschulze@273 119 for discussion of this specification. When sending e-mail, please put the
dschulze@273 120 text “css-masking” in the subject, preferably like this:
dschulze@273 121 “[<!---->css-masking<!---->] <em>…summary of comment…</em>”
dschulze@273 122
dschulze@273 123 <p>This document was produced by the <a
dschulze@273 124 href="http://www.w3.org/Style/CSS/members">CSS Working Group</a> (part of
dschulze@273 125 the <a href="http://www.w3.org/Style/">Style Activity</a>) and the <a
dschulze@273 126 href="http://www.w3.org/Graphics/SVG/">SVG Working Group</a> (part of the
dschulze@273 127 <a href="http://www.w3.org/Graphics/">Graphics Activity</a>).
dschulze@273 128
dschulze@273 129 <p>This document was produced by groups operating under the <a
dschulze@273 130 href="http://www.w3.org/Consortium/Patent-Policy-20040205/">5 February
dschulze@273 131 2004 W3C Patent Policy</a>. W3C maintains a <a
dschulze@273 132 href="http://www.w3.org/2004/01/pp-impl/32061/status"
dschulze@273 133 rel=disclosure>public list of any patent disclosures (CSS)</a> and a <a
dschulze@273 134 href="http://www.w3.org/2004/01/pp-impl/19480/status"
dschulze@273 135 rel=disclosure>public list of any patent disclosures (SVG)</a> made in
dschulze@273 136 connection with the deliverables of each group; these pages also include
dschulze@273 137 instructions for disclosing a patent. An individual who has actual
dschulze@273 138 knowledge of a patent which the individual believes contains <a
dschulze@273 139 href="http://www.w3.org/Consortium/Patent-Policy-20040205/#def-essential">Essential
dschulze@273 140 Claim(s)</a> must disclose the information in accordance with <a
dschulze@273 141 href="http://www.w3.org/Consortium/Patent-Policy-20040205/#sec-Disclosure">section
dschulze@273 142 6 of the W3C Patent Policy</a>.</p>
dschulze@273 143 <!--end-status-->
dschulze@273 144
dschulze@273 145 <h2 class="no-num no-toc" id=contents> Table of contents</h2>
dschulze@273 146 <!--begin-toc-->
dschulze@273 147
dschulze@273 148 <ul class=toc>
dschulze@273 149 <li><a href="#intro"><span class=secno>1. </span> Introduction </a>
dschulze@273 150
dschulze@279 151 <li><a href="#placement"><span class=secno>2. </span>Module
dschulze@279 152 interactions</a>
dschulze@279 153
dschulze@279 154 <li><a href="#values"><span class=secno>3. </span>Values</a>
dschulze@273 155
dschulze@273 156 <li><a href="#definitions"><span class=secno>4. </span>Definitions</a>
dschulze@273 157
dschulze@281 158 <li><a href="#the-mask-rendering-model"><span class=secno>5. </span>The
dschulze@281 159 Mask Rendering Model</a>
dschulze@279 160 <ul class=toc>
dschulze@279 161 <li><a href="#layering"><span class=secno>5.1. </span>Layering Multiple
dschulze@279 162 Mask Images</a>
dschulze@279 163
dschulze@279 164 <li><a href="#MaskValues"><span class=secno>5.2. </span>Calculating mask
dschulze@279 165 values</a>
dschulze@279 166 </ul>
dschulze@278 167
dschulze@292 168 <li><a href="#masking"><span class=secno>6. </span>Mask</a>
dschulze@292 169 <ul class=toc>
dschulze@292 170 <li><a href="#the-mask-image"><span class=secno>6.1. </span>The ‘<code
dschulze@292 171 class=property>mask-image</code>’ property</a>
dschulze@292 172
dschulze@551 173 <li><a href="#the-mask-source-type"><span class=secno>6.2. </span>The
dschulze@551 174 ‘<code class=property>mask-source-type</code>’ property</a>
dschulze@551 175
dschulze@551 176 <li><a href="#the-mask-repeat"><span class=secno>6.3. </span>The
dschulze@292 177 ‘<code class=property>mask-repeat</code>’ property</a>
dschulze@292 178
dschulze@551 179 <li><a href="#the-mask-position"><span class=secno>6.4. </span>The
dschulze@292 180 ‘<code class=property>mask-position</code>’ property</a>
dschulze@292 181
dschulze@551 182 <li><a href="#the-mask-clip"><span class=secno>6.5. </span>The ‘<code
dschulze@292 183 class=property>mask-clip</code>’ property</a>
dschulze@292 184
dschulze@551 185 <li><a href="#the-mask-origin"><span class=secno>6.6. </span>The
dschulze@292 186 ‘<code class=property>mask-origin</code>’ property</a>
dschulze@292 187
dschulze@551 188 <li><a href="#the-mask-size"><span class=secno>6.7. </span>The ‘<code
dschulze@292 189 class=property>mask-size</code>’ property</a>
dschulze@292 190
dschulze@551 191 <li><a href="#mask-property"><span class=secno>6.8. </span>The ‘<code
dschulze@432 192 class=property>mask</code>’ property</a>
dschulze@432 193
dschulze@551 194 <li><a href="#the-mask-type"><span class=secno>6.9. </span>The ‘<code
dschulze@292 195 class=property>mask-type</code>’ property</a>
dschulze@292 196
dschulze@551 197 <li><a href="#MaskElement"><span class=secno>6.10. </span>The <span
dschulze@292 198 class=element-name>‘<code class=property>mask</code>’</span>
dschulze@292 199 element</a>
dschulze@292 200 </ul>
dschulze@292 201
dschulze@292 202 <li><a href="#mask-box-image"><span class=secno>7. </span>Mask Box
dschulze@292 203 Image</a>
dschulze@299 204 <ul class=toc>
dschulze@299 205 <li><a href="#the-mask-box-image-source"><span class=secno>7.1.
dschulze@299 206 </span>The ‘<code class=property>mask-box-image-source</code>’
dschulze@299 207 property</a>
dschulze@299 208
dschulze@299 209 <li><a href="#the-mask-box-image-slice"><span class=secno>7.2.
dschulze@299 210 </span>The ‘<code class=property>mask-box-image-slice</code>’
dschulze@299 211 property</a>
dschulze@299 212
dschulze@299 213 <li><a href="#the-mask-box-image-width"><span class=secno>7.3.
dschulze@299 214 </span>The ‘<code class=property>mask-box-image-width</code>’
dschulze@299 215 property</a>
dschulze@299 216
dschulze@299 217 <li><a href="#the-mask-box-image-outset"><span class=secno>7.4.
dschulze@299 218 </span>The ‘<code class=property>mask-box-image-outset</code>’
dschulze@299 219 property</a>
dschulze@299 220
dschulze@299 221 <li><a href="#the-mask-box-image-repeat"><span class=secno>7.5.
dschulze@299 222 </span>The ‘<code class=property>mask-box-image-repeat</code>’
dschulze@299 223 property</a>
dschulze@299 224
dschulze@299 225 <li><a href="#the-mask-box-image"><span class=secno>7.6. </span>The
dschulze@299 226 ‘<code class=property>mask-box-image</code>’ property</a>
dschulze@453 227
dschulze@453 228 <li><a href="#masking-with-the-mask-box-image"><span class=secno>7.7.
dschulze@453 229 </span>Masking with the mask-box-image</a>
dschulze@299 230 </ul>
dschulze@292 231
dschulze@298 232 <li><a href="#clipping-paths"><span class=secno>8. </span>Clipping
dschulze@298 233 paths</a>
dschulze@298 234 <ul class=toc>
dschulze@298 235 <li><a href="#the-clip-path"><span class=secno>8.1. </span>The ‘<code
dschulze@298 236 class=property>clip-path</code>’ property</a>
dschulze@298 237
dschulze@298 238 <li><a href="#the-clip-rule"><span class=secno>8.2. </span>The ‘<code
dschulze@298 239 class=property>clip-rule</code>’ property</a>
dschulze@298 240
dschulze@451 241 <li><a href="#clip-property"><span class=secno>8.3. </span>The ‘<code
dschulze@451 242 class=property>clip</code>’ property</a>
dschulze@451 243
dschulze@451 244 <li><a href="#ClipPathElement"><span class=secno>8.4. </span>The
dschulze@551 245 ‘<code class=property>clipPath</code>’ element</a>
dschulze@298 246
dschulze@451 247 <li><a href="#clipPath-geometry"><span class=secno>8.5. </span>Clipping
dschulze@298 248 paths, geometry, and pointer events</a>
dschulze@298 249 </ul>
dschulze@273 250
dschulze@473 251 <li><a href="#security"><span class=secno>9. </span>Security</a>
dschulze@473 252 <ul class=toc>
dschulze@473 253 <li><a href="#origin-restrictions"><span class=secno>9.1. </span>Origin
dschulze@473 254 Restrictions</a>
dschulze@473 255 </ul>
dschulze@473 256
dschulze@473 257 <li><a href="#DOMInterfaces"><span class=secno>10. </span>DOM
dschulze@462 258 interfaces</a>
dschulze@462 259 <ul class=toc>
dschulze@473 260 <li><a href="#InterfaceSVGClipPathElement"><span class=secno>10.1.
dschulze@462 261 </span>Interface SVGClipPathElement</a>
dschulze@462 262
dschulze@473 263 <li><a href="#InterfaceSVGMaskElement"><span class=secno>10.2.
dschulze@462 264 </span>Interface SVGMaskElement</a>
dschulze@462 265 </ul>
dschulze@462 266
dschulze@734 267 <li><a href="#conformance"><span class=secno>11. </span> Conformance</a>
dschulze@734 268 <ul class=toc>
dschulze@734 269 <li><a href="#conventions"><span class=secno>11.1. </span> Document
dschulze@734 270 conventions</a>
dschulze@734 271
dschulze@734 272 <li><a href="#conformance-classes"><span class=secno>11.2. </span>
dschulze@734 273 Conformance classes</a>
dschulze@734 274
dschulze@734 275 <li><a href="#partial"><span class=secno>11.3. </span> Partial
dschulze@734 276 implementations</a>
dschulze@734 277
dschulze@734 278 <li><a href="#experimental"><span class=secno>11.4. </span> Experimental
dschulze@734 279 implementations</a>
dschulze@734 280
dschulze@734 281 <li><a href="#testing"><span class=secno>11.5. </span> Non-experimental
dschulze@734 282 implementations</a>
dschulze@734 283 </ul>
dschulze@734 284
dschulze@273 285 <li class=no-num><a href="#references"> References</a>
dschulze@273 286 <ul class=toc>
dschulze@273 287 <li class=no-num><a href="#normative-references"> Normative
dschulze@273 288 references</a>
dschulze@273 289
dschulze@273 290 <li class=no-num><a href="#other-references"> Other references</a>
dschulze@273 291 </ul>
dschulze@273 292
dschulze@273 293 <li class=no-num><a href="#index"> Index</a>
dschulze@273 294
dschulze@273 295 <li class=no-num><a href="#property-index"> Property index</a>
dschulze@273 296 </ul>
dschulze@273 297 <!--end-toc-->
dschulze@273 298
dschulze@273 299 <h2 id=intro><span class=secno>1. </span> Introduction</h2>
dschulze@273 300
dschulze@454 301 <p> With CSS Masking it is possible to specify another graphics element,
dschulze@454 302 shape or file to be used as clipping region or an luminance or alpha mask
dschulze@454 303 for compositing the current object into the background.
dschulze@273 304
dschulze@551 305 <p> A mask is applied using the ‘<a href="#mask"><code
dschulze@454 306 class=property>mask</code></a>’, ‘<a href="#mask-image"><code
dschulze@454 307 class=property>mask-image</code></a>’ or ‘<a
dschulze@454 308 href="#mask-box-image0"><code class=property>mask-box-image</code></a>’
dschulze@551 309 properties. The mask source may be defined using a <a class=element-name
dschulze@551 310 href="#MaskElement">‘<code class=property>mask</code>’</a> element
dschulze@551 311 referenced by the ‘<a href="#mask"><code
dschulze@551 312 class=property>mask</code></a>’ property. Alternatively, for many simple
dschulze@551 313 uses, the ‘<a href="#mask-image"><code
dschulze@281 314 class=property>mask-image</code></a>’ property may refer directly to
dschulze@281 315 graphical elements or images to be used as mask forgoing the need for an
dschulze@551 316 explicit <a class=element-name href="#MaskElement">‘<code
dschulze@551 317 class=property>mask</code>’</a> element. The ‘<a href="#mask"><code
dschulze@551 318 class=property>mask</code></a>’ property is also a shorthand for other
dschulze@551 319 masking properties. ‘<a href="#mask-box-image0"><code
dschulze@551 320 class=property>mask-box-image</code></a>’ splits a mask image into 9
dschulze@551 321 pieces. The pieces may be sliced, scaled and stretched in various ways to
dschulze@551 322 fit the size of the mask image area.
dschulze@281 323
dschulze@281 324 <p> The effect of applying a mask is as if the mask images or mask source
dschulze@486 325 elements are rendered into an off-screen image which has been initialized
dschulze@281 326 to transparent black. The graphical object to which the mask is applied
dschulze@281 327 will be painted onto the background through the mask, thus completely or
dschulze@281 328 partially masking out parts of the graphical object.
dschulze@273 329
dschulze@454 330 <p> Clipping defines a visible region of a visual element. The region can
dschulze@551 331 be specified with SVG <a
dschulze@551 332 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/intro.html#TermGraphicsElement">graphics
dschulze@551 333 element</a> or basic shapes. Everything outside of a region does not get
dschulze@551 334 rendered.
dschulze@454 335
dschulze@273 336 <div class=example>
dschulze@311 337 <div class=figure> <img alt="Example Mask" height=260px
dschulze@311 338 src="images/luminance-mask.svg" width=655px>
dschulze@453 339 <p class=caption> A luminance mask (middle) is applied on a shape filled
dschulze@311 340 with a gradient (left). This results in a masked shape (right).
dschulze@311 341 </div>
dschulze@273 342 </div>
dschulze@273 343
dschulze@279 344 <h2 id=placement><span class=secno>2. </span>Module interactions</h2>
dschulze@279 345
dschulze@279 346 <p>This specification defines a set of CSS properties that affect the
dschulze@279 347 visual rendering of elements to which those properties are applied; these
dschulze@279 348 effects are applied after elements have been sized and positioned
dschulze@279 349 according to the <a href="http://www.w3.org/TR/CSS2/visuren.html"
dschulze@273 350 title="Visual formatting model">Visual formatting model</a> from <a
dschulze@273 351 href="#CSS21" rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>. Some values of
dschulze@273 352 these properties result in the creation of a <a
dschulze@273 353 href="http://www.w3.org/TR/CSS2/visuren.html#containing-block"
dschulze@273 354 title="Visual formatting model">containing block</a>, and/or the creation
dschulze@273 355 of a <a href="http://www.w3.org/TR/CSS2/visuren.html#z-index"
dschulze@273 356 title="Visual formatting model">stacking context</a>.
dschulze@273 357
dschulze@659 358 <p> Definitions of CSS properties and values in this specification comply
dschulze@698 359 with defintions in CSS Backgrounds and Borders <a href="#CSS3BG"
dschulze@659 360 rel=biblioentry>[CSS3BG]<!--{{!CSS3BG}}--></a>. To avoid redundancy, this
dschulze@659 361 specification relies on descriptions and definitions of CSS Backgrounds
dschulze@659 362 and Borders. Every reference will be marked clearly. The following terms
dschulze@659 363 in CSS Backgrounds and Borders have the following meaning in this
dschulze@659 364 specification:
dschulze@659 365
dschulze@659 366 <table class=data id=term-matching>
dschulze@659 367 <thead>
dschulze@659 368 <tr>
dschulze@659 369 <th>Term in <a href="#CSS3BG"
dschulze@659 370 rel=biblioentry>[CSS3BG]<!--{{!CSS3BG}}--></a>
dschulze@659 371
dschulze@659 372 <th>Term in CSS Masking
dschulze@659 373
dschulze@659 374 <tbody>
dschulze@659 375 <tr>
dschulze@659 376 <th>background images
dschulze@659 377
dschulze@659 378 <td>mask images
dschulze@659 379
dschulze@659 380 <tr>
dschulze@659 381 <th>background painting area
dschulze@659 382
dschulze@659 383 <td>mask painting area
dschulze@659 384
dschulze@659 385 <tr>
dschulze@659 386 <th>background-size
dschulze@659 387
dschulze@659 388 <td>mask-size
dschulze@659 389
dschulze@659 390 <tr>
dschulze@659 391 <th>background-position
dschulze@659 392
dschulze@659 393 <td>mask-position
dschulze@659 394
dschulze@659 395 <tr>
dschulze@659 396 <th>background positioning area
dschulze@659 397
dschulze@659 398 <td>mask positioning area
dschulze@659 399
dschulze@659 400 <tr>
dschulze@659 401 <th>border image area
dschulze@659 402
dschulze@659 403 <td>mask box image area
dschulze@659 404 </table>
dschulze@279 405
dschulze@473 406 <p> Some property and element definitions in this specification require an
dschulze@473 407 SVG 1.1 implementation <a href="#SVG11"
dschulze@473 408 rel=biblioentry>[SVG11]<!--{{!SVG11}}--></a>. UAs without support for SVG
dschulze@734 409 must not implement any of the following properties and elements: ‘<a
dschulze@734 410 href="#mask-type"><code class=property>mask-type</code></a>’, ‘<a
dschulze@734 411 href="#clip-rule"><code class=property>clip-rule</code></a>’, <a
dschulze@734 412 class=element-name href="#ClipPathElement">‘<code
dschulze@734 413 class=property>clipPath</code>’</a> element, <a class=element-name
dschulze@734 414 href="#MaskElement">‘<code class=property>mask</code>’</a> element.
dschulze@734 415 For UAs without support for SVG, the ‘<a href="#mask"><code
dschulze@551 416 class=property>mask</code></a>’ and ‘<a href="#clip-path"><code
dschulze@734 417 class=property>clip-path</code></a>’ properties must neither support
dschulze@551 418 references to <a class=element-name href="#MaskElement">‘<code
dschulze@734 419 class=property>mask</code>’</a> elements nor to <a class=element-name
dschulze@551 420 href="#ClipPathElement">‘<code class=property>clipPath</code>’</a>
dschulze@551 421 elements.
dschulze@473 422
dschulze@279 423 <h2 id=values><span class=secno>3. </span>Values</h2>
dschulze@279 424
dschulze@453 425 <p> This specification follows the <a
dschulze@279 426 href="http://www.w3.org/TR/CSS21/about.html#property-defs">CSS property
dschulze@279 427 definition conventions</a> from <a href="#CSS21"
dschulze@279 428 rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>. Value types not defined in
dschulze@731 429 this specification are defined in CSS Values and Units Module Level 3 <a
dschulze@731 430 href="#CSS3VAL" rel=biblioentry>[CSS3VAL]<!--{{!CSS3VAL}}--></a>.
dschulze@279 431
dschulze@453 432 <p> In addition to the property-specific values listed in their
dschulze@453 433 definitions, all properties defined in this specification also accept the
dschulze@453 434 <a
dschulze@279 435 href="http://www.w3.org/TR/CSS21/cascade.html#value-def-inherit">inherit</a>
dschulze@279 436 keyword as their property value. For readability it has not been repeated
dschulze@279 437 explicitly.
dschulze@279 438
dschulze@273 439 <h2 id=definitions><span class=secno>4. </span>Definitions</h2>
dschulze@273 440
dschulze@273 441 <p> When used in this specification, terms have the meanings assigned in
dschulze@273 442 this section.
dschulze@273 443
dschulze@273 444 <dl>
dschulze@273 445 <dt id=TermClientBoundingRect><dfn id=bounding-client-rect>bounding client
dschulze@273 446 rect</dfn>
dschulze@273 447
dschulze@273 448 <dd>
dschulze@273 449 <p> The union of all border boxes for the element that has an associated
dschulze@273 450 CSS layout box and is not in the <code>http://www.w3.org/2000/svg</code>
dschulze@734 451 namespace and its descendant elements. Or the object bounding box <a
dschulze@273 452 href="#SVG11" rel=biblioentry>[SVG11]<!--{{!SVG11}}--></a>, if the
dschulze@273 453 element does not have an associated CSS layout box and is in the
dschulze@273 454 <code>http://www.w3.org/2000/svg</code> namespace (See <a
dschulze@273 455 href="http://www.w3.org/TR/cssom-view/#dom-element-getboundingclientrect">getBoundingClientRect</a>
dschulze@463 456 <a href="#CSSOM-VIEW"
dschulze@463 457 rel=biblioentry>[CSSOM-VIEW]<!--{{CSSOM-VIEW}}--></a>).
dschulze@273 458
dschulze@273 459 <dt id=TermLocalCoordinateSystem><dfn id=local-coordinate-system>local
dschulze@273 460 coordinate system</dfn>
dschulze@273 461
dschulze@273 462 <dd>
dschulze@273 463 <p> In general, a coordinate system defines locations and distances on
dschulze@273 464 the current canvas. The current local coordinate system (also user
dschulze@273 465 coordinate system) is the coordinate system that is currently active and
dschulze@273 466 which is used to define how coordinates and lengths are located and
dschulze@273 467 computed, respectively, on the current canvas <a href="#CSS3-TRANSFORMS"
dschulze@427 468 rel=biblioentry>[CSS3-TRANSFORMS]<!--{{CSS3-TRANSFORMS}}--></a>.
dschulze@273 469
dschulze@273 470 <p> For elements that have an associated CSS layout box, the current user
dschulze@273 471 coordinate system has its origin at the top-left corner of the <a
dschulze@273 472 class=term href="#bounding-client-rect">bounding client rect</a> and one
dschulze@273 473 unit equals one CSS pixel. The viewport for resolving percentage values
dschulze@273 474 is defined by the width and height of the <a class=term
dschulze@427 475 href="#bounding-client-rect">bounding client rect</a>.
dschulze@273 476
dschulze@273 477 <p> If the element does not have an associated CSS layout box and is in
dschulze@273 478 the <code>http://www.w3.org/2000/svg</code> namespace, the current local
dschulze@273 479 coordinate system has its origin at the top-left corner of the element's
dschulze@427 480 nearest viewport.
dschulze@273 481
dschulze@273 482 <dt id=TermUserCoordinateSystem><dfn id=user-coordinate-system>user
dschulze@273 483 coordinate system</dfn>
dschulze@273 484
dschulze@734 485 <dd> The term <a href="#user-coordinate-system"><var>user coordinate
dschulze@734 486 system</var></a> is equivalent to the term <a
dschulze@734 487 href="#local-coordinate-system"><var>local coordinate system</var></a>.
dschulze@273 488
dschulze@273 489 <dt id=TermObjectBoundingBoxUnits><dfn id=object-bounding-box-units>object
dschulze@273 490 bounding box units</dfn>
dschulze@273 491
dschulze@273 492 <dd> The <a class=term href="#bounding-client-rect">bounding client
dschulze@273 493 rect</a> defines the coordinate system in which to resolve values, as
dschulze@551 494 defined in <a
dschulze@551 495 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/coords.html#ObjectBoundingBoxUnits">object
dschulze@551 496 bounding box units</a> <a href="#SVG11"
dschulze@273 497 rel=biblioentry>[SVG11]<!--{{!SVG11}}--></a>.
dschulze@281 498
dschulze@551 499 <dt id=TermMask><dfn id=mask0>mask</dfn>
dschulze@281 500
dschulze@486 501 <dd> An off-screen image which has been initialized to transparent black.
dschulze@281 502 The graphical object to which the mask is applied will be painted onto
dschulze@281 503 the background through the mask, thus completely or partially masking out
dschulze@281 504 parts of the graphical object.
dschulze@281 505
dschulze@343 506 <dt id=TermMaskSource><dfn id=mask-source>mask source</dfn>
dschulze@281 507
dschulze@551 508 <dd> A mask defined by a <a class=element-name
dschulze@551 509 href="#MaskElement">‘<code class=property>mask</code>’</a> element.
dschulze@298 510
dschulze@298 511 <dt id=TermClippingPath>clipping path
dschulze@298 512
dschulze@551 513 <dd> A combination of the SVG elements <a class=element-name
dschulze@551 514 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/paths.html#PathElement">‘<code
dschulze@551 515 class=property>path</code>’</a>, <a class=element-name
dschulze@551 516 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/text.html#TextElement">‘<code
dschulze@551 517 class=property>text</code>’</a> and <a
dschulze@551 518 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/intro.html#TermBasicShapeElement">basic
dschulze@551 519 shapes</a> which serve as the outline of a (in the absence of
dschulze@551 520 anti-aliasing) 1-bit <a href="#TermMask">mask</a>, where everything on
dschulze@551 521 the "inside" of the outline is allowed to show through but everything on
dschulze@551 522 the outside is masked out. See ‘<a href="#clip-path"><code
dschulze@298 523 class=property>clip-path</code></a>’.
dschulze@273 524 </dl>
dschulze@273 525
dschulze@281 526 <h2 id=the-mask-rendering-model><span class=secno>5. </span>The Mask
dschulze@279 527 Rendering Model</h2>
dschulze@279 528
dschulze@453 529 <p> The application of the ‘<a href="#clip-path"><code
dschulze@551 530 class=property>clip-path</code></a>’, ‘<a href="#mask"><code
dschulze@453 531 class=property>mask</code></a>’ or ‘<a href="#mask-image"><code
dschulze@279 532 class=property>mask-image</code></a>’ properties to an element formatted
dschulze@734 533 with the CSS box model establishes a stacking context in the same way that
dschulze@299 534 CSS ‘<code class=property>opacity</code>’ does, and all the element's
dschulze@299 535 descendants are rendered together as a group with the masking applied to
dschulze@299 536 the group as a whole.
dschulze@279 537
dschulze@551 538 <p> The ‘<a href="#mask"><code class=property>mask</code></a>’ and
dschulze@551 539 ‘<a href="#mask-image"><code class=property>mask-image</code></a>’
dschulze@734 540 properties have no effect on the geometry of any element's CSS boxes.
dschulze@279 541
dschulze@453 542 <p> The compositing model follows the SVG compositing model <a
dschulze@453 543 href="#SVG11" rel=biblioentry>[SVG11]<!--{{!SVG11}}--></a>: first any
dschulze@453 544 filter effect is applied, then any clipping, masking and opacity. These
dschulze@453 545 effects all apply after any other CSS effects such as ‘<code
dschulze@279 546 class=property>border</code>’. As per SVG, the application of ‘<a
dschulze@551 547 href="#mask"><code class=property>mask</code></a>’ or ‘<a
dschulze@279 548 href="#mask-image"><code class=property>mask-image</code></a>’ has no
dschulze@279 549 effect on hit-testing.
dschulze@279 550
dschulze@279 551 <h3 id=layering><span class=secno>5.1. </span>Layering Multiple Mask Images</h3>
dschulze@279 552
dschulze@279 553 <p>The mask of a box can have multiple <span class=index
dschulze@279 554 id=layers>layers</span>. The number of layers is determined by the number
dschulze@279 555 of comma-separated values in the ‘<a href="#mask-image"><code
dschulze@279 556 class=property>mask-image</code></a>’ property. Note that a value of
dschulze@279 557 ‘<a href="#none"><code class=property>none</code></a>’ still creates a
dschulze@698 558 layer. See <a
dschulze@698 559 href="http://www.w3.org/TR/css3-background/#layering">Layering Multiple
dschulze@698 560 Background Images</a> <a href="#CSS3BG"
dschulze@698 561 rel=biblioentry>[CSS3BG]<!--{{!CSS3BG}}--></a>.
dschulze@698 562
dschulze@698 563 <p>The first layer is the layer closest to the user, the next one is
dschulze@698 564 painted behind the first, and so on. All mask images are transformed to
dschulze@698 565 alpha masks (if necessary) and combined by compositing on the <a
dschulze@698 566 href="#TermMask">mask</a>.
dschulze@279 567
dschulze@279 568 <h3 id=MaskValues><span class=secno>5.2. </span>Calculating mask values</h3>
dschulze@279 569
dschulze@281 570 <p> A mask may be interpreted using one of two different methods with
dschulze@281 571 regards to calculating the mask values that will be multiplied with the
dschulze@281 572 target alpha values.
dschulze@279 573
dschulze@279 574 <p> The first and simplest method of calculating the mask values is to use
dschulze@279 575 the alpha channel of the mask source. In this case the mask value at a
dschulze@279 576 given point is simply the value of the alpha channel at that point. The
dschulze@279 577 color channels do not contribute to the mask value.
dschulze@279 578
dschulze@279 579 <p> The second method of calculating the mask values is to use the
dschulze@279 580 luminance of the mask source. In this case the mask value at a given point
dschulze@279 581 is computed from the color channel values and alpha channel value using
dschulze@279 582 the following procedure.
dschulze@279 583
dschulze@279 584 <ol>
dschulze@279 585 <li>Compute a luminance value from the color channel values.
dschulze@279 586 <ul>
dschulze@279 587 <li> If the computed value of ‘<code
dschulze@551 588 class=property>color-interpolation</code>’ on the <a
dschulze@551 589 class=element-name href="#MaskElement">‘<code
dschulze@551 590 class=property>mask</code>’</a> element is ‘<code
dschulze@279 591 class=property>linearRGB</code>’, convert the original image color
dschulze@279 592 values (potentially in the sRGB color space) to the linear RGB color
dschulze@343 593 space.
dschulze@279 594
dschulze@279 595 <li>Then, using non-premultiplied RGB color values, apply the
dschulze@551 596 luminance-to-alpha coefficients (as defined in the <a
dschulze@551 597 class=element-name
dschulze@551 598 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/filters.html#feColorMatrixElement">‘<code
dschulze@299 599 class=property>feColorMatrix</code>’</a> filter primitive <a
dschulze@452 600 href="#SVG11" rel=biblioentry>[SVG11]<!--{{!SVG11}}--></a>) to convert
dschulze@452 601 the RGB color values to luminance values.
dschulze@279 602 </ul>
dschulze@279 603
dschulze@279 604 <li>Multiply the computed luminance value by the corresponding alpha value
dschulze@279 605 to produce the mask value.
dschulze@279 606 </ol>
dschulze@279 607
dschulze@279 608 <p>Regardless of the method used, the procedure for calculating mask values
dschulze@279 609 assumes the content of the mask is a four-channel RGBA graphics object.
dschulze@279 610 For other types of graphics objects, special handling is required as
dschulze@279 611 follows.
dschulze@279 612
dschulze@279 613 <p>For a three-channel RGB graphics object that is used in a mask (e.g.,
dschulze@279 614 when referencing a three-channel image file), the effect is as if the
dschulze@279 615 object were converted into a four-channel RGBA image with the alpha
dschulze@279 616 channel uniformly set to 1.
dschulze@279 617
dschulze@279 618 <p>For a single-channel image that is used in a mask (e.g., when
dschulze@279 619 referencing a single-channel grayscale image file), the effect is as if
dschulze@279 620 the object were converted into a four-channel RGBA image, where the single
dschulze@279 621 channel from the referenced object is used to compute the three color
dschulze@724 622 channels and the alpha channel is uniformly set to 1.
dschulze@724 623
dschulze@724 624 <p class=note>Note that when referencing a grayscale image file, the
dschulze@724 625 transfer curve relating the encoded grayscale values to linear light
dschulze@724 626 values must be taken into account when computing the color channels.
dschulze@279 627
dschulze@551 628 <p class=note>Note that SVG <a
dschulze@551 629 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/intro.html#TermGraphicsElement">graphics
dschulze@551 630 elements</a> (e.g., <a class=element-name
dschulze@551 631 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/shapes.html#CircleElement">‘<code
dschulze@551 632 class=property>circle</code>’</a> or <a class=element-name
dschulze@551 633 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/text.html#TextElement">‘<code
dschulze@281 634 class=property>text</code>’</a>) are all treated as four-channel RGBA
dschulze@279 635 images for the purposes of masking operations.
dschulze@279 636
dschulze@279 637 <p>The effect of a mask is identical to what would have happened if there
dschulze@279 638 were no mask but instead the alpha channel of the given object were
dschulze@279 639 multiplied with the mask's resulting mask values.
dschulze@278 640
dschulze@292 641 <h2 id=masking><span class=secno>6. </span>Mask</h2>
dschulze@292 642
dschulze@292 643 <h3 id=the-mask-image><span class=secno>6.1. </span>The ‘<a
dschulze@292 644 href="#mask-image"><code class=property>mask-image</code></a>’ property</h3>
dschulze@274 645
dschulze@274 646 <table class=propdef>
dschulze@274 647 <tbody>
dschulze@274 648 <tr>
dschulze@274 649 <th>Name:
dschulze@274 650
dschulze@274 651 <td><dfn id=mask-image>mask-image</dfn>
dschulze@274 652
dschulze@274 653 <tr>
dschulze@274 654 <th><a href="#values">Value</a>:
dschulze@274 655
dschulze@607 656 <td><a href="#ltmask-referencegt"><var>&lt;mask-reference&gt;</var></a>
dschulze@274 657
dschulze@274 658 <tr>
dschulze@274 659 <th>Initial:
dschulze@274 660
dschulze@274 661 <td>none
dschulze@274 662
dschulze@274 663 <tr>
dschulze@274 664 <th>Applies to:
dschulze@274 665
dschulze@551 666 <td>All elements. In SVG, it applies to <a
dschulze@551 667 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/intro.html#TermContainerElement">container
dschulze@551 668 elements</a> and <a
dschulze@551 669 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/intro.html#TermGraphicsElement">graphics
dschulze@551 670 elements</a>
dschulze@274 671
dschulze@274 672 <tr>
dschulze@274 673 <th>Inherited:
dschulze@274 674
dschulze@274 675 <td>no
dschulze@274 676
dschulze@274 677 <tr>
dschulze@274 678 <th>Percentages:
dschulze@274 679
dschulze@274 680 <td>N/A
dschulze@274 681
dschulze@274 682 <tr>
dschulze@274 683 <th>Media:
dschulze@274 684
dschulze@274 685 <td>visual
dschulze@274 686
dschulze@274 687 <tr>
dschulze@274 688 <th>Computed value:
dschulze@274 689
dschulze@274 690 <td>as specified, but with URIs made absolute
dschulze@274 691
dschulze@274 692 <tr>
dschulze@274 693 <th>Animatable:
dschulze@274 694
dschulze@274 695 <td>no
dschulze@274 696 </table>
dschulze@274 697
dschulze@536 698 <p>This property sets the mask image(s) or the mask source of an element.
dschulze@536 699 Images are drawn with the first specified one on top (closest to the user)
dschulze@536 700 and each subsequent image behind the previous one. Where:
dschulze@274 701
birtles@287 702 <pre class=prod><var><dfn
dschulze@551 703 id=ltmask-referencegt>&lt;mask-reference&gt;</dfn></var> = <a
dschulze@607 704 href="#ltmask-imagegt"><var>&lt;mask-image&gt;</var></a># | <a
dschulze@607 705 href="#ltmask-elementgt"><var>&lt;mask-element&gt;</var></a></pre>
dschulze@536 706
dschulze@536 707 <pre class=prod><var><dfn
dschulze@536 708 id=ltmask-imagegt>&lt;mask-image&gt;</dfn></var> = <a
dschulze@536 709 href="#ltimagegt"><var>&lt;image&gt;</var></a> | none </pre>
dschulze@536 710
dschulze@536 711 <pre class=prod><var><dfn
dschulze@607 712 id=ltmask-elementgt>&lt;mask-element&gt;</dfn></var> = <a
birtles@697 713 href="#lturlgt"><var>&lt;url&gt;</var></a> | <var>child</var> | <a
birtles@697 714 href="#ltchild-selectorgt"><var>&lt;child-selector&gt;</var></a></pre>
dschulze@536 715
dschulze@536 716 <pre class=prod><dfn
dschulze@536 717 id=ltchild-selectorgt>&lt;child-selector&gt;</dfn> = select(<a
dschulze@536 718 href="#ltcompound-selectorgt"><var>&lt;compound-selector&gt;</var></a>#)</pre>
dschulze@536 719
dschulze@536 720 <p class=note>A <a
dschulze@607 721 href="#ltmask-elementgt"><var>&lt;mask-element&gt;</var></a> can just be
dschulze@536 722 specified as a single value and can not contibute to a list of <a
dschulze@536 723 href="#ltmask-referencegt"><var>&lt;mask-reference&gt;</var></a> values.
dschulze@536 724 Otherwise the specified value of the property is invalid. (See examples
dschulze@536 725 below.)
dschulze@277 726
dschulze@277 727 <dl>
dschulze@536 728 <dt> <dfn id=lturlgt>‘<code class=css>&lt;url&gt;</code>’</dfn>
dschulze@536 729
dschulze@551 730 <dd> A URL reference to a <a class=element-name
dschulze@551 731 href="#MaskElement">‘<code class=property>mask</code>’</a> element
dschulze@731 732 (for example ‘<code class=css>url(commonmasks.svg#mask)</code>’) or
dschulze@551 733 an <a href="#ltimagegt"><var>&lt;image&gt;</var></a>.
dschulze@536 734
birtles@697 735 <dt>‘<code class=css>child</code>’
dschulze@536 736
dschulze@698 737 <dd> A keyword to indicate that the last direct sibling <a
dschulze@698 738 class=element-name href="#MaskElement">‘<code
dschulze@698 739 class=property>mask</code>’</a> element of the element the ‘<a
dschulze@698 740 href="#mask-image"><code class=property>mask-image</code></a>’ property
dschulze@698 741 is applied should be used as the mask source. It is equivalent to
dschulze@698 742 ‘<code class=css>select(mask:last-of-type)</code>’.
dschulze@536 743
birtles@697 744 <dt>‘<a href="#ltchild-selectorgt"><code
birtles@697 745 class=css>&lt;child-selector&gt;</code></a>’
dschulze@536 746
dschulze@551 747 <dd> A comma-separated list of <a
dschulze@551 748 href="http://dev.w3.org/csswg/selectors4/#compound">compound
dschulze@698 749 selector</a>s scoped at the element to which the ‘<a
dschulze@698 750 href="#mask-image"><code class=property>mask-image</code></a>’ property
dschulze@698 751 is applied. The first matching element in <a
dschulze@551 752 href="http://www.w3.org/TR/2012/WD-dom-20120405/#concept-tree-order">tree
dschulze@551 753 order</a> (as defined in <a href="#DOM"
dschulze@536 754 rel=biblioentry>[DOM]<!--{{!DOM}}--></a>) as a result of evaluating the
dschulze@536 755 list of selectors is taken as the mask source. If there are no matching
dschulze@536 756 elements the mask source is invalid.
dschulze@536 757
dschulze@536 758 <dt><dfn id=ltcompound-selectorgt>‘<code
dschulze@536 759 class=css>&lt;compound-selector&gt;</code>’</dfn>
dschulze@536 760
dschulze@551 761 <dd> A <a href="http://dev.w3.org/csswg/selectors4/#compound">compound
dschulze@551 762 selector</a> as defined in <a href="#SELECTORS4"
dschulze@536 763 rel=biblioentry>[SELECTORS4]<!--{{!SELECTORS4}}--></a>.
dschulze@536 764
dschulze@536 765 <dd>
dschulze@536 766
birtles@287 767 <dt><dfn id=ltimagegt>&lt;image&gt;</dfn>
dschulze@277 768
dschulze@277 769 <dd> A 2D image. (See <a href="#CSS3-IMAGES"
dschulze@277 770 rel=biblioentry>[CSS3-IMAGES]<!--{{!CSS3-IMAGES}}--></a>.)
dschulze@277 771
birtles@439 772 <dt><dfn id=none>‘<code class=css>none</code>’</dfn>
birtles@439 773
birtles@439 774 <dd> A value of ‘<a href="#none"><code class=css>none</code></a>’
birtles@439 775 counts as an image layer but does not mask the element.
dschulze@277 776 </dl>
dschulze@277 777
dschulze@536 778 <p class=note>If the URI in the ‘<code class=css>url()</code>’ function
dschulze@536 779 has a fragment identifier, the <a
dschulze@536 780 href="#ltmask-referencegt"><var>&lt;mask-reference&gt;</var></a> is
dschulze@615 781 treated as <a
dschulze@615 782 href="#ltmask-elementgt"><var>&lt;mask-element&gt;</var></a>, otherwise as
dschulze@615 783 <a href="#ltmask-imagegt"><var>&lt;mask-image&gt;</var></a>.
dschulze@536 784
dschulze@552 785 <p>An invalid or non-existent mask source is ignored and no masking is
dschulze@552 786 applied.
dschulze@552 787
dschulze@552 788 <p>A mask image that is empty (zero width or zero height), that fails to
dschulze@552 789 download, is non-existent, or that cannot be displayed (e.g. because it is
dschulze@552 790 not in a supported image format) is ignored. No masking is applied.
dschulze@552 791
dschulze@552 792 <p>See the section <a href="#layering">“Layering multiple mask
dschulze@552 793 images”</a> for how ‘<a href="#mask-image"><code
dschulze@552 794 class=property>mask-image</code></a>’ interacts with other
dschulze@552 795 comma-separated mask properties to form each mask image layer.
dschulze@552 796
dschulze@552 797 <div class=example>
dschulze@552 798 <p>Some examples specifying mask images:
dschulze@552 799
dschulze@552 800 <pre>
dschulze@552 801 body { mask-image: linear-gradient(black 0%, transparent 100%) }
dschulze@552 802 p { mask-image: none }
dschulze@552 803 div { mask-image: url(tl.png), url(tr.png) }
dschulze@552 804 </pre>
dschulze@552 805
dschulze@552 806 <p>Some examples of a specified mask source:
dschulze@552 807
dschulze@552 808 <pre>
dschulze@552 809 img { mask-image: url(#mask) }
dschulze@552 810 span { mask-image: url(resources.svg#mask2) }
dschulze@552 811 </pre>
dschulze@552 812
dschulze@552 813 <p>Examples of <i>invalid</i> mask source usages:
dschulze@552 814
dschulze@552 815 <pre>
dschulze@552 816 p { mask-image: url(#mask), url(tl.png) }
dschulze@552 817 img { mask-image: url(#mask), url(resources.svg#mask2) }
dschulze@552 818 </pre>
dschulze@552 819
dschulze@615 820 <p>A <a href="#ltmask-elementgt"><var>&lt;mask-element&gt;</var></a> value
dschulze@615 821 that is either used together with another <a
dschulze@615 822 href="#ltmask-elementgt"><var>&lt;mask-element&gt;</var></a> value or an
dschulze@615 823 <a href="#ltmask-imagegt"><var>&lt;mask-image&gt;</var></a> value makes
dschulze@615 824 the whole specified ‘<a href="#mask-image"><code
dschulze@552 825 class=property>mask-image</code></a>’ value list invalid.
dschulze@552 826 </div>
dschulze@552 827
dschulze@552 828 <h3 id=the-mask-source-type><span class=secno>6.2. </span>The ‘<a
dschulze@552 829 href="#mask-source-type"><code
dschulze@552 830 class=property>mask-source-type</code></a>’ property</h3>
dschulze@552 831
dschulze@552 832 <table class=propdef>
dschulze@552 833 <tbody>
dschulze@552 834 <tr>
dschulze@552 835 <th>Name:
dschulze@552 836
dschulze@552 837 <td><dfn id=mask-source-type>mask-source-type</dfn>
dschulze@552 838
dschulze@552 839 <tr>
dschulze@552 840 <th><a href="#values">Value</a>:
dschulze@552 841
dschulze@552 842 <td><a href="#ltsource-typegt"><var>&lt;source-type&gt;</var></a>#
dschulze@552 843
dschulze@552 844 <tr>
dschulze@552 845 <th>Initial:
dschulze@552 846
dschulze@552 847 <td>auto
dschulze@552 848
dschulze@552 849 <tr>
dschulze@552 850 <th>Applies to:
dschulze@552 851
dschulze@552 852 <td>All elements. In SVG, it applies to <a
dschulze@552 853 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/intro.html#TermContainerElement">container
dschulze@552 854 elements</a> and <a
dschulze@552 855 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/intro.html#TermGraphicsElement">graphics
dschulze@552 856 elements</a>
dschulze@552 857
dschulze@552 858 <tr>
dschulze@552 859 <th>Inherited:
dschulze@552 860
dschulze@552 861 <td>no
dschulze@552 862
dschulze@552 863 <tr>
dschulze@552 864 <th>Percentages:
dschulze@552 865
dschulze@552 866 <td>N/A
dschulze@552 867
dschulze@552 868 <tr>
dschulze@552 869 <th>Media:
dschulze@552 870
dschulze@552 871 <td>visual
dschulze@552 872
dschulze@552 873 <tr>
dschulze@552 874 <th>Computed value:
dschulze@552 875
dschulze@552 876 <td>as specified
dschulze@552 877
dschulze@552 878 <tr>
dschulze@552 879 <th>Animatable:
dschulze@552 880
dschulze@731 881 <td>no
dschulze@552 882 </table>
dschulze@552 883
dschulze@552 884 <p>The ‘<a href="#mask-source-type"><code
dschulze@552 885 class=property>mask-source-type</code></a>’ property indicates whether
dschulze@552 886 the <a href="#ltmask-referencegt"><var>&lt;mask-reference&gt;</var></a> is
dschulze@552 887 treated as luminance mask or alpha mask. (See <a
dschulze@552 888 href="#MaskValues">Calculating mask values</a>.)
dschulze@552 889
dschulze@552 890 <pre class=prod><dfn
dschulze@552 891 id=ltsource-typegt><var>&lt;source-type&gt;</var></dfn> = alpha | luminance | auto</pre>
dschulze@552 892
dschulze@552 893 <p>Values have the following meanings:
dschulze@552 894
dschulze@552 895 <dl>
dschulze@552 896 <dt><dfn id=alpha>‘<code class=css>alpha</code>’</dfn>
dschulze@552 897
dschulze@552 898 <dd> A value of ‘<a href="#alpha"><code class=css>alpha</code></a>’
dschulze@552 899 indicates that the alpha values of the mask image should be used as the
dschulze@552 900 mask values. See <a href="#MaskValues">Calculating mask values</a>.
dschulze@552 901
dschulze@552 902 <dt><dfn id=luminance>‘<code class=css>luminance</code>’</dfn>
dschulze@552 903
dschulze@552 904 <dd> A value of ‘<a href="#luminance"><code
dschulze@552 905 class=css>luminance</code></a>’ indicates that the luminance values of
dschulze@552 906 the mask image should be used as the mask values. See <a
dschulze@552 907 href="#MaskValues">Calculating mask values</a>.
dschulze@552 908
dschulze@552 909 <dt><dfn id=auto>‘<code class=css>auto</code>’</dfn>
dschulze@552 910
dschulze@552 911 <dd>
dschulze@552 912 <p> If the <a
dschulze@552 913 href="#ltmask-referencegt"><var>&lt;mask-reference&gt;</var></a> of the
dschulze@552 914 ‘<a href="#mask-image"><code class=property>mask-image</code></a>’
dschulze@552 915 property is of type <a
dschulze@552 916 href="#ltmask-imagegt"><var>&lt;mask-image&gt;</var></a> the luminance
dschulze@552 917 values of the mask image should be used as the mask values.
dschulze@552 918
dschulze@552 919 <p> If the <a
dschulze@552 920 href="#ltmask-referencegt"><var>&lt;mask-reference&gt;</var></a> of the
dschulze@552 921 ‘<a href="#mask-image"><code class=property>mask-image</code></a>’
dschulze@615 922 property is of type <a
dschulze@615 923 href="#ltmask-elementgt"><var>&lt;mask-element&gt;</var></a> the alpha
dschulze@615 924 values of the mask image should be used as the mask values.
dschulze@552 925 </dl>
dschulze@536 926
dschulze@536 927 <div class=example>
dschulze@536 928 <p> In the following example, the ‘<a href="#mask-type"><code
dschulze@536 929 class=property>mask-type</code></a>’ property sets the mask type value
dschulze@551 930 for the <a class=element-name href="#MaskElement">‘<code
dschulze@551 931 class=property>mask</code>’</a> element to ‘<a href="#alpha"><code
dschulze@552 932 class=css>alpha</code></a>’. The ‘<a href="#mask-image"><code
dschulze@552 933 class=property>mask-image</code></a>’ property has a reference to this
dschulze@552 934 <a class=element-name href="#MaskElement">‘<code
dschulze@552 935 class=property>mask</code>’</a> element and the ‘<a
dschulze@552 936 href="#mask-source-type"><code
dschulze@552 937 class=property>mask-source-type</code></a>’ property has a value of
dschulze@552 938 ‘<a href="#luminance"><code class=css>luminance</code></a>’. The
dschulze@552 939 ‘<a href="#mask-source-type"><code
dschulze@552 940 class=property>mask-source-type</code></a>’ property will override the
dschulze@552 941 definition of ‘<a href="#mask-type"><code
dschulze@551 942 class=property>mask-type</code></a>’ to ‘<a href="#luminance"><code
dschulze@551 943 class=css>luminance</code></a>’.
dschulze@536 944
dschulze@536 945 <pre>
dschulze@536 946 &lt;mask id="SVGMask" mask-type="alpha" maskContentUnits="objectBoundingBox"&gt;
dschulze@536 947 &lt;radialGradient id="radialFill"&gt;
dschulze@536 948 &lt;stop stop-color="white" offset="0"/&gt;
dschulze@536 949 &lt;stop stop-color="black" offset="1"/&gt;
dschulze@536 950 &lt;/radialGradient&gt;
dschulze@536 951 &lt;circle fill="url(#radialFill)" cx="0.5" cy="0.5" r="0.5"/&gt;
dschulze@536 952 &lt;/mask&gt;
dschulze@536 953
dschulze@552 954 &lt;style&gt;
dschulze@552 955 rect {
dschulze@552 956 mask-image: url(#SVGMask);
dschulze@552 957 mask-source-type: luminance;
dschulze@552 958 }
dschulze@552 959 &lt;/style&gt;
dschulze@552 960
dschulze@552 961 &lt;rect width="200" height="200" fill="green"/&gt;
dschulze@536 962 </pre>
dschulze@536 963 </div>
dschulze@536 964
dschulze@551 965 <h3 id=the-mask-repeat><span class=secno>6.3. </span>The ‘<a
dschulze@551 966 href="#mask-repeat"><code class=property>mask-repeat</code></a>’
dschulze@551 967 property</h3>
dschulze@551 968
dschulze@551 969 <table class=propdef>
dschulze@551 970 <tbody>
dschulze@551 971 <tr>
dschulze@551 972 <th>Name:
dschulze@551 973
dschulze@551 974 <td><dfn id=mask-repeat>mask-repeat</dfn>
dschulze@551 975
dschulze@551 976 <tr>
dschulze@551 977 <th><a href="#values">Value</a>:
dschulze@551 978
dschulze@551 979 <td><a href="#ltrepeat-stylegt"><var>&lt;repeat-style&gt;</var></a>#
dschulze@551 980
dschulze@551 981 <tr>
dschulze@551 982 <th>Initial:
dschulze@551 983
dschulze@551 984 <td>repeat
dschulze@551 985
dschulze@551 986 <tr>
dschulze@551 987 <th>Applies to:
dschulze@551 988
dschulze@551 989 <td>All elements. In SVG, it applies to <a
dschulze@551 990 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/intro.html#TermContainerElement">container
dschulze@551 991 elements</a> and <a
dschulze@551 992 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/intro.html#TermGraphicsElement">graphics
dschulze@551 993 elements</a>
dschulze@274 994
dschulze@274 995 <tr>
dschulze@274 996 <th>Inherited:
dschulze@274 997
dschulze@274 998 <td>no
dschulze@274 999
dschulze@274 1000 <tr>
dschulze@274 1001 <th>Percentages:
dschulze@274 1002
dschulze@274 1003 <td>N/A
dschulze@274 1004
dschulze@274 1005 <tr>
dschulze@274 1006 <th>Media:
dschulze@274 1007
dschulze@274 1008 <td>visual
dschulze@274 1009
dschulze@274 1010 <tr>
dschulze@274 1011 <th>Computed value:
dschulze@274 1012
dschulze@274 1013 <td>A list, each item consisting of: two keywords, one per dimension
dschulze@274 1014
dschulze@274 1015 <tr>
dschulze@274 1016 <th>Animatable:
dschulze@274 1017
dschulze@274 1018 <td>no
dschulze@274 1019 </table>
dschulze@274 1020
dschulze@274 1021 <p>Specifies how mask images are tiled after they have been <a
dschulze@274 1022 href="#the-mask-size">sized</a> and <a
dschulze@274 1023 href="#the-mask-position">positioned</a>. Where
dschulze@274 1024
dschulze@274 1025 <pre class=prod><dfn
dschulze@274 1026 id=ltrepeat-stylegt><var>&lt;repeat-style&gt;</var></dfn> = repeat-x | repeat-y | [repeat | space | round | no-repeat]{1,2}</pre>
dschulze@274 1027
dschulze@659 1028 <p>See <a
dschulze@659 1029 href="http://www.w3.org/TR/css3-background/#the-background-repeat">Tiling
dschulze@659 1030 Images: the ‘<code class=property>background-repeat</code>’
dschulze@659 1031 property</a> <a href="#CSS3BG"
dschulze@659 1032 rel=biblioentry>[CSS3BG]<!--{{!CSS3BG}}--></a> for the defintions of the
dschulze@659 1033 property values.
dschulze@274 1034
dschulze@282 1035 <div class=example>
dschulze@282 1036 <p style="display:none">Example(s):
dschulze@282 1037
dschulze@470 1038 <pre>
dschulze@470 1039 body {
dschulze@470 1040 background-color: blue;
dschulze@470 1041 mask-image: url(dot-mask.png) luminance;
dschulze@470 1042 mask-repeat: space;
dschulze@470 1043 }
dschulze@282 1044 </pre>
dschulze@282 1045
dschulze@282 1046 <div class=figure>
dschulze@282 1047 <p><img alt="Image of an element with a dotted mask."
dschulze@282 1048 src="images/mask-repeat.svg" style="border: solid black 1px;" width=240>
dschulze@282 1049
dschulze@282 1050 <p class=caption>The effect of ‘<code class=property>space</code>’:
dschulze@282 1051 the mask image of a dot is tiled to cover the whole <a class=index
dschulze@659 1052 href="#mask-painting-area" id=mask-painting-area0>mask painting area</a>
dschulze@282 1053 and the mask images are equally spaced.
dschulze@282 1054 </div>
dschulze@282 1055 </div>
dschulze@282 1056
dschulze@274 1057 <p>See the section <a href="#layering">“Layering multiple mask
dschulze@277 1058 images”</a> for how ‘<a href="#mask-repeat"><code
dschulze@277 1059 class=property>mask-repeat</code></a>’ interacts with other
dschulze@274 1060 comma-separated mask properties to form each mask image layer.
dschulze@274 1061
dschulze@551 1062 <h3 id=the-mask-position><span class=secno>6.4. </span>The ‘<a
dschulze@402 1063 href="#mask-position"><code class=property>mask-position</code></a>’
dschulze@292 1064 property</h3>
dschulze@274 1065
dschulze@274 1066 <table class=propdef>
dschulze@274 1067 <tbody>
dschulze@274 1068 <tr>
dschulze@274 1069 <th>Name:
dschulze@274 1070
dschulze@402 1071 <td><dfn id=mask-position>mask-position</dfn>
dschulze@274 1072
dschulze@274 1073 <tr>
dschulze@274 1074 <th><a href="#values">Value</a>:
dschulze@274 1075
dschulze@402 1076 <td><a href="#ltpositiongt"><var>&lt;position&gt;</var></a>#
dschulze@274 1077
dschulze@274 1078 <tr>
dschulze@274 1079 <th>Initial:
dschulze@274 1080
dschulze@402 1081 <td>0% 0%
dschulze@274 1082
dschulze@274 1083 <tr>
dschulze@274 1084 <th>Applies to:
dschulze@274 1085
dschulze@551 1086 <td>All elements. In SVG, it applies to <a
dschulze@551 1087 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/intro.html#TermContainerElement">container
dschulze@551 1088 elements</a> and <a
dschulze@551 1089 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/intro.html#TermGraphicsElement">graphics
dschulze@551 1090 elements</a>
dschulze@274 1091
dschulze@274 1092 <tr>
dschulze@274 1093 <th>Inherited:
dschulze@274 1094
dschulze@274 1095 <td>no
dschulze@274 1096
dschulze@274 1097 <tr>
dschulze@274 1098 <th>Percentages:
dschulze@274 1099
dschulze@274 1100 <td>refer to size of <a class=index href="#mask-painting-area"
dschulze@659 1101 id=mask-painting-area1>mask painting area</a> <em>minus</em> size of
dschulze@274 1102 mask image; see text
dschulze@274 1103
dschulze@274 1104 <tr>
dschulze@274 1105 <th>Media:
dschulze@274 1106
dschulze@274 1107 <td>visual
dschulze@274 1108
dschulze@274 1109 <tr>
dschulze@274 1110 <th>Computed value:
dschulze@274 1111
dschulze@274 1112 <td>A list, each item consisting of: two keywords representing the
dschulze@274 1113 origin and two offsets from that origin, each given as an absolute
dschulze@274 1114 length (if given a &lt;length&gt;), otherwise as a percentage.
dschulze@274 1115
dschulze@274 1116 <tr>
dschulze@274 1117 <th>Animatable:
dschulze@274 1118
dschulze@731 1119 <td>as <a
dschulze@731 1120 href="http://dev.w3.org/csswg/css3-transitions/#animtype-repeatable-list">repeatable
dschulze@731 1121 list</a> of <a
dschulze@731 1122 href="http://dev.w3.org/csswg/css3-transitions/#animtype-simple-list">simple
dschulze@731 1123 list</a> of <a
dschulze@731 1124 href="http://dev.w3.org/csswg/css3-transitions/#animtype-lpcalc">length,
dschulze@731 1125 percentage, or calc</a>
dschulze@274 1126 </table>
dschulze@274 1127
dschulze@274 1128 <p>Where
dschulze@274 1129
dschulze@470 1130 <pre class=prod><dfn id=ltpositiongt><var>&lt;position&gt;</var></dfn> = [
dschulze@470 1131 [ left | center | right | top | bottom | <var>&lt;percentage&gt;</var> | <var>&lt;length&gt;</var> ]
dschulze@470 1132 |
dschulze@470 1133 [ left | center | right | <var>&lt;percentage&gt;</var> | <var>&lt;length&gt;</var> ]
dschulze@470 1134 [ top | center | bottom | <var>&lt;percentage&gt;</var> | <var>&lt;length&gt;</var> ]
dschulze@470 1135 |
dschulze@470 1136 [ center | [ left | right ] [ <var>&lt;percentage&gt;</var> | <var>&lt;length&gt;</var> ]? ] &amp;&amp;
dschulze@470 1137 [ center | [ top | bottom ] [ <var>&lt;percentage&gt;</var> | <var>&lt;length&gt;</var> ]? ]
dschulze@274 1138 ]</pre>
dschulze@274 1139
dschulze@659 1140 <p>See <a
dschulze@659 1141 href="http://www.w3.org/TR/css3-background/#the-background-position">Positioning
dschulze@659 1142 Images: the ‘<code class=property>background-position</code>’
dschulze@659 1143 property</a> <a href="#CSS3BG"
dschulze@659 1144 rel=biblioentry>[CSS3BG]<!--{{!CSS3BG}}--></a> for the defintions of the
dschulze@659 1145 property values.
dschulze@274 1146
dschulze@274 1147 <div class=example>
dschulze@274 1148 <p>In the example below, the (single) image is placed in the lower-right
dschulze@274 1149 corner of the viewport.
dschulze@274 1150
dschulze@470 1151 <pre>
dschulze@470 1152 body {
dschulze@470 1153 mask-image: url("logo.png");
dschulze@470 1154 mask-position: 100% 100%;
dschulze@470 1155 mask-repeat: no-repeat;
dschulze@470 1156 }
dschulze@274 1157 </pre>
dschulze@274 1158 </div>
dschulze@274 1159
dschulze@274 1160 <div class=example>
dschulze@274 1161 <p>Mask positions can also be relative to other corners than the top left.
dschulze@274 1162 E.g., the following puts the background image 10px from the bottom and
dschulze@274 1163 3em from the right:
dschulze@274 1164
dschulze@274 1165 <pre>mask-position: right 3em bottom 10px</pre>
dschulze@274 1166 </div>
dschulze@274 1167
dschulze@274 1168 <p>See the section <a href="#layering">“Layering multiple mask
dschulze@277 1169 images”</a> for how ‘<a href="#mask-position"><code
dschulze@277 1170 class=property>mask-position</code></a>’ interacts with other
dschulze@274 1171 comma-separated mask properties to form each mask image layer.
dschulze@274 1172
dschulze@551 1173 <h3 id=the-mask-clip><span class=secno>6.5. </span>The ‘<a
dschulze@292 1174 href="#mask-clip"><code class=property>mask-clip</code></a>’ property</h3>
dschulze@274 1175
dschulze@274 1176 <table class=propdef>
dschulze@274 1177 <tbody>
dschulze@274 1178 <tr>
dschulze@274 1179 <th>Name:
dschulze@274 1180
dschulze@274 1181 <td><dfn id=mask-clip>mask-clip</dfn>
dschulze@274 1182
dschulze@274 1183 <tr>
dschulze@274 1184 <th><a href="#values">Value</a>:
dschulze@274 1185
dschulze@615 1186 <td><a href="#ltclip-boxgt"><var>&lt;clip-box&gt;</var></a>#
dschulze@274 1187
dschulze@274 1188 <tr>
dschulze@274 1189 <th>Initial:
dschulze@274 1190
dschulze@274 1191 <td>border-box
dschulze@274 1192
dschulze@274 1193 <tr>
dschulze@274 1194 <th>Applies to:
dschulze@274 1195
dschulze@551 1196 <td>All elements. In SVG, it applies to <a
dschulze@551 1197 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/intro.html#TermContainerElement">container
dschulze@551 1198 elements</a> and <a
dschulze@551 1199 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/intro.html#TermGraphicsElement">graphics
dschulze@551 1200 elements</a>
dschulze@274 1201
dschulze@274 1202 <tr>
dschulze@274 1203 <th>Inherited:
dschulze@274 1204
dschulze@274 1205 <td>no
dschulze@274 1206
dschulze@274 1207 <tr>
dschulze@274 1208 <th>Percentages:
dschulze@274 1209
dschulze@274 1210 <td>N/A
dschulze@274 1211
dschulze@274 1212 <tr>
dschulze@274 1213 <th>Media:
dschulze@274 1214
dschulze@274 1215 <td>visual
dschulze@274 1216
dschulze@274 1217 <tr>
dschulze@274 1218 <th>Computed value:
dschulze@274 1219
dschulze@274 1220 <td>as specified
dschulze@274 1221
dschulze@274 1222 <tr>
dschulze@274 1223 <th>Animatable:
dschulze@274 1224
dschulze@274 1225 <td>no
dschulze@274 1226 </table>
dschulze@274 1227
dschulze@274 1228 <p>Determines the <dfn id=mask-painting-area>mask painting area</dfn>,
dschulze@474 1229 which determines the area that is affected by the mask. The painted
dschulze@474 1230 content of an element may be resricted to this area. The syntax of the
dschulze@274 1231 property is given with
dschulze@274 1232
dschulze@615 1233 <pre class=prod><dfn id=ltclip-boxgt><var>&lt;clip-box&gt;</var></dfn> = <a
dschulze@615 1234 href="#ltboxgt"><var>&lt;box&gt;</var></a> | no-clip</pre>
dschulze@615 1235
dschulze@274 1236 <pre class=prod><dfn
dschulze@615 1237 id=ltboxgt><var>&lt;box&gt;</var></dfn> = border-box | padding-box | content-box</pre>
dschulze@274 1238
dschulze@274 1239 <p>Values have the following meanings:
dschulze@274 1240
dschulze@274 1241 <dl>
dschulze@274 1242 <dt><dfn id=border-box title="''border-box''!!'mask-clip' value"> ‘<code
dschulze@274 1243 class=css>border-box</code>’</dfn>
dschulze@274 1244
dschulze@474 1245 <dd>The painted content is rectricted to (clipped to) the <span>border
dschulze@474 1246 box</span> respectively <span>painting box</span> for objects without
dschulze@474 1247 associated layout box.
dschulze@274 1248
dschulze@274 1249 <dt><dfn id=padding-box title="''padding-box''!!'mask-clip' value">
dschulze@274 1250 ‘<code class=css>padding-box</code>’</dfn>
dschulze@274 1251
dschulze@474 1252 <dd>The painted content is rectricted to (clipped to) the <span>padding
dschulze@474 1253 box.</span>
dschulze@274 1254
dschulze@274 1255 <dt><dfn id=content-box title="''content-box''!!'mask-clip' value">
dschulze@274 1256 ‘<code class=css>content-box</code>’</dfn>
dschulze@615 1257
dschulze@474 1258 <dd>The painted content is rectricted to (clipped to) the <span>content
dschulze@615 1259 box</span> respectively <span>object bounding box</span> <a href="#SVG11"
dschulze@615 1260 rel=biblioentry>[SVG11]<!--{{!SVG11}}--></a> for objects without
dschulze@615 1261 associated layout box.
dschulze@474 1262
dschulze@536 1263 <dt><dfn id=no-clip title="''no-clip''!!'mask-clip' value"> ‘<code
dschulze@536 1264 class=css>no-clip</code>’</dfn>
dschulze@474 1265
dschulze@474 1266 <dd>The painted content is not restricted (not clipped). The <a
dschulze@474 1267 href="#mask-painting-area">mask painting area</a> is set to the <a
dschulze@474 1268 href="#bounding-client-rect">bounding client rect</a>.
dschulze@274 1269 </dl>
dschulze@274 1270
dschulze@432 1271 <p class=note>Note that there is no corresponding box for ‘<code
dschulze@432 1272 class=css>padding-box</code>’ on objects without associated layout box
dschulze@432 1273 and ‘<a href="#content-box0"><code class=css>content-box</code></a>’
dschulze@432 1274 is choosen instead.
dschulze@274 1275
dschulze@274 1276 <p>See the section <a href="#layering">“Layering multiple mask
dschulze@277 1277 images”</a> for how ‘<a href="#mask-clip"><code
dschulze@277 1278 class=property>mask-clip</code></a>’ interacts with other
dschulze@274 1279 comma-separated mask properties to form each mask image layer.
dschulze@274 1280
dschulze@551 1281 <h3 id=the-mask-origin><span class=secno>6.6. </span>The ‘<a
dschulze@276 1282 href="#mask-origin"><code class=property>mask-origin</code></a>’
dschulze@292 1283 property</h3>
dschulze@275 1284
dschulze@275 1285 <table class=propdef>
dschulze@275 1286 <tbody>
dschulze@275 1287 <tr>
dschulze@275 1288 <th>Name:
dschulze@275 1289
dschulze@276 1290 <td><dfn id=mask-origin>mask-origin</dfn>
dschulze@275 1291
dschulze@275 1292 <tr>
dschulze@275 1293 <th><a href="#values">Value</a>:
dschulze@275 1294
dschulze@280 1295 <td><a href="#ltboxgt"><var>&lt;box&gt;</var></a>#
dschulze@275 1296
dschulze@275 1297 <tr>
dschulze@275 1298 <th>Initial:
dschulze@275 1299
dschulze@275 1300 <td>padding-box
dschulze@275 1301
dschulze@275 1302 <tr>
dschulze@275 1303 <th>Applies to:
dschulze@275 1304
dschulze@551 1305 <td>All elements. In SVG, it applies to <a
dschulze@551 1306 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/intro.html#TermContainerElement">container
dschulze@551 1307 elements</a> and <a
dschulze@551 1308 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/intro.html#TermGraphicsElement">graphics
dschulze@551 1309 elements</a>
dschulze@275 1310
dschulze@275 1311 <tr>
dschulze@275 1312 <th>Inherited:
dschulze@275 1313
dschulze@275 1314 <td>no
dschulze@275 1315
dschulze@275 1316 <tr>
dschulze@275 1317 <th>Percentages:
dschulze@275 1318
dschulze@275 1319 <td>N/A
dschulze@275 1320
dschulze@275 1321 <tr>
dschulze@275 1322 <th>Media:
dschulze@275 1323
dschulze@275 1324 <td>visual
dschulze@275 1325
dschulze@275 1326 <tr>
dschulze@275 1327 <th>Computed value:
dschulze@275 1328
dschulze@275 1329 <td>as specified
dschulze@275 1330
dschulze@275 1331 <tr>
dschulze@275 1332 <th>Animatable:
dschulze@275 1333
dschulze@275 1334 <td>no
dschulze@275 1335 </table>
dschulze@275 1336
dschulze@275 1337 <p>For elements rendered as a single box, specifies the <dfn
dschulze@275 1338 id=mask-positioning-area>mask positioning area</dfn>. For elements
dschulze@275 1339 rendered as multiple boxes (e.g., inline boxes on several lines, boxes on
dschulze@275 1340 several pages) specifies which boxes ‘<code
dschulze@275 1341 class=property>box-decoration-break</code>’ operates on to determine the
dschulze@275 1342 mask positioning area(s).
dschulze@275 1343
dschulze@275 1344 <dl>
dschulze@275 1345 <dt><dfn id=padding-box0 title="''padding-box''!!'mask-origin' value">
dschulze@275 1346 ‘<code class=css>padding-box</code>’</dfn>
dschulze@275 1347
dschulze@275 1348 <dd>The position is relative to the padding box. (For single boxes
dschulze@275 1349 ‘<code class=css>0 0</code>’ is the upper left corner of the padding
dschulze@275 1350 edge, ‘<code class=css>100% 100%</code>’ is the lower right corner.)
dschulze@275 1351
dschulze@275 1352 <dt><dfn id=border-box0 title="''border-box''!!'mask-origin' value">
dschulze@275 1353 ‘<code class=css>border-box</code>’</dfn>
dschulze@275 1354
dschulze@432 1355 <dd>The position is relative to the border box respectively <span>painting
dschulze@432 1356 box</span> for objects without associated layout box.
dschulze@275 1357
dschulze@275 1358 <dt><dfn id=content-box0>‘<code class=css>content-box</code>’</dfn>
dschulze@275 1359
dschulze@432 1360 <dd>The position is relative to the content box respectively object
dschulze@432 1361 bounding box <a href="#SVG11"
dschulze@432 1362 rel=biblioentry>[SVG11]<!--{{!SVG11}}--></a> for objects without
dschulze@432 1363 associated layout box.
dschulze@275 1364 </dl>
dschulze@275 1365
dschulze@432 1366 <p class=note>Note that there is no corresponding box for ‘<code
dschulze@432 1367 class=css>padding-box</code>’ on objects without associated layout box
dschulze@432 1368 and ‘<a href="#content-box0"><code class=css>content-box</code></a>’
dschulze@432 1369 is choosen instead.
dschulze@432 1370
dschulze@275 1371 <p class=note>Note that if ‘<a href="#mask-clip"><code
dschulze@275 1372 class=property>mask-clip</code></a>’ is ‘<code
dschulze@276 1373 class=css>padding-box</code>’, ‘<a href="#mask-origin"><code
dschulze@276 1374 class=property>mask-origin</code></a>’ is ‘<code
dschulze@275 1375 class=css>border-box</code>’, ‘<a href="#mask-position"><code
dschulze@275 1376 class=property>mask-position</code></a>’ is ‘<code class=css>top
dschulze@275 1377 left</code>’ (the initial value), and the element has a non-zero border,
dschulze@275 1378 then the top and left of the mask image will be clipped.
dschulze@275 1379
dschulze@275 1380 <p>See the section <a href="#layering">“Layering multiple mask
dschulze@277 1381 images”</a> for how ‘<a href="#mask-origin"><code
dschulze@277 1382 class=property>mask-origin</code></a>’ interacts with other
dschulze@275 1383 comma-separated mask properties to form each mask image layer.
dschulze@275 1384
dschulze@551 1385 <h3 id=the-mask-size><span class=secno>6.7. </span>The ‘<a
dschulze@292 1386 href="#mask-size"><code class=property>mask-size</code></a>’ property</h3>
dschulze@273 1387
dschulze@273 1388 <table class=propdef>
dschulze@273 1389 <tbody>
dschulze@273 1390 <tr>
dschulze@273 1391 <th>Name:
dschulze@273 1392
dschulze@277 1393 <td><dfn id=mask-size>mask-size</dfn>
dschulze@273 1394
dschulze@273 1395 <tr>
dschulze@277 1396 <th><a href="#values">Value</a>:
dschulze@277 1397
dschulze@280 1398 <td><a href="#ltmask-sizegt"><var>&lt;mask-size&gt;</var></a>#
dschulze@273 1399
dschulze@273 1400 <tr>
dschulze@273 1401 <th>Initial:
dschulze@273 1402
dschulze@277 1403 <td>auto
dschulze@273 1404
dschulze@273 1405 <tr>
dschulze@273 1406 <th>Applies to:
dschulze@273 1407
dschulze@551 1408 <td>All elements. In SVG, it applies to <a
dschulze@551 1409 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/intro.html#TermContainerElement">container
dschulze@551 1410 elements</a> and <a
dschulze@551 1411 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/intro.html#TermGraphicsElement">graphics
dschulze@551 1412 elements</a>
dschulze@273 1413
dschulze@273 1414 <tr>
dschulze@273 1415 <th>Inherited:
dschulze@273 1416
dschulze@273 1417 <td>no
dschulze@273 1418
dschulze@273 1419 <tr>
dschulze@273 1420 <th>Percentages:
dschulze@273 1421
dschulze@277 1422 <td>see text
dschulze@273 1423
dschulze@273 1424 <tr>
dschulze@273 1425 <th>Media:
dschulze@273 1426
dschulze@273 1427 <td>visual
dschulze@273 1428
dschulze@273 1429 <tr>
dschulze@277 1430 <th>Computed value:
dschulze@277 1431
dschulze@277 1432 <td>as specified, but with lengths made absolute
dschulze@277 1433
dschulze@277 1434 <tr>
dschulze@277 1435 <th>Animatable:
dschulze@277 1436
dschulze@731 1437 <td>as <a
dschulze@731 1438 href="http://dev.w3.org/csswg/css3-transitions/#animtype-repeatable-list">repeatable
dschulze@731 1439 list</a> of <a
dschulze@731 1440 href="http://dev.w3.org/csswg/css3-transitions/#animtype-simple-list">simple
dschulze@731 1441 list</a> of <a
dschulze@731 1442 href="http://dev.w3.org/csswg/css3-transitions/#animtype-lpcalc">length,
dschulze@731 1443 percentage, or calc</a> (<span class=note>This means keyword values are
dschulze@731 1444 not animatable.</span>)
dschulze@277 1445 </table>
dschulze@277 1446
dschulze@277 1447 <p>Specifies the size of the mask images. Where
dschulze@277 1448
dschulze@277 1449 <pre class=prod><dfn
dschulze@277 1450 id=ltmask-sizegt><var>&lt;mask-size&gt;</var></dfn> = [ <var>&lt;length&gt;</var> | <var>&lt;percentage&gt;</var> | auto ]{1,2} | cover | contain</pre>
dschulze@277 1451
dschulze@659 1452 <p>See <a
dschulze@659 1453 href="http://www.w3.org/TR/css3-background/#the-background-size">Sizing
dschulze@659 1454 Images: the ‘background-size’ property</a> <a href="#CSS3BG"
dschulze@659 1455 rel=biblioentry>[CSS3BG]<!--{{!CSS3BG}}--></a> for the defintions of the
dschulze@659 1456 property values.
dschulze@277 1457
dschulze@277 1458 <p>See the section <a href="#layering">“Layering multiple mask
dschulze@277 1459 images”</a> for how ‘<a href="#mask-size"><code
dschulze@277 1460 class=property>mask-size</code></a>’ interacts with other
dschulze@277 1461 comma-separated mask properties to form each mask image layer.
dschulze@277 1462
dschulze@551 1463 <h3 id=mask-property><span class=secno>6.8. </span>The ‘<a
dschulze@551 1464 href="#mask"><code class=property>mask</code></a>’ property</h3>
dschulze@277 1465
dschulze@277 1466 <table class=propdef>
dschulze@277 1467 <tbody>
dschulze@277 1468 <tr>
dschulze@277 1469 <th>Name:
dschulze@277 1470
dschulze@277 1471 <td><dfn id=MaskProperty>mask</dfn>
dschulze@277 1472
dschulze@277 1473 <tr>
dschulze@277 1474 <th>Value:
dschulze@277 1475
dschulze@536 1476 <td><a href="#ltmask-layergt"><var>&lt;mask-layer&gt;</var></a>#
dschulze@277 1477
dschulze@277 1478 <tr>
dschulze@277 1479 <th>Initial:
dschulze@277 1480
dschulze@277 1481 <td>see individual properties
dschulze@277 1482
dschulze@277 1483 <tr>
dschulze@277 1484 <th>Applies to:
dschulze@277 1485
dschulze@551 1486 <td>All elements. In SVG, it applies to <a
dschulze@551 1487 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/intro.html#TermContainerElement">container
dschulze@551 1488 elements</a> and <a
dschulze@551 1489 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/intro.html#TermGraphicsElement">graphics
dschulze@551 1490 elements</a>
dschulze@277 1491
dschulze@277 1492 <tr>
dschulze@277 1493 <th>Inherited:
dschulze@277 1494
dschulze@277 1495 <td>no
dschulze@277 1496
dschulze@277 1497 <tr>
dschulze@277 1498 <th>Percentages:
dschulze@277 1499
dschulze@277 1500 <td>see individual properties
dschulze@277 1501
dschulze@277 1502 <tr>
dschulze@277 1503 <th>Media:
dschulze@277 1504
dschulze@277 1505 <td>visual
dschulze@277 1506
dschulze@277 1507 <tr>
dschulze@551 1508 <th>Computed value:
dschulze@273 1509
dschulze@277 1510 <td>see individual properties
dschulze@273 1511
dschulze@273 1512 <tr>
birtles@440 1513 <th>Animatable:
dschulze@273 1514
dschulze@277 1515 <td>see individual properties
dschulze@273 1516 </table>
dschulze@273 1517
dschulze@277 1518 <p>Where
dschulze@277 1519
birtles@288 1520 <pre class=prod><dfn id=ltmask-layergt>&lt;mask-layer&gt;</dfn> = <a
dschulze@551 1521 href="#ltmask-referencegt"><var>&lt;mask-reference&gt;</var></a> <a
dschulze@551 1522 href="#ltsource-typegt"><var>&lt;source-type&gt;</var></a>? || <a
dschulze@536 1523 href="#ltpositiongt"><var>&lt;position&gt;</var></a> [ / <a
dschulze@536 1524 href="#ltmask-sizegt"><var>&lt;mask-size&gt;</var></a> ]? || <a
dschulze@536 1525 href="#ltrepeat-stylegt"><var>&lt;repeat-style&gt;</var></a> || <a
dschulze@615 1526 href="#ltboxgt"><var>&lt;box&gt;</var></a> || <a
dschulze@615 1527 href="#ltclip-boxgt"><var>&lt;clip-box&gt;</var></a></pre>
dschulze@615 1528
dschulze@615 1529 <p> If one <a href="#ltboxgt"><var>&lt;box&gt;</var></a> value is present
dschulze@615 1530 then it sets both ‘<a href="#mask-origin"><code
dschulze@615 1531 class=property>mask-origin</code></a>’ and ‘<a href="#mask-clip"><code
dschulze@615 1532 class=property>mask-clip</code></a>’ to that value. If two <a
dschulze@615 1533 href="#ltboxgt"><var>&lt;box&gt;</var></a> values are present, then the
dschulze@615 1534 first sets ‘<a href="#mask-origin"><code
dschulze@615 1535 class=property>mask-origin</code></a>’ and the second ‘<a
dschulze@615 1536 href="#mask-clip"><code class=property>mask-clip</code></a>’.
dschulze@278 1537
dschulze@445 1538 <p class=note> Note that the properties ‘<a href="#mask-image"><code
dschulze@445 1539 class=property>mask-image</code></a>’, ‘<a href="#mask-repeat"><code
dschulze@445 1540 class=property>mask-repeat</code></a>’, ‘<a
dschulze@445 1541 href="#mask-position"><code class=property>mask-position</code></a>’,
dschulze@445 1542 ‘<a href="#mask-clip"><code class=property>mask-clip</code></a>’,
dschulze@445 1543 ‘<a href="#mask-origin"><code class=property>mask-origin</code></a>’
dschulze@445 1544 and ‘<a href="#mask-size"><code class=property>mask-size</code></a>’
dschulze@551 1545 have no affect on <a class=element-name href="#MaskElement">‘<code
dschulze@551 1546 class=property>mask</code>’</a> elements.
dschulze@551 1547
dschulze@551 1548 <h3 id=the-mask-type><span class=secno>6.9. </span>The ‘<a
dschulze@432 1549 href="#mask-type"><code class=property>mask-type</code></a>’ property</h3>
dschulze@432 1550
dschulze@432 1551 <table class=propdef>
dschulze@432 1552 <tbody>
dschulze@432 1553 <tr>
dschulze@432 1554 <th>Name:
dschulze@432 1555
dschulze@432 1556 <td><dfn id=mask-type>mask-type</dfn>
dschulze@432 1557
dschulze@432 1558 <tr>
dschulze@432 1559 <th><a href="#values">Value</a>:
dschulze@432 1560
dschulze@552 1561 <td>luminance | alpha
dschulze@432 1562
dschulze@432 1563 <tr>
dschulze@432 1564 <th>Initial:
dschulze@432 1565
dschulze@432 1566 <td>luminance
dschulze@432 1567
dschulze@432 1568 <tr>
dschulze@432 1569 <th>Applies to:
dschulze@432 1570
dschulze@551 1571 <td><a class=element-name href="#MaskElement">‘<code
dschulze@551 1572 class=property>mask</code>’</a> elements
dschulze@432 1573
dschulze@432 1574 <tr>
dschulze@432 1575 <th>Inherited:
dschulze@432 1576
dschulze@432 1577 <td>no
dschulze@432 1578
dschulze@432 1579 <tr>
dschulze@432 1580 <th>Percentages:
dschulze@432 1581
dschulze@432 1582 <td>N/A
dschulze@432 1583
dschulze@432 1584 <tr>
dschulze@432 1585 <th>Media:
dschulze@432 1586
dschulze@432 1587 <td>visual
dschulze@432 1588
dschulze@432 1589 <tr>
dschulze@432 1590 <th>Computed value:
dschulze@432 1591
dschulze@432 1592 <td>as specified
dschulze@432 1593
dschulze@432 1594 <tr>
dschulze@432 1595 <th>Animatable:
dschulze@432 1596
dschulze@731 1597 <td>no
dschulze@432 1598 </table>
dschulze@432 1599
birtles@435 1600 <p>The ‘<a href="#mask-type"><code class=property>mask-type</code></a>’
dschulze@551 1601 property defines whether the content of the <a class=element-name
dschulze@551 1602 href="#MaskElement">‘<code class=property>mask</code>’</a> is treated
dschulze@551 1603 as as luminance mask or alpha mask, as described in <a
dschulze@551 1604 href="#MaskValues">Calculating mask values</a>.
dschulze@432 1605
dschulze@432 1606 <p>Values have the following meanings:
dschulze@432 1607
dschulze@432 1608 <dl>
birtles@447 1609 <dt>‘<a href="#luminance"><code class=css>luminance</code></a>’
dschulze@432 1610
dschulze@432 1611 <dd>Indicates that the luminance values of the mask should be used.
dschulze@432 1612
birtles@447 1613 <dt>‘<a href="#alpha"><code class=css>alpha</code></a>’
dschulze@432 1614
dschulze@432 1615 <dd>Indicates that the alpha values of the mask should be used.
dschulze@432 1616 </dl>
dschulze@432 1617
dschulze@445 1618 <p>The ‘<a href="#mask-type"><code class=property>mask-type</code></a>’
dschulze@445 1619 property is a presentation attribute for SVG elements.
dschulze@445 1620
dschulze@551 1621 <h3 id=MaskElement><span class=secno>6.10. </span>The <a class=element-name
dschulze@551 1622 href="#mask">‘<code class=property>mask</code>’</a> element</h3>
dschulze@551 1623
dschulze@551 1624 <table class=propdef summary="mask element">
dschulze@551 1625 <tbody>
dschulze@551 1626 <tr>
dschulze@551 1627 <th>Name:
dschulze@551 1628
dschulze@551 1629 <td><dfn id=mask>mask</dfn>
dschulze@551 1630
dschulze@551 1631 <tr>
dschulze@551 1632 <th>Categories:
dschulze@551 1633
dschulze@551 1634 <td><a
dschulze@551 1635 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/intro.html#TermContainerElement">Container
dschulze@551 1636 element</a>
dschulze@551 1637
dschulze@551 1638 <tr>
dschulze@551 1639 <th>Content model:
dschulze@551 1640
dschulze@551 1641 <td>Any number of the following elements, in any order:
dschulze@551 1642 <ul class=no-bullets>
dschulze@551 1643 <li><a
dschulze@551 1644 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/intro.html#TermAnimationElement">animation</a>
dschulze@551 1645 <span class=expanding> — <a
dschulze@551 1646 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/animate.html#AnimateElement"><span
dschulze@551 1647 class=element-name>‘animate’</span></a>, <a
dschulze@551 1648 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/animate.html#AnimateColorElement"><span
dschulze@551 1649 class=element-name>‘animateColor’</span></a>, <a
dschulze@551 1650 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/animate.html#AnimateMotionElement"><span
dschulze@551 1651 class=element-name>‘animateMotion’</span></a>, <a
dschulze@551 1652 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/animate.html#AnimateTransformElement"><span
dschulze@551 1653 class=element-name>‘animateTransform’</span></a>, <a
dschulze@551 1654 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/animate.html#SetElement"><span
dschulze@551 1655 class=element-name>‘set’</span></a></span>
dschulze@551 1656
dschulze@551 1657 <li><a
dschulze@551 1658 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/intro.html#TermDescriptiveElement">descriptive</a>
dschulze@551 1659 <span class=expanding> — <a
dschulze@551 1660 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/struct.html#DescElement"><span
dschulze@551 1661 class=element-name>‘desc’</span></a>, <a
dschulze@551 1662 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/struct.html#TitleElement"><span
dschulze@551 1663 class=element-name>‘title’</span></a>, <a
dschulze@551 1664 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/metadata.html#MetadataElement"><span
dschulze@551 1665 class=element-name>‘metadata’</span></a></span>
dschulze@551 1666
dschulze@551 1667 <li><a
dschulze@551 1668 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/intro.html#TermShapeElement">shape</a>
dschulze@551 1669 <span class=expanding> — <a
dschulze@551 1670 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/shapes.html#CircleElement"><span
dschulze@551 1671 class=element-name>‘circle’</span></a>, <a
dschulze@551 1672 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/shapes.html#EllipseElement"><span
dschulze@551 1673 class=element-name>‘ellipse’</span></a>, <a
dschulze@551 1674 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/shapes.html#LineElement"><span
dschulze@551 1675 class=element-name>‘line’</span></a>, <a
dschulze@551 1676 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/paths.html#PathElement"><span
dschulze@551 1677 class=element-name>‘path’</span></a>, <a
dschulze@551 1678 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/shapes.html#PolygonElement"><span
dschulze@551 1679 class=element-name>‘polygon’</span></a>, <a
dschulze@551 1680 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/shapes.html#PolylineElement"><span
dschulze@551 1681 class=element-name>‘polyline’</span></a>, <a
dschulze@551 1682 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/shapes.html#RectElement"><span
dschulze@551 1683 class=element-name>‘rect’</span></a></span>
dschulze@551 1684
dschulze@551 1685 <li><a
dschulze@551 1686 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/intro.html#TermStructuralElement">structural</a>
dschulze@551 1687 <span class=expanding> — <a
dschulze@551 1688 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/struct.html#DefsElement"><span
dschulze@551 1689 class=element-name>‘defs’</span></a>, <a
dschulze@551 1690 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/struct.html#GElement"><span
dschulze@551 1691 class=element-name>‘g’</span></a>, <a
dschulze@551 1692 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/struct.html#SVGElement"><span
dschulze@551 1693 class=element-name>‘svg’</span></a>, <a
dschulze@551 1694 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/struct.html#SymbolElement"><span
dschulze@551 1695 class=element-name>‘symbol’</span></a>, <a
dschulze@551 1696 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/struct.html#UseElement"><span
dschulze@551 1697 class=element-name>‘use’</span></a></span>
dschulze@551 1698
dschulze@551 1699 <li><a
dschulze@551 1700 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/intro.html#TermGradientElement">gradient</a>
dschulze@551 1701 <span class=expanding> — <a
dschulze@551 1702 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/pservers.html#LinearGradientElement"><span
dschulze@551 1703 class=element-name>‘linearGradient’</span></a>, <a
dschulze@551 1704 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/pservers.html#RadialGradientElement"><span
dschulze@551 1705 class=element-name>‘radialGradient’</span></a></span>
dschulze@551 1706
dschulze@551 1707 <li><a
dschulze@551 1708 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/linking.html#AElement"><span
dschulze@551 1709 class=element-name>‘a’</span></a>
dschulze@551 1710
dschulze@551 1711 <li><a href="#ClipPathElement"><span
dschulze@551 1712 class=element-name>‘clipPath’</span></a>
dschulze@551 1713
dschulze@551 1714 <li><a
dschulze@551 1715 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/color.html#ColorProfileElement"><span
dschulze@551 1716 class=element-name>‘color-profile’</span></a>
dschulze@551 1717
dschulze@551 1718 <li><a
dschulze@551 1719 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/interact.html#CursorElement"><span
dschulze@551 1720 class=element-name>‘cursor’</span></a>
dschulze@551 1721
dschulze@551 1722 <li><a
dschulze@551 1723 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/filters.html#FilterElement"><span
dschulze@551 1724 class=element-name>‘filter’</span></a>
dschulze@551 1725
dschulze@551 1726 <li><a
dschulze@551 1727 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/fonts.html#FontElement"><span
dschulze@551 1728 class=element-name>‘font’</span></a>
dschulze@551 1729
dschulze@551 1730 <li><a
dschulze@551 1731 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/fonts.html#FontFaceElement"><span
dschulze@551 1732 class=element-name>‘font-face’</span></a>
dschulze@551 1733
dschulze@551 1734 <li><a
dschulze@551 1735 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/extend.html#ForeignObjectElement"><span
dschulze@551 1736 class=element-name>‘foreignObject’</span></a>
dschulze@551 1737
dschulze@551 1738 <li><a
dschulze@551 1739 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/struct.html#ImageElement"><span
dschulze@551 1740 class=element-name>‘image’</span></a>
dschulze@551 1741
dschulze@551 1742 <li><a
dschulze@551 1743 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/painting.html#MarkerElement"><span
dschulze@551 1744 class=element-name>‘marker’</span></a>
dschulze@551 1745
dschulze@551 1746 <li><a href="#MaskElement"><span
dschulze@551 1747 class=element-name>‘mask’</span></a>
dschulze@551 1748
dschulze@551 1749 <li><a
dschulze@551 1750 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/pservers.html#PatternElement"><span
dschulze@551 1751 class=element-name>‘pattern’</span></a>
dschulze@551 1752
dschulze@551 1753 <li><a
dschulze@551 1754 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/script.html#ScriptElement"><span
dschulze@551 1755 class=element-name>‘script’</span></a>
dschulze@551 1756
dschulze@551 1757 <li><a
dschulze@551 1758 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/styling.html#StyleElement"><span
dschulze@551 1759 class=element-name>‘style’</span></a>
dschulze@551 1760
dschulze@551 1761 <li><a
dschulze@551 1762 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/struct.html#SwitchElement"><span
dschulze@551 1763 class=element-name>‘switch’</span></a>
dschulze@551 1764
dschulze@551 1765 <li><a
dschulze@551 1766 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/linking.html#ViewElement"><span
dschulze@551 1767 class=element-name>‘view’</span></a>
dschulze@551 1768
dschulze@551 1769 <li><a
dschulze@551 1770 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/text.html#TextElement"><span
dschulze@551 1771 class=element-name>‘text’</span></a>
dschulze@551 1772
dschulze@551 1773 <li><a
dschulze@551 1774 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/text.html#AltGlyphDefElement"><span
dschulze@551 1775 class=element-name>‘altGlyphDef’</span></a>
dschulze@551 1776 </ul>
dschulze@551 1777
dschulze@551 1778 <tr>
dschulze@551 1779 <th>Attributes:
dschulze@551 1780
dschulze@551 1781 <td>
dschulze@551 1782 <ul class=no-bullets>
dschulze@551 1783 <li><a
dschulze@551 1784 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/intro.html#TermConditionalProcessingAttribute">conditional
dschulze@551 1785 processing attributes</a><span class=expanding> — <a
dschulze@551 1786 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/struct.html#RequiredFeaturesAttribute"><span
dschulze@551 1787 class=attr-name>‘requiredFeatures’</span></a>, <a
dschulze@551 1788 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/struct.html#RequiredExtensionsAttribute"><span
dschulze@551 1789 class=attr-name>‘requiredExtensions’</span></a>, <a
dschulze@551 1790 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/struct.html#SystemLanguageAttribute"><span
dschulze@551 1791 class=attr-name>‘systemLanguage’</span></a></span>
dschulze@551 1792
dschulze@551 1793 <li><a
dschulze@551 1794 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/intro.html#TermCoreAttributes">core
dschulze@551 1795 attributes</a><span class=expanding> — <a
dschulze@551 1796 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/struct.html#IDAttribute"><span
dschulze@551 1797 class=attr-name>‘id’</span></a>, <a
dschulze@551 1798 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/struct.html#XMLBaseAttribute"><span
dschulze@551 1799 class=attr-name>‘xml:base’</span></a>, <a
dschulze@551 1800 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/struct.html#XMLLangAttribute"><span
dschulze@551 1801 class=attr-name>‘xml:lang’</span></a>, <a
dschulze@551 1802 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/struct.html#XMLSpaceAttribute"><span
dschulze@551 1803 class=attr-name>‘xml:space’</span></a></span>
dschulze@551 1804
dschulze@551 1805 <li><a
dschulze@551 1806 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/intro.html#TermPresentationAttribute">presentation
dschulze@551 1807 attributes</a><span class=expanding> — <a
dschulze@551 1808 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/text.html#AlignmentBaselineProperty"><span
dschulze@551 1809 class=attr-name>‘alignment-baseline’</span></a>, <a
dschulze@551 1810 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/text.html#BaselineShiftProperty"><span
dschulze@551 1811 class=attr-name>‘baseline-shift’</span></a>, <a
dschulze@551 1812 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/masking.html#ClipProperty"><span
dschulze@551 1813 class=attr-name>‘clip’</span></a>, <a
dschulze@551 1814 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/masking.html#ClipPathProperty"><span
dschulze@551 1815 class=attr-name>‘clip-path’</span></a>, <a
dschulze@551 1816 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/masking.html#ClipRuleProperty"><span
dschulze@551 1817 class=attr-name>‘clip-rule’</span></a>, <a
dschulze@551 1818 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/color.html#ColorProperty"><span
dschulze@551 1819 class=attr-name>‘color’</span></a>, <a
dschulze@551 1820 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/painting.html#ColorInterpolationProperty"><span
dschulze@551 1821 class=attr-name>‘color-interpolation’</span></a>, <a
dschulze@551 1822 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/painting.html#ColorInterpolationFiltersProperty"><span
dschulze@551 1823 class=attr-name>‘color-interpolation-filters’</span></a>, <a
dschulze@551 1824 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/color.html#ColorProfileProperty"><span
dschulze@551 1825 class=attr-name>‘color-profile’</span></a>, <a
dschulze@551 1826 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/painting.html#ColorRenderingProperty"><span
dschulze@551 1827 class=attr-name>‘color-rendering’</span></a>, <a
dschulze@551 1828 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/interact.html#CursorProperty"><span
dschulze@551 1829 class=attr-name>‘cursor’</span></a>, <a
dschulze@551 1830 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/text.html#DirectionProperty"><span
dschulze@551 1831 class=attr-name>‘direction’</span></a>, <a
dschulze@551 1832 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/painting.html#DisplayProperty"><span
dschulze@551 1833 class=attr-name>‘display’</span></a>, <a
dschulze@551 1834 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/text.html#DominantBaselineProperty"><span
dschulze@551 1835 class=attr-name>‘dominant-baseline’</span></a>, <a
dschulze@551 1836 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/filters.html#EnableBackgroundProperty"><span
dschulze@551 1837 class=attr-name>‘enable-background’</span></a>, <a
dschulze@551 1838 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/painting.html#FillProperty"><span
dschulze@551 1839 class=attr-name>‘fill’</span></a>, <a
dschulze@551 1840 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/painting.html#FillOpacityProperty"><span
dschulze@551 1841 class=attr-name>‘fill-opacity’</span></a>, <a
dschulze@551 1842 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/painting.html#FillRuleProperty"><span
dschulze@551 1843 class=attr-name>‘fill-rule’</span></a>, <a
dschulze@551 1844 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/filters.html#FilterProperty"><span
dschulze@551 1845 class=attr-name>‘filter’</span></a>, <a
dschulze@551 1846 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/filters.html#FloodColorProperty"><span
dschulze@551 1847 class=attr-name>‘flood-color’</span></a>, <a
dschulze@551 1848 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/filters.html#FloodOpacityProperty"><span
dschulze@551 1849 class=attr-name>‘flood-opacity’</span></a>, <a
dschulze@551 1850 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/text.html#FontProperty"><span
dschulze@551 1851 class=attr-name>‘font’</span></a>, <a
dschulze@551 1852 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/text.html#FontFamilyProperty"><span
dschulze@551 1853 class=attr-name>‘font-family’</span></a>, <a
dschulze@551 1854 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/text.html#FontSizeProperty"><span
dschulze@551 1855 class=attr-name>‘font-size’</span></a>, <a
dschulze@551 1856 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/text.html#FontSizeAdjustProperty"><span
dschulze@551 1857 class=attr-name>‘font-size-adjust’</span></a>, <a
dschulze@551 1858 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/text.html#FontStretchProperty"><span
dschulze@551 1859 class=attr-name>‘font-stretch’</span></a>, <a
dschulze@551 1860 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/text.html#FontStyleProperty"><span
dschulze@551 1861 class=attr-name>‘font-style’</span></a>, <a
dschulze@551 1862 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/text.html#FontVariantProperty"><span
dschulze@551 1863 class=attr-name>‘font-variant’</span></a>, <a
dschulze@551 1864 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/text.html#FontWeightProperty"><span
dschulze@551 1865 class=attr-name>‘font-weight’</span></a>, <a
dschulze@551 1866 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/text.html#GlyphOrientationHorizontalProperty"><span
dschulze@551 1867 class=attr-name>‘glyph-orientation-horizontal’</span></a>, <a
dschulze@551 1868 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/text.html#GlyphOrientationVerticalProperty"><span
dschulze@551 1869 class=attr-name>‘glyph-orientation-vertical’</span></a>, <a
dschulze@551 1870 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/painting.html#ImageRenderingProperty"><span
dschulze@551 1871 class=attr-name>‘image-rendering’</span></a>, <a
dschulze@551 1872 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/text.html#KerningProperty"><span
dschulze@551 1873 class=attr-name>‘kerning’</span></a>, <a
dschulze@551 1874 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/text.html#LetterSpacingProperty"><span
dschulze@551 1875 class=attr-name>‘letter-spacing’</span></a>, <a
dschulze@551 1876 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/filters.html#LightingColorProperty"><span
dschulze@551 1877 class=attr-name>‘lighting-color’</span></a>, <a
dschulze@551 1878 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/painting.html#MarkerProperty"><span
dschulze@551 1879 class=attr-name>‘marker’</span></a>, <a
dschulze@551 1880 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/painting.html#MarkerEndProperty"><span
dschulze@551 1881 class=attr-name>‘marker-end’</span></a>, <a
dschulze@551 1882 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/painting.html#MarkerMidProperty"><span
dschulze@551 1883 class=attr-name>‘marker-mid’</span></a>, <a
dschulze@551 1884 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/painting.html#MarkerStartProperty"><span
dschulze@551 1885 class=attr-name>‘marker-start’</span></a>, <a
dschulze@551 1886 href="#MaskProperty"><span class=attr-name>‘mask’</span></a>, <a
dschulze@551 1887 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/masking.html#OpacityProperty"><span
dschulze@551 1888 class=attr-name>‘opacity’</span></a>, <a
dschulze@551 1889 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/masking.html#OverflowProperty"><span
dschulze@551 1890 class=attr-name>‘overflow’</span></a>, <a
dschulze@551 1891 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/interact.html#PointerEventsProperty"><span
dschulze@551 1892 class=attr-name>‘pointer-events’</span></a>, <a
dschulze@551 1893 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/painting.html#ShapeRenderingProperty"><span
dschulze@551 1894 class=attr-name>‘shape-rendering’</span></a>, <a
dschulze@551 1895 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/pservers.html#StopColorProperty"><span
dschulze@551 1896 class=attr-name>‘stop-color’</span></a>, <a
dschulze@551 1897 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/pservers.html#StopOpacityProperty"><span
dschulze@551 1898 class=attr-name>‘stop-opacity’</span></a>, <a
dschulze@551 1899 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/painting.html#StrokeProperty"><span
dschulze@551 1900 class=attr-name>‘stroke’</span></a>, <a
dschulze@551 1901 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/painting.html#StrokeDasharrayProperty"><span
dschulze@551 1902 class=attr-name>‘stroke-dasharray’</span></a>, <a
dschulze@551 1903 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/painting.html#StrokeDashoffsetProperty"><span
dschulze@551 1904 class=attr-name>‘stroke-dashoffset’</span></a>, <a
dschulze@551 1905 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/painting.html#StrokeLinecapProperty"><span
dschulze@551 1906 class=attr-name>‘stroke-linecap’</span></a>, <a
dschulze@551 1907 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/painting.html#StrokeLinejoinProperty"><span
dschulze@551 1908 class=attr-name>‘stroke-linejoin’</span></a>, <a
dschulze@551 1909 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/painting.html#StrokeMiterlimitProperty"><span
dschulze@551 1910 class=attr-name>‘stroke-miterlimit’</span></a>, <a
dschulze@551 1911 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/painting.html#StrokeOpacityProperty"><span
dschulze@551 1912 class=attr-name>‘stroke-opacity’</span></a>, <a
dschulze@551 1913 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/painting.html#StrokeWidthProperty"><span
dschulze@551 1914 class=attr-name>‘stroke-width’</span></a>, <a
dschulze@551 1915 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/text.html#TextAnchorProperty"><span
dschulze@551 1916 class=attr-name>‘text-anchor’</span></a>, <a
dschulze@551 1917 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/text.html#TextDecorationProperty"><span
dschulze@551 1918 class=attr-name>‘text-decoration’</span></a>, <a
dschulze@551 1919 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/painting.html#TextRenderingProperty"><span
dschulze@551 1920 class=attr-name>‘text-rendering’</span></a>, <a
dschulze@551 1921 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/text.html#UnicodeBidiProperty"><span
dschulze@551 1922 class=attr-name>‘unicode-bidi’</span></a>, <a
dschulze@551 1923 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/painting.html#VisibilityProperty"><span
dschulze@551 1924 class=attr-name>‘visibility’</span></a>, <a
dschulze@551 1925 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/text.html#WordSpacingProperty"><span
dschulze@551 1926 class=attr-name>‘word-spacing’</span></a>, <a
dschulze@551 1927 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/text.html#WritingModeProperty"><span
dschulze@551 1928 class=attr-name>‘writing-mode’</span></a></span>
dschulze@551 1929
dschulze@551 1930 <li><a
dschulze@551 1931 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/styling.html#ClassAttribute"><span
dschulze@551 1932 class=attr-name>‘class’</span></a>
dschulze@551 1933
dschulze@551 1934 <li><a
dschulze@551 1935 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/styling.html#StyleAttribute"><span
dschulze@551 1936 class=attr-name>‘style’</span></a>
dschulze@551 1937
dschulze@551 1938 <li><a href="#MaskElementXAttribute"><span
dschulze@551 1939 class=attr-name>‘x’</span></a>
dschulze@551 1940
dschulze@551 1941 <li><a href="#MaskElementYAttribute"><span
dschulze@551 1942 class=attr-name>‘y’</span></a>
dschulze@551 1943
dschulze@551 1944 <li><a href="#MaskElementWidthAttribute"><span
dschulze@551 1945 class=attr-name>‘width’</span></a>
dschulze@551 1946
dschulze@551 1947 <li><a href="#MaskElementHeightAttribute"><span
dschulze@551 1948 class=attr-name>‘height’</span></a>
dschulze@551 1949
dschulze@551 1950 <li><a href="#MaskElementMaskUnitsAttribute"><span
dschulze@551 1951 class=attr-name>‘maskUnits’</span></a>
dschulze@551 1952
dschulze@551 1953 <li><a href="#MaskElementMaskContentUnitsAttribute"><span
dschulze@551 1954 class=attr-name>‘maskContentUnits’</span></a>
dschulze@551 1955 </ul>
dschulze@551 1956
dschulze@551 1957 <tr>
dschulze@551 1958 <th>DOM Interfaces:
dschulze@551 1959
dschulze@551 1960 <td><a class=idlinterface
dschulze@551 1961 href="#InterfaceSVGMaskElement">SVGMaskElement</a>
dschulze@551 1962 </table>
dschulze@298 1963
dschulze@273 1964 <div class=adef-list>
dschulze@427 1965 <p><em>Attribute definitions:</em>
dschulze@273 1966
dschulze@273 1967 <dl>
dschulze@273 1968 <dt id=MaskElementMaskUnitsAttribute><span class=adef>maskUnits</span> =
dschulze@273 1969 "<em>userSpaceOnUse</em> | <em>objectBoundingBox</em>"
dschulze@273 1970
dschulze@551 1971 <dd>Defines the coordinate system for attributes <a class=attr-name
dschulze@551 1972 href="#MaskElementXAttribute">‘<code class=property>x</code>’</a>,
dschulze@551 1973 <a class=attr-name href="#MaskElementYAttribute">‘<code
dschulze@551 1974 class=property>y</code>’</a>, <a class=attr-name
dschulze@551 1975 href="#MaskElementWidthAttribute">‘<code
dschulze@551 1976 class=property>width</code>’</a> and <a class=attr-name
dschulze@551 1977 href="#MaskElementHeightAttribute">‘<code
dschulze@551 1978 class=property>height</code>’</a>.<br>
dschulze@551 1979 If <span class=attr-value>maskUnits="userSpaceOnUse"</span>, <a
dschulze@551 1980 class=attr-name href="#MaskElementXAttribute">‘<code
dschulze@551 1981 class=property>x</code>’</a>, <a class=attr-name
dschulze@551 1982 href="#MaskElementYAttribute">‘<code class=property>y</code>’</a>,
dschulze@551 1983 <a class=attr-name href="#MaskElementWidthAttribute">‘<code
dschulze@551 1984 class=property>width</code>’</a> and <a class=attr-name
dschulze@551 1985 href="#MaskElementHeightAttribute">‘<code
dschulze@551 1986 class=property>height</code>’</a> represent values in the current user
dschulze@551 1987 coordinate system in place at the time when the <a class=element-name
dschulze@551 1988 href="#MaskElement">‘<code class=property>mask</code>’</a> element
dschulze@551 1989 is referenced (i.e., the user coordinate system for the element
dschulze@551 1990 referencing the <a class=element-name href="#MaskElement">‘<code
dschulze@551 1991 class=property>mask</code>’</a> element via the ‘<a
dschulze@551 1992 href="#mask"><code class=property>mask</code></a>’ property).<br>
dschulze@551 1993 If <span class=attr-value>maskUnits="objectBoundingBox"</span>, <a
dschulze@551 1994 class=attr-name href="#MaskElementXAttribute">‘<code
dschulze@551 1995 class=property>x</code>’</a>, <a class=attr-name
dschulze@551 1996 href="#MaskElementYAttribute">‘<code class=property>y</code>’</a>,
dschulze@551 1997 <a class=attr-name href="#MaskElementWidthAttribute">‘<code
dschulze@551 1998 class=property>width</code>’</a> and <a class=attr-name
dschulze@551 1999 href="#MaskElementHeightAttribute">‘<code
dschulze@551 2000 class=property>height</code>’</a> represent fractions or percentages
dschulze@273 2001 of the bounding box of the element to which the mask is applied. (See <a
dschulze@273 2002 class=term href="#object-bounding-box-units">object bounding box
dschulze@273 2003 units</a>.)<br>
dschulze@551 2004 If attribute <a class=attr-name
dschulze@551 2005 href="#MaskElementMaskUnitsAttribute">‘<code
dschulze@551 2006 class=property>maskUnits</code>’</a> is not specified, then the effect
dschulze@551 2007 is as if a value of <span class=attr-value>‘<code
dschulze@273 2008 class=property>objectBoundingBox</code>’</span> were specified.<br>
dschulze@343 2009 <span class=anim-target>Animatable: yes.</span>
dschulze@273 2010
dschulze@273 2011 <dt id=MaskElementMaskContentUnitsAttribute><span
dschulze@273 2012 class=adef>maskContentUnits</span> = "<em>userSpaceOnUse</em> |
dschulze@273 2013 <em>objectBoundingBox</em>"
dschulze@273 2014
dschulze@551 2015 <dd>Defines the coordinate system for the contents of the <a
dschulze@551 2016 class=element-name href="#MaskElement">‘<code
dschulze@551 2017 class=property>mask</code>’</a>.<br>
dschulze@273 2018 If <span class=attr-value>maskContentUnits="userSpaceOnUse"</span>, the
dschulze@551 2019 user coordinate system for the contents of the <a class=element-name
dschulze@551 2020 href="#MaskElement">‘<code class=property>mask</code>’</a> element
dschulze@551 2021 is the current user coordinate system in place at the time when the <a
dschulze@551 2022 class=element-name href="#MaskElement">‘<code
dschulze@551 2023 class=property>mask</code>’</a> element is referenced (i.e., the user
dschulze@551 2024 coordinate system for the element referencing the <a class=element-name
dschulze@551 2025 href="#MaskElement">‘<code class=property>mask</code>’</a> element
dschulze@551 2026 via the ‘<a href="#mask"><code class=property>mask</code></a>’
dschulze@273 2027 property).<br>
dschulze@273 2028 If <span class=attr-value>maskContentUnits="objectBoundingBox"</span>,
dschulze@551 2029 the user coordinate system for the contents of the <a class=element-name
dschulze@551 2030 href="#MaskElement">‘<code class=property>mask</code>’</a> is
dschulze@551 2031 established using the bounding box of the element to which the mask is
dschulze@551 2032 applied. (See <a class=term href="#object-bounding-box-units">object
dschulze@551 2033 bounding box units</a>.)<br>
dschulze@551 2034 If attribute <a class=attr-name
dschulze@551 2035 href="#MaskElementMaskContentUnitsAttribute">‘<code
dschulze@551 2036 class=property>maskContentUnits</code>’</a> is not specified, then the
dschulze@551 2037 effect is as if a value of <span class=attr-value>‘<code
dschulze@551 2038 class=property>userSpaceOnUse</code>’</span> were specified.<br>
dschulze@343 2039 <span class=anim-target>Animatable: yes.</span>
dschulze@273 2040
dschulze@343 2041 <dt id=MaskElementXAttribute><span class=adef>x</span> =
dschulze@343 2042 "<var>&lt;length&gt;</var> | <var>&lt;percentage&gt;</var>"
dschulze@273 2043
dschulze@273 2044 <dd>The x-axis coordinate of one corner of the rectangle for the largest
dschulze@726 2045 possible offscreen buffer. If the attribute is not specified but at
dschulze@726 2046 least one of the attributes <a class=attr-name
dschulze@726 2047 href="#MaskElementYAttribute">‘<code class=property>y</code>’</a>,
dschulze@726 2048 <a class=attr-name href="#MaskElementWidthAttribute">‘<code
dschulze@726 2049 class=property>width</code>’</a> or <a class=attr-name
dschulze@726 2050 href="#MaskElementHeightAttribute">‘<code
dschulze@726 2051 class=property>height</code>’</a> are specified, the effect is as if a
dschulze@726 2052 value of <span class=attr-value>‘<code class=css>-10%</code>’</span>
dschulze@726 2053 were specified.<br>
dschulze@343 2054 <span class=anim-target>Animatable: yes.</span>
dschulze@343 2055
dschulze@343 2056 <dt id=MaskElementYAttribute><span class=adef>y</span> =
dschulze@343 2057 "<var>&lt;length&gt;</var> | <var>&lt;percentage&gt;</var>"
dschulze@273 2058
dschulze@273 2059 <dd>The y-axis coordinate of one corner of the rectangle for the largest
dschulze@273 2060 possible offscreen buffer.<br>
dschulze@726 2061 If the attribute is not specified but at least one of the attributes <a
dschulze@726 2062 class=attr-name href="#MaskElementXAttribute">‘<code
dschulze@726 2063 class=property>x</code>’</a>, <a class=attr-name
dschulze@726 2064 href="#MaskElementWidthAttribute">‘<code
dschulze@726 2065 class=property>width</code>’</a> or <a class=attr-name
dschulze@726 2066 href="#MaskElementHeightAttribute">‘<code
dschulze@726 2067 class=property>height</code>’</a> are specified, the effect is as if a
dschulze@726 2068 value of <span class=attr-value>‘<code class=css>-10%</code>’</span>
dschulze@726 2069 were specified.<br>
dschulze@343 2070 <span class=anim-target>Animatable: yes.</span>
dschulze@343 2071
dschulze@343 2072 <dt id=MaskElementWidthAttribute><span class=adef>width</span> =
dschulze@343 2073 "<var>&lt;length&gt;</var> | <var>&lt;percentage&gt;</var>"
dschulze@273 2074
dschulze@726 2075 <dd>The width of the largest possible offscreen buffer. A negative value
dschulze@726 2076 or a value of zero disables rendering of the element.<br>
dschulze@726 2077 If the attribute is not specified but at least one of the attributes <a
dschulze@726 2078 class=attr-name href="#MaskElementXAttribute">‘<code
dschulze@726 2079 class=property>x</code>’</a>, <a class=attr-name
dschulze@726 2080 href="#MaskElementYAttribute">‘<code class=property>y</code>’</a> or
dschulze@726 2081 <a class=attr-name href="#MaskElementHeightAttribute">‘<code
dschulze@726 2082 class=property>height</code>’</a> are specified, the effect is as if a
dschulze@726 2083 value of <span class=attr-value>‘<code class=css>120%</code>’</span>
dschulze@726 2084 were specified.<br>
dschulze@726 2085 <span class=anim-target>Animatable: yes.</span>
dschulze@343 2086
dschulze@343 2087 <dt id=MaskElementHeightAttribute><span class=adef>height</span> =
dschulze@343 2088 "<var>&lt;length&gt;</var> | <var>&lt;percentage&gt;</var>"
dschulze@273 2089
dschulze@273 2090 <dd>The height of the largest possible offscreen buffer.<br>
dschulze@279 2091 A negative value or a value of zero disables rendering of the
dschulze@279 2092 element.<br>
dschulze@726 2093 If the attribute is not specified but at least one of the attributes <a
dschulze@726 2094 class=attr-name href="#MaskElementXAttribute">‘<code
dschulze@726 2095 class=property>x</code>’</a>, <a class=attr-name
dschulze@726 2096 href="#MaskElementYAttribute">‘<code class=property>y</code>’</a> or
dschulze@726 2097 <a class=attr-name href="#MaskElementWidthAttribute">‘<code
dschulze@726 2098 class=property>width</code>’</a> are specified, the effect is as if a
dschulze@726 2099 value of <span class=attr-value>‘<code class=css>120%</code>’</span>
dschulze@726 2100 were specified.<br>
dschulze@343 2101 <span class=anim-target>Animatable: yes.</span>
dschulze@273 2102 </dl>
dschulze@273 2103 </div>
dschulze@273 2104
dschulze@734 2105 <p>If at least one of the attributes <a class=attr-name
dschulze@734 2106 href="#MaskElementXAttribute">‘<code class=property>x</code>’</a>, <a
dschulze@734 2107 class=attr-name href="#MaskElementYAttribute">‘<code
dschulze@734 2108 class=property>y</code>’</a>, <a class=attr-name
dschulze@734 2109 href="#MaskElementWidthAttribute">‘<code
dschulze@726 2110 class=property>width</code>’</a> or <a class=attr-name
dschulze@726 2111 href="#MaskElementHeightAttribute">‘<code
dschulze@726 2112 class=property>height</code>’</a> are specified, the given object and
dschulze@726 2113 the rectangle defined by <a class=attr-name
dschulze@726 2114 href="#MaskElementXAttribute">‘<code class=property>x</code>’</a>, <a
dschulze@726 2115 class=attr-name href="#MaskElementYAttribute">‘<code
dschulze@726 2116 class=property>y</code>’</a>, <a class=attr-name
dschulze@726 2117 href="#MaskElementWidthAttribute">‘<code
dschulze@726 2118 class=property>width</code>’</a> and <a class=attr-name
dschulze@726 2119 href="#MaskElementHeightAttribute">‘<code
dschulze@727 2120 class=property>height</code>’</a> establish a current clipping path. The
dschulze@727 2121 rendered content of the mask must be clipped by this current clipping
dschulze@726 2122 path.
dschulze@726 2123
dschulze@726 2124 <p>
dschulze@726 2125
dschulze@551 2126 <p>CSS properties inherit into the <a class=element-name
dschulze@551 2127 href="#MaskElement">‘<code class=property>mask</code>’</a> element
dschulze@551 2128 from its ancestors; properties do <em>not</em> inherit from the element
dschulze@551 2129 referencing the <a class=element-name href="#MaskElement">‘<code
dschulze@551 2130 class=property>mask</code>’</a> element.
dschulze@551 2131
dschulze@551 2132 <p><a class=element-name href="#MaskElement">‘<code
dschulze@551 2133 class=property>mask</code>’</a> elements are never rendered directly;
dschulze@551 2134 their only usage is as something that can be referenced using the ‘<a
dschulze@551 2135 href="#mask"><code class=property>mask</code></a>’ property. The
dschulze@551 2136 ‘<code class=property>opacity</code>’, ‘<code
dschulze@551 2137 class=property>filter</code>’ and ‘<code
dschulze@551 2138 class=property>display</code>’ properties do not apply to the <a
dschulze@551 2139 class=element-name href="#MaskElement">‘<code
dschulze@551 2140 class=property>mask</code>’</a> element; thus, <a class=element-name
dschulze@551 2141 href="#MaskElement">‘<code class=property>mask</code>’</a> elements
dschulze@551 2142 are not directly rendered even if the ‘<code
dschulze@551 2143 class=property>display</code>’ property is set to a value other than
dschulze@551 2144 ‘<a href="#none"><code class=property>none</code></a>’, and <a
dschulze@551 2145 class=element-name href="#MaskElement">‘<code
dschulze@551 2146 class=property>mask</code>’</a> elements are available for referencing
dschulze@551 2147 even when the ‘<code class=property>display</code>’ property on the <a
dschulze@551 2148 class=element-name href="#MaskElement">‘<code
dschulze@551 2149 class=property>mask</code>’</a> element or any of its ancestors is set
dschulze@551 2150 to <a class=prop-value href="#none">none</a>.
dschulze@278 2151
dschulze@292 2152 <h2 id=mask-box-image><span class=secno>7. </span>Mask Box Image</h2>
dschulze@292 2153
dschulze@342 2154 <p> With ‘<a href="#mask-box-image0"><code
birtles@466 2155 class=property>mask-box-image</code></a>’ a mask can be split into nine
birtles@466 2156 pieces: four corners, four edges and the middle piece as demonstrated in
birtles@466 2157 the figure below.
dschulze@342 2158
dschulze@342 2159 <div class=figure> <img alt="pieces of a mask box image"
dschulze@342 2160 src="images/mask-box-image-mask.svg" width=240>
dschulze@427 2161 <p class=caption> Pieces of a mask box image.
dschulze@342 2162 </div>
dschulze@342 2163
dschulze@342 2164 <p> These pieces may be sliced, scaled and stretched in various ways to fit
dschulze@342 2165 the size of the <span class=index id=mask-image-area>mask image
dschulze@659 2166 area</span>. The usage of ‘<a href="#mask-box-image0"><code
dschulze@659 2167 class=property>mask-box-image</code></a>’ corresponds to the ‘<code
dschulze@659 2168 class=property>border-image</code>’ property of CSS Background and
dschulze@659 2169 Borders <a href="#CSS3BG" rel=biblioentry>[CSS3BG]<!--{{!CSS3BG}}--></a>.
dschulze@299 2170
dschulze@313 2171 <div class=example>
birtles@436 2172 <p> The mask image in the following example is split into four corners
birtles@436 2173 with dimensions of 75 pixels, four edges and the middle piece that is
birtles@436 2174 stretched and scaled.
dschulze@342 2175
dschulze@313 2176 <div class=figure> <img alt="Example for 'mask-box-image'" height=240
dschulze@313 2177 src="images/mask-box-image.svg" width=720>
dschulze@342 2178 <p class=caption> Example for ‘<a href="#mask-box-image0"><code
dschulze@313 2179 class=property>mask-box-image</code></a>’. The object on the left is
dschulze@313 2180 the object to mask. The second image is the alpha mask and the last
dschulze@427 2181 image the masked object.
dschulze@313 2182 </div>
dschulze@313 2183
dschulze@470 2184 <pre>
dschulze@470 2185 div {
dschulze@470 2186 background: linear-gradient(bottom, #F27BAA 0%, #FCC8AD 100%);
dschulze@470 2187 mask-box-image-slice: 25 fill;
dschulze@470 2188 mask-box-image-repeat: stretch;
dschulze@470 2189 mask-box-image-source: url(mask.png);
dschulze@313 2190 }</pre>
dschulze@313 2191 </div>
dschulze@313 2192
dschulze@299 2193 <h3 id=the-mask-box-image-source><span class=secno>7.1. </span>The ‘<a
dschulze@299 2194 href="#mask-box-image-source"><code
dschulze@299 2195 class=property>mask-box-image-source</code></a>’ property</h3>
dschulze@299 2196
dschulze@299 2197 <table class=propdef>
dschulze@299 2198 <tbody>
dschulze@299 2199 <tr>
dschulze@299 2200 <th>Name:
dschulze@299 2201
dschulze@299 2202 <td><dfn id=mask-box-image-source>mask-box-image-source</dfn>
dschulze@299 2203
dschulze@299 2204 <tr>
dschulze@299 2205 <th><a href="#values">Value</a>:
dschulze@299 2206
dschulze@299 2207 <td><a href="#ltmask-imagegt"><var>&lt;mask-image&gt;</var></a>
dschulze@299 2208
dschulze@299 2209 <tr>
dschulze@299 2210 <th>Initial:
dschulze@299 2211
dschulze@299 2212 <td>none
dschulze@299 2213
dschulze@299 2214 <tr>
dschulze@299 2215 <th>Applies to:
dschulze@299 2216
dschulze@551 2217 <td>All elements. In SVG, it applies to <a
dschulze@551 2218 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/intro.html#TermContainerElement">container
dschulze@551 2219 elements</a> and <a
dschulze@551 2220 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/intro.html#TermGraphicsElement">graphics
dschulze@551 2221 elements</a>.
dschulze@299 2222
dschulze@299 2223 <tr>
dschulze@299 2224 <th>Inherited:
dschulze@299 2225
dschulze@299 2226 <td>no
dschulze@299 2227
dschulze@299 2228 <tr>
dschulze@299 2229 <th>Percentages:
dschulze@299 2230
dschulze@299 2231 <td>N/A
dschulze@299 2232
dschulze@299 2233 <tr>
dschulze@299 2234 <th>Media:
dschulze@299 2235
dschulze@299 2236 <td>visual
dschulze@299 2237
dschulze@299 2238 <tr>
dschulze@299 2239 <th>Computed value:
dschulze@299 2240
dschulze@299 2241 <td>‘<a href="#none"><code class=css>none</code></a>’ or the image
dschulze@299 2242 with its URI made absolute
dschulze@299 2243
dschulze@299 2244 <tr>
dschulze@299 2245 <th>Animatable:
dschulze@299 2246
dschulze@299 2247 <td>no
dschulze@299 2248 </table>
dschulze@299 2249
dschulze@301 2250 <p>Specifies an image to be used as mask. If the value is ‘<a
dschulze@301 2251 href="#none"><code class=css>none</code></a>’ or if the image cannot be
dschulze@301 2252 displayed (or the property doesn't apply), the content won't get masked.
dschulze@301 2253
dschulze@299 2254 <h3 id=the-mask-box-image-slice><span class=secno>7.2. </span>The ‘<a
dschulze@299 2255 href="#mask-box-image-slice"><code
dschulze@299 2256 class=property>mask-box-image-slice</code></a>’ property</h3>
dschulze@299 2257
dschulze@299 2258 <table class=propdef>
dschulze@299 2259 <tbody>
dschulze@299 2260 <tr>
dschulze@299 2261 <th>Name:
dschulze@299 2262
dschulze@299 2263 <td><dfn id=mask-box-image-slice>mask-box-image-slice</dfn>
dschulze@299 2264
dschulze@299 2265 <tr>
dschulze@299 2266 <th><a href="#values">Value</a>:
dschulze@299 2267
dschulze@299 2268 <td>[<var>&lt;number&gt;</var> | <var>&lt;percentage&gt;</var>]{1,4}
dschulze@299 2269 &amp;&amp; fill?
dschulze@299 2270
dschulze@299 2271 <tr>
dschulze@299 2272 <th>Initial:
dschulze@299 2273
dschulze@301 2274 <td>0 fill
dschulze@299 2275
dschulze@299 2276 <tr>
dschulze@299 2277 <th>Applies to:
dschulze@299 2278
dschulze@551 2279 <td>All elements. In SVG, it applies to <a
dschulze@551 2280 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/intro.html#TermContainerElement">container
dschulze@551 2281 elements</a> and <a
dschulze@551 2282 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/intro.html#TermGraphicsElement">graphics
dschulze@551 2283 elements</a>.
dschulze@299 2284
dschulze@299 2285 <tr>
dschulze@299 2286 <th>Inherited:
dschulze@299 2287
dschulze@299 2288 <td>no
dschulze@299 2289
dschulze@299 2290 <tr>
dschulze@299 2291 <th>Percentages:
dschulze@299 2292
dschulze@451 2293 <td>refer to size of the mask image
dschulze@299 2294
dschulze@299 2295 <tr>
dschulze@299 2296 <th>Media:
dschulze@299 2297
dschulze@299 2298 <td>visual
dschulze@299 2299
dschulze@299 2300 <tr>
dschulze@299 2301 <th>Computed value:
dschulze@299 2302
dschulze@299 2303 <td>as specified
dschulze@299 2304
dschulze@299 2305 <tr>
dschulze@299 2306 <th>Animatable:
dschulze@299 2307
dschulze@299 2308 <td>no
dschulze@299 2309 </table>
dschulze@299 2310
dschulze@301 2311 <p>This property specifies inward offsets from the top, right, bottom, and
dschulze@301 2312 left edges of the mask image, dividing it into nine regions: four corners,
dschulze@301 2313 four edges and a middle. The middle image part is discarded (treated as
dschulze@659 2314 fully transparent black) unless the ‘<code class=css>fill</code>’
dschulze@301 2315 keyword is present.
dschulze@301 2316
dschulze@659 2317 <p>See <a
dschulze@659 2318 href="http://www.w3.org/TR/css3-background/#the-border-image-slice">Image
dschulze@659 2319 Slicing: the ‘<code class=property>border-image-slice</code>’
dschulze@659 2320 property</a> <a href="#CSS3BG"
dschulze@659 2321 rel=biblioentry>[CSS3BG]<!--{{!CSS3BG}}--></a> for the defintions of the
dschulze@659 2322 property values.
dschulze@301 2323
dschulze@299 2324 <h3 id=the-mask-box-image-width><span class=secno>7.3. </span>The ‘<a
dschulze@299 2325 href="#mask-box-image-width"><code
dschulze@299 2326 class=property>mask-box-image-width</code></a>’ property</h3>
dschulze@299 2327
dschulze@299 2328 <table class=propdef>
dschulze@299 2329 <tbody>
dschulze@299 2330 <tr>
dschulze@299 2331 <th>Name:
dschulze@299 2332
dschulze@299 2333 <td><dfn id=mask-box-image-width>mask-box-image-width</dfn>
dschulze@299 2334
dschulze@299 2335 <tr>
dschulze@299 2336 <th><a href="#values">Value</a>:
dschulze@299 2337
dschulze@299 2338 <td>[ <var>&lt;length&gt;</var> | <var>&lt;percentage&gt;</var> |
dschulze@299 2339 <var>&lt;number&gt;</var> | auto ]{1,4}
dschulze@299 2340
dschulze@299 2341 <tr>
dschulze@299 2342 <th>Initial:
dschulze@299 2343
dschulze@301 2344 <td>auto
dschulze@299 2345
dschulze@299 2346 <tr>
dschulze@299 2347 <th>Applies to:
dschulze@299 2348
dschulze@551 2349 <td>All elements. In SVG, it applies to <a
dschulze@551 2350 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/intro.html#TermContainerElement">container
dschulze@551 2351 elements</a> and <a
dschulze@551 2352 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/intro.html#TermGraphicsElement">graphics
dschulze@551 2353 elements</a>.
dschulze@299 2354
dschulze@299 2355 <tr>
dschulze@299 2356 <th>Inherited:
dschulze@299 2357
dschulze@299 2358 <td>no
dschulze@299 2359
dschulze@299 2360 <tr>
dschulze@299 2361 <th>Percentages:
dschulze@299 2362
dschulze@451 2363 <td>relative to width/height of the <a
dschulze@301 2364 href="#mask-box-image-area"><em>mask box image area</em></a>
dschulze@299 2365
dschulze@299 2366 <tr>
dschulze@299 2367 <th>Media:
dschulze@299 2368
dschulze@299 2369 <td>visual
dschulze@299 2370
dschulze@299 2371 <tr>
dschulze@299 2372 <th>Computed value:
dschulze@299 2373
dschulze@299 2374 <td>all <var>&lt;length&gt;</var>s made absolute, otherwise as specified
dschulze@299 2375
dschulze@299 2376 <tr>
dschulze@299 2377 <th>Animatable:
dschulze@299 2378
dschulze@299 2379 <td>no
dschulze@299 2380 </table>
dschulze@299 2381
dschulze@301 2382 <p>The mask image is drawn inside an area called the <a
dschulze@301 2383 href="#mask-box-image-area"><em>mask box image area</em></a>. This is an
dschulze@301 2384 area whose boundaries by default correspond to the mask box, see ‘<a
dschulze@301 2385 href="#mask-box-image-outset"><code
dschulze@301 2386 class=property>mask-box-image-outset</code></a>’.
dschulze@301 2387
dschulze@659 2388 <p>See <a
dschulze@659 2389 href="http://www.w3.org/TR/css3-background/#the-border-image-width">Drawing
dschulze@659 2390 Areas: the ‘border-image-width’ property</a> <a href="#CSS3BG"
dschulze@659 2391 rel=biblioentry>[CSS3BG]<!--{{!CSS3BG}}--></a> for the defintions of the
dschulze@659 2392 property values.
dschulze@301 2393
birtles@466 2394 <p class=note> Note that for SVG elements without an associated layout box
birtles@466 2395 the ‘<code class=property>border-width</code>’ is considered to be
dschulze@453 2396 ‘<code class=css>0</code>’.
dschulze@301 2397
dschulze@299 2398 <h3 id=the-mask-box-image-outset><span class=secno>7.4. </span>The ‘<a
dschulze@299 2399 href="#mask-box-image-outset"><code
dschulze@299 2400 class=property>mask-box-image-outset</code></a>’ property</h3>
dschulze@299 2401
dschulze@299 2402 <table class=propdef>
dschulze@299 2403 <tbody>
dschulze@299 2404 <tr>
dschulze@299 2405 <th>Name:
dschulze@299 2406
dschulze@299 2407 <td><dfn id=mask-box-image-outset>mask-box-image-outset</dfn>
dschulze@299 2408
dschulze@299 2409 <tr>
dschulze@299 2410 <th><a href="#values">Value</a>:
dschulze@299 2411
dschulze@299 2412 <td>[ <var>&lt;length&gt;</var> | <var>&lt;number&gt;</var> ]{1,4}
dschulze@299 2413
dschulze@299 2414 <tr>
dschulze@299 2415 <th>Initial:
dschulze@299 2416
dschulze@299 2417 <td>0
dschulze@299 2418
dschulze@299 2419 <tr>
dschulze@299 2420 <th>Applies to:
dschulze@299 2421
dschulze@551 2422 <td>All elements. In SVG, it applies to <a
dschulze@551 2423 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/intro.html#TermContainerElement">container
dschulze@551 2424 elements</a> and <a
dschulze@551 2425 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/intro.html#TermGraphicsElement">graphics
dschulze@551 2426 elements</a>.
dschulze@299 2427
dschulze@299 2428 <tr>
dschulze@299 2429 <th>Inherited:
dschulze@299 2430
dschulze@299 2431 <td>no
dschulze@299 2432
dschulze@299 2433 <tr>
dschulze@299 2434 <th>Percentages:
dschulze@299 2435
dschulze@299 2436 <td>N/A
dschulze@299 2437
dschulze@299 2438 <tr>
dschulze@299 2439 <th>Media:
dschulze@299 2440
dschulze@299 2441 <td>visual
dschulze@299 2442
dschulze@299 2443 <tr>
dschulze@299 2444 <th>Computed value:
dschulze@299 2445
dschulze@299 2446 <td>all <var>&lt;length&gt;</var>s made absolute, otherwise as specified
dschulze@299 2447
dschulze@299 2448 <tr>
dschulze@299 2449 <th>Animatable:
dschulze@299 2450
dschulze@299 2451 <td>no
dschulze@299 2452 </table>
dschulze@299 2453
dschulze@301 2454 <p>The values specify the amount by which the <dfn
dschulze@301 2455 id=mask-box-image-area>mask box image area</dfn> extends beyond the border
dschulze@301 2456 box. If it has four values, they set the outsets on the top, right, bottom
dschulze@301 2457 and left sides in that order. If the left is missing, it is the same as
dschulze@301 2458 the right; if the bottom is missing, it is the same as the top; if the
dschulze@301 2459 right is missing, it is the same as the top.
dschulze@301 2460
dschulze@301 2461 <p>As with ‘<a href="#mask-box-image-width"><code
dschulze@301 2462 class=property>mask-box-image-width</code></a>’, a &lt;number&gt;
dschulze@343 2463 represents a multiple of the corresponding ‘<code
dschulze@343 2464 class=property>border-width</code>’. Negative values are not allowed for
dschulze@343 2465 any of the ‘<a href="#mask-box-image-outset"><code
dschulze@301 2466 class=property>mask-box-image-outset</code></a>’ values.
dschulze@301 2467
dschulze@453 2468 <p class=note>Note that for SVG elements without associated layout box the
dschulze@453 2469 ‘<code class=property>border-width</code>’ is considered to be
dschulze@453 2470 ‘<code class=css>0</code>’.
dschulze@301 2471
dschulze@299 2472 <h3 id=the-mask-box-image-repeat><span class=secno>7.5. </span>The ‘<a
dschulze@299 2473 href="#mask-box-image-repeat"><code
dschulze@299 2474 class=property>mask-box-image-repeat</code></a>’ property</h3>
dschulze@299 2475
dschulze@299 2476 <table class=propdef>
dschulze@299 2477 <tbody>
dschulze@299 2478 <tr>
dschulze@299 2479 <th>Name:
dschulze@299 2480
dschulze@299 2481 <td><dfn id=mask-box-image-repeat>mask-box-image-repeat</dfn>
dschulze@299 2482
dschulze@299 2483 <tr>
dschulze@299 2484 <th><a href="#values">Value</a>:
dschulze@299 2485
dschulze@299 2486 <td>[ stretch | repeat | round | space ]{1,2}
dschulze@299 2487
dschulze@299 2488 <tr>
dschulze@299 2489 <th>Initial:
dschulze@299 2490
dschulze@299 2491 <td>stretch
dschulze@299 2492
dschulze@299 2493 <tr>
dschulze@299 2494 <th>Applies to:
dschulze@299 2495
dschulze@551 2496 <td>All elements. In SVG, it applies to <a
dschulze@551 2497 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/intro.html#TermContainerElement">container
dschulze@551 2498 elements</a> and <a
dschulze@551 2499 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/intro.html#TermGraphicsElement">graphics
dschulze@551 2500 elements</a>.
dschulze@299 2501
dschulze@299 2502 <tr>
dschulze@299 2503 <th>Inherited:
dschulze@299 2504
dschulze@299 2505 <td>no
dschulze@299 2506
dschulze@299 2507 <tr>
dschulze@299 2508 <th>Percentages:
dschulze@299 2509
dschulze@299 2510 <td>N/A
dschulze@299 2511
dschulze@299 2512 <tr>
dschulze@299 2513 <th>Media:
dschulze@299 2514
dschulze@299 2515 <td>visual
dschulze@299 2516
dschulze@299 2517 <tr>
dschulze@299 2518 <th>Computed value:
dschulze@299 2519
dschulze@299 2520 <td>as specified
dschulze@299 2521
dschulze@299 2522 <tr>
dschulze@299 2523 <th>Animatable:
dschulze@299 2524
dschulze@299 2525 <td>no
dschulze@299 2526 </table>
dschulze@299 2527
dschulze@301 2528 <p>This property specifies how the images for the sides and the middle part
dschulze@301 2529 of the mask image are scaled and tiled. The first keyword applies to the
dschulze@301 2530 horizontal sides, the second to the vertical ones. If the second keyword
dschulze@659 2531 is absent, it is assumed to be the same as the first.
dschulze@659 2532
dschulze@659 2533 <p>See <a
dschulze@659 2534 href="http://www.w3.org/TR/css3-background/#the-border-image-repeat">Image
dschulze@659 2535 Tiling: the ‘<code class=property>border-image-repeat</code>’
dschulze@659 2536 property</a> <a href="#CSS3BG"
dschulze@659 2537 rel=biblioentry>[CSS3BG]<!--{{!CSS3BG}}--></a> for the defintions of the
dschulze@659 2538 property values.
dschulze@659 2539
dschulze@659 2540 <p>The exact process for scaling and tiling the mask box image parts is
dschulze@659 2541 given in the section <a href="#masking-with-the-mask-box-image">Masking
dschulze@659 2542 with the mask-box-image</a>.
dschulze@301 2543
dschulze@299 2544 <h3 id=the-mask-box-image><span class=secno>7.6. </span>The ‘<a
dschulze@299 2545 href="#mask-box-image0"><code class=property>mask-box-image</code></a>’
dschulze@299 2546 property</h3>
dschulze@299 2547
dschulze@299 2548 <table class=propdef>
dschulze@299 2549 <tbody>
dschulze@299 2550 <tr>
dschulze@299 2551 <th>Name:
dschulze@299 2552
dschulze@299 2553 <td><dfn id=mask-box-image0>mask-box-image</dfn>
dschulze@299 2554
dschulze@299 2555 <tr>
dschulze@299 2556 <th><a href="#values">Value</a>:
dschulze@299 2557
dschulze@299 2558 <td> <var>&lt;‘<a href="#mask-box-image-source"><code
dschulze@299 2559 class=property>mask-box-image-source</code></a>’&gt;</var> ||
dschulze@299 2560 <var>&lt;‘<a href="#mask-box-image-slice"><code
dschulze@299 2561 class=property>mask-box-image-slice</code></a>’&gt;</var> [ /
dschulze@299 2562 <var>&lt;‘<a href="#mask-box-image-width"><code
dschulze@299 2563 class=property>mask-box-image-width</code></a>’&gt;</var> | /
dschulze@299 2564 <var>&lt;‘<a href="#mask-box-image-width"><code
dschulze@299 2565 class=property>mask-box-image-width</code></a>’&gt;</var>? /
dschulze@299 2566 <var>&lt;‘<a href="#mask-box-image-outset"><code
dschulze@299 2567 class=property>mask-box-image-outset</code></a>’&gt;</var> ]? ||
dschulze@299 2568 <var>&lt;‘<a href="#mask-box-image-repeat"><code
dschulze@299 2569 class=property>mask-box-image-repeat</code></a>’&gt;</var>
dschulze@299 2570
dschulze@299 2571 <tr>
dschulze@299 2572 <th>Initial:
dschulze@299 2573
dschulze@299 2574 <td>See individual properties
dschulze@299 2575
dschulze@299 2576 <tr>
dschulze@299 2577 <th>Applies to:
dschulze@299 2578
dschulze@299 2579 <td>See individual properties
dschulze@299 2580
dschulze@299 2581 <tr>
dschulze@299 2582 <th>Inherited:
dschulze@299 2583
dschulze@299 2584 <td>no
dschulze@299 2585
dschulze@299 2586 <tr>
dschulze@299 2587 <th>Percentages:
dschulze@299 2588
dschulze@299 2589 <td>N/A
dschulze@299 2590
dschulze@299 2591 <tr>
dschulze@299 2592 <th>Media:
dschulze@299 2593
dschulze@299 2594 <td>visual
dschulze@299 2595
dschulze@299 2596 <tr>
dschulze@299 2597 <th>Computed value:
dschulze@299 2598
dschulze@299 2599 <td>See individual properties
dschulze@299 2600
dschulze@299 2601 <tr>
dschulze@299 2602 <th>Animatable:
dschulze@299 2603
dschulze@299 2604 <td>See individual properties
dschulze@299 2605 </table>
dschulze@298 2606
dschulze@301 2607 <p>This is a shorthand property for setting ‘<a
dschulze@301 2608 href="#mask-box-image-source"><code
dschulze@301 2609 class=property>mask-box-image-source</code></a>’, ‘<a
dschulze@301 2610 href="#mask-box-image-slice"><code
dschulze@301 2611 class=property>mask-box-image-slice</code></a>’, ‘<a
dschulze@301 2612 href="#mask-box-image-width"><code
dschulze@301 2613 class=property>mask-box-image-width</code></a>’, ‘<a
dschulze@301 2614 href="#mask-box-image-outset"><code
dschulze@301 2615 class=property>mask-box-image-outset</code></a>’ and ‘<a
dschulze@301 2616 href="#mask-box-image-repeat"><code
dschulze@301 2617 class=property>mask-box-image-repeat</code></a>’. Omitted values are set
dschulze@301 2618 to their initial values.
dschulze@301 2619
dschulze@453 2620 <h3 id=masking-with-the-mask-box-image><span class=secno>7.7.
dschulze@453 2621 </span>Masking with the mask-box-image</h3>
dschulze@453 2622
dschulze@453 2623 <p> After the mask-box-image given by ‘<a
dschulze@453 2624 href="#mask-box-image-source"><code
dschulze@453 2625 class=property>mask-box-image-source</code></a>’ is sliced by the ‘<a
dschulze@453 2626 href="#mask-box-image-slice"><code
dschulze@453 2627 class=property>mask-box-image-slice</code></a>’ values, the resulting
dschulze@453 2628 nine images are scaled, positioned, and tiled into their corresponding
dschulze@659 2629 mask image regions in four steps as described in the section <a
dschulze@659 2630 href="http://www.w3.org/TR/css3-background/#border-image-process">Drawing
dschulze@659 2631 the Border Image</a> <a href="#CSS3BG"
dschulze@659 2632 rel=biblioentry>[CSS3BG]<!--{{!CSS3BG}}--></a>.
dschulze@301 2633
dschulze@298 2634 <h2 id=clipping-paths><span class=secno>8. </span>Clipping paths</h2>
dschulze@298 2635
birtles@466 2636 <p> The clipping path restricts the region to which paint can be applied,
birtles@466 2637 the so-called clipping region. Conceptually, any parts of the drawing that
birtles@466 2638 lie outside of this region are not drawn. This includes any content,
birtles@466 2639 background, borders, text decoration, outline and visible scrolling
birtles@466 2640 mechanism of the element to which the clipping path is applied, and those
birtles@466 2641 of its descendants.
birtles@466 2642
birtles@466 2643 <p> An element's ancestors may also clip portions of their content (e.g.,
dschulze@460 2644 via their own ‘<a href="#ClipProperty"><code
dschulze@460 2645 class=property>clip</code></a>’ or ‘<a href="#clip-path"><code
dschulze@460 2646 class=property>clip-path</code></a>’ properties and/or if their ‘<code
dschulze@460 2647 class=property>overflow</code>’ property is not ‘<code
birtles@466 2648 class=css>visible</code>’). What is rendered is the cumulative
dschulze@460 2649 intersection.
dschulze@460 2650
dschulze@460 2651 <p> If the clipping region exceeds the bounds of the UA's document window,
dschulze@460 2652 content may be clipped to that window by the native operating environment.
dschulze@298 2653
dschulze@298 2654 <h3 id=the-clip-path><span class=secno>8.1. </span>The ‘<a
dschulze@298 2655 href="#clip-path"><code class=property>clip-path</code></a>’ property</h3>
dschulze@298 2656
dschulze@298 2657 <table class=propdef>
dschulze@298 2658 <tbody>
dschulze@298 2659 <tr>
dschulze@298 2660 <th>Name:
dschulze@298 2661
dschulze@298 2662 <td><dfn id=clip-path>clip-path</dfn>
dschulze@298 2663
dschulze@298 2664 <tr>
dschulze@298 2665 <th>Value:
dschulze@298 2666
dschulze@338 2667 <td><a href="#ltshapegt"><var>&lt;shape&gt;</var></a> | <a
dschulze@338 2668 href="#ltclip-sourcegt"><var>&lt;clip-source&gt;</var></a> | none
dschulze@298 2669
dschulze@298 2670 <tr>
dschulze@298 2671 <th>Initial:
dschulze@298 2672
dschulze@298 2673 <td>none
dschulze@298 2674
dschulze@298 2675 <tr>
dschulze@298 2676 <th>Applies to:
dschulze@298 2677
dschulze@551 2678 <td>All elements. SVG <a
dschulze@551 2679 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/intro.html#TermContainerElement">container
dschulze@551 2680 elements</a>, <a
dschulze@551 2681 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/intro.html#TermGraphicsElement">graphics
dschulze@551 2682 elements</a> and <a class=element-name href="#ClipPathElement">‘<code
dschulze@551 2683 class=property>clipPath</code>’</a>
dschulze@298 2684
dschulze@298 2685 <tr>
dschulze@298 2686 <th>Inherited:
dschulze@298 2687
dschulze@298 2688 <td>no
dschulze@298 2689
dschulze@298 2690 <tr>
dschulze@298 2691 <th>Percentages:
dschulze@298 2692
dschulze@338 2693 <td>as specified
dschulze@298 2694
dschulze@298 2695 <tr>
dschulze@298 2696 <th>Media:
dschulze@298 2697
dschulze@298 2698 <td>visual
dschulze@298 2699
dschulze@298 2700 <tr>
dschulze@342 2701 <th>Computed value:
dschulze@298 2702
dschulze@452 2703 <td>as specified, but with <a href="#lturlgt"><var>&lt;url&gt;</var></a>
dschulze@402 2704 values made absolute
dschulze@298 2705
dschulze@298 2706 <tr>
birtles@440 2707 <th>Animatable:
dschulze@298 2708
dschulze@731 2709 <td>See <a
dschulze@731 2710 href="http://dev.w3.org/csswg/css3-exclusions/#shape-inside">‘<code
dschulze@731 2711 class=property>shape-inside</code>’</a> and <a
dschulze@731 2712 href="http://dev.w3.org/csswg/css3-exclusions/#shape-outside">‘<code
dschulze@731 2713 class=property>shape-outside</code>’</a> <a href="#CSS3-EXCLUSIONS"
dschulze@731 2714 rel=biblioentry>[CSS3-EXCLUSIONS]<!--{{!CSS3-EXCLUSIONS}}--></a>
dschulze@298 2715 </table>
dschulze@298 2716
dschulze@452 2717 <pre class=prod><dfn id=ltclip-sourcegt>&lt;clip-source&gt;</dfn> = <a
birtles@697 2718 href="#lturlgt"><var>&lt;url&gt;</var></a> | <var>child</var> | <a
birtles@697 2719 href="#ltchild-selectorgt"><var>&lt;child-selector&gt;</var></a>
dschulze@453 2720 </pre>
dschulze@338 2721
dschulze@298 2722 <dl>
dschulze@338 2723 <dt> <dfn id=ltshapegt>‘<code class=css>&lt;shape&gt;</code>’</dfn>
dschulze@338 2724
dschulze@552 2725 <dd> A basic shape function as defined in CSS3 Exclusions. The origin of
dschulze@552 2726 clipping shapes is on the top left of the <a class=index
dschulze@338 2727 href="#bounding-client-rect" id=bounding-client-rect0>bounding client
dschulze@552 2728 rect</a>. Percentage values are resolved against the <a class=index
dschulze@552 2729 href="#bounding-client-rect" id=bounding-client-rect1>bounding client
dschulze@552 2730 rect</a> width and height. (See <a href="#CSS3-EXCLUSIONS"
dschulze@342 2731 rel=biblioentry>[CSS3-EXCLUSIONS]<!--{{!CSS3-EXCLUSIONS}}--></a>.)
birtles@697 2732
birtles@697 2733 <dt>‘<code class=css>child</code>’
birtles@697 2734
dschulze@698 2735 <dd> A keyword to indicate that the last direct sibling <a
dschulze@698 2736 class=element-name href="#ClipPathElement">‘<code
dschulze@698 2737 class=property>clipPath</code>’</a> element of the element the ‘<a
dschulze@698 2738 href="#clip-path"><code class=property>clip-path</code></a>’ property
dschulze@698 2739 is applied should be used as the clip source. It is equivalent to
dschulze@698 2740 ‘<code class=css>select(clipPath:last-of-type)</code>’.
birtles@697 2741
birtles@697 2742 <dt>‘<a href="#ltchild-selectorgt"><code
birtles@697 2743 class=css>&lt;child-selector&gt;</code></a>’
birtles@697 2744
birtles@697 2745 <dd> A comma-separated list of <a
birtles@697 2746 href="http://dev.w3.org/csswg/selectors4/#compound">compound
birtles@697 2747 selector</a>s scoped at the element to which the ‘<a
birtles@697 2748 href="#clip-path"><code class=property>clip-path</code></a>’ property
birtles@697 2749 is applied. The first matching element in <a
birtles@697 2750 href="http://www.w3.org/TR/2012/WD-dom-20120405/#concept-tree-order">tree
birtles@697 2751 order</a> (as defined in <a href="#DOM"
birtles@697 2752 rel=biblioentry>[DOM]<!--{{!DOM}}--></a>) as a result of evaluating the
birtles@697 2753 list of selectors is taken as the clip source. If there are no matching
birtles@697 2754 elements the clip source is invalid.
dschulze@298 2755 </dl>
dschulze@298 2756
dschulze@298 2757 <h3 id=the-clip-rule><span class=secno>8.2. </span>The ‘<a
dschulze@298 2758 href="#clip-rule"><code class=property>clip-rule</code></a>’ property</h3>
dschulze@298 2759
dschulze@298 2760 <table class=propdef>
dschulze@298 2761 <tbody>
dschulze@298 2762 <tr>
dschulze@298 2763 <th>Name:
dschulze@298 2764
dschulze@298 2765 <td><dfn id=clip-rule>clip-rule</dfn>
dschulze@298 2766
dschulze@298 2767 <tr>
dschulze@298 2768 <th>Value:
dschulze@298 2769
dschulze@298 2770 <td>nonzero | evenodd
dschulze@298 2771
dschulze@298 2772 <tr>
dschulze@298 2773 <th>Initial:
dschulze@298 2774
dschulze@298 2775 <td>nonzero
dschulze@298 2776
dschulze@298 2777 <tr>
dschulze@298 2778 <th>Applies to:
dschulze@298 2779
dschulze@551 2780 <td><a
dschulze@551 2781 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/intro.html#TermGraphicsElement">graphics
dschulze@551 2782 elements</a> within a <a class=element-name
dschulze@551 2783 href="#ClipPathElement">‘<code class=property>clipPath</code>’</a>
dschulze@551 2784 element
dschulze@298 2785
dschulze@298 2786 <tr>
dschulze@298 2787 <th>Inherited:
dschulze@298 2788
dschulze@298 2789 <td>yes
dschulze@298 2790
dschulze@298 2791 <tr>
dschulze@298 2792 <th>Percentages:
dschulze@298 2793
dschulze@298 2794 <td>N/A
dschulze@298 2795
dschulze@298 2796 <tr>
dschulze@298 2797 <th>Media:
dschulze@298 2798
dschulze@298 2799 <td>visual
dschulze@298 2800
dschulze@298 2801 <tr>
dschulze@551 2802 <th>Computed value:
dschulze@298 2803
dschulze@298 2804 <td>as specified
dschulze@298 2805
dschulze@298 2806 <tr>
birtles@440 2807 <th>Animatable:
dschulze@298 2808
dschulze@731 2809 <td>no
dschulze@298 2810 </table>
dschulze@298 2811
dschulze@298 2812 <dl>
dschulze@298 2813 <dt><dfn id=nonzero>‘<code class=css>nonzero</code>’</dfn>
dschulze@298 2814
dschulze@551 2815 <dd>See description of <a class=property
dschulze@551 2816 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/painting.html#FillRuleProperty">‘<code
dschulze@551 2817 class=property>fill-rule</code>’</a> property <a href="#SVG11"
dschulze@551 2818 rel=biblioentry>[SVG11]<!--{{SVG11}}--></a>.
dschulze@298 2819
dschulze@298 2820 <dt><dfn id=evenodd>‘<code class=css>evenodd</code>’</dfn>
dschulze@298 2821
dschulze@551 2822 <dd>See description of <a class=property
dschulze@551 2823 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/painting.html#FillRuleProperty">‘<code
dschulze@551 2824 class=property>fill-rule</code>’</a> property <a href="#SVG11"
dschulze@551 2825 rel=biblioentry>[SVG11]<!--{{SVG11}}--></a>.
dschulze@298 2826 </dl>
dschulze@298 2827
dschulze@298 2828 <p>The ‘<a href="#clip-rule"><code class=property>clip-rule</code></a>’
dschulze@551 2829 property only applies to graphics elements that are contained within a <a
dschulze@551 2830 class=element-name href="#ClipPathElement">‘<code
dschulze@551 2831 class=property>clipPath</code>’</a> element.
dschulze@298 2832
dschulze@298 2833 <div class=example> The following fragment of code will cause an evenodd
dschulze@298 2834 clipping rule to be applied to the clipping path because ‘<a
dschulze@298 2835 href="#clip-rule"><code class=property>clip-rule</code></a>’ is
dschulze@551 2836 specified on the <a class=element-name
dschulze@551 2837 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/paths.html#PathElement">‘<code
dschulze@551 2838 class=property>path</code>’</a> element that defines the clipping shape:
dschulze@551 2839
dschulze@470 2840 <pre>
dschulze@470 2841 &lt;g clip-rule="nonzero"&gt;
dschulze@470 2842 &lt;clipPath id="MyClip"&gt;
dschulze@470 2843 &lt;path d="..." clip-rule="evenodd" /&gt;
dschulze@470 2844 &lt;/clipPath&gt;
dschulze@470 2845 &lt;rect clip-path="url(#MyClip)" ... /&gt;
dschulze@470 2846 &lt;/g&gt;
dschulze@298 2847 </pre>
dschulze@298 2848
dschulze@298 2849 <p>whereas the following fragment of code will <em>not</em> cause an
dschulze@298 2850 evenodd clipping rule to be applied because the ‘<a
dschulze@298 2851 href="#clip-rule"><code class=property>clip-rule</code></a>’ is
dschulze@298 2852 specified on the referencing element, not on the object defining the
dschulze@427 2853 clipping shape:
dschulze@298 2854
dschulze@470 2855 <pre>
dschulze@470 2856 &lt;g clip-rule="nonzero"&gt;
dschulze@470 2857 &lt;clipPath id="MyClip"&gt;
dschulze@470 2858 &lt;path d="..." /&gt;
dschulze@470 2859 &lt;/clipPath&gt;
dschulze@470 2860 &lt;rect clip-path="url(#MyClip)" clip-rule="evenodd" ... /&gt;
dschulze@470 2861 &lt;/g&gt;
dschulze@298 2862 </pre>
dschulze@298 2863 </div>
dschulze@298 2864
dschulze@451 2865 <h3 id=clip-property><span class=secno>8.3. </span>The ‘<a
dschulze@451 2866 href="#ClipProperty"><code class=property>clip</code></a>’ property</h3>
dschulze@451 2867
dschulze@451 2868 <table class=propdef>
dschulze@451 2869 <tbody>
dschulze@451 2870 <tr>
dschulze@451 2871 <th>Name:
dschulze@451 2872
dschulze@451 2873 <td><dfn id=ClipProperty>clip</dfn>
dschulze@451 2874
dschulze@451 2875 <tr>
dschulze@451 2876 <th>Value:
dschulze@451 2877
dschulze@451 2878 <td><a href="#ltshapegt"><var>&lt;shape&gt;</var></a> | auto
dschulze@451 2879
dschulze@451 2880 <tr>
dschulze@451 2881 <th>Initial:
dschulze@451 2882
dschulze@451 2883 <td>see individual properties
dschulze@451 2884
dschulze@451 2885 <tr>
dschulze@451 2886 <th>Applies to:
dschulze@451 2887
dschulze@451 2888 <td>Absolutely positioned elements. In SVG, it applies to <a
dschulze@451 2889 href="http://www.w3.org/TR/SVG2/coords.html#EstablishingANewViewport">elements
dschulze@551 2890 which establish a new viewport</a>, <a class=element-name
dschulze@551 2891 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/pservers.html#PatternElement">‘<code
dschulze@551 2892 class=property>pattern</code>’</a> elements and <a class=element-name
dschulze@551 2893 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/painting.html#MarkerElement">‘<code
dschulze@551 2894 class=property>marker</code>’</a> elements.
dschulze@451 2895
dschulze@451 2896 <tr>
dschulze@451 2897 <th>Inherited:
dschulze@451 2898
dschulze@451 2899 <td>no
dschulze@451 2900
dschulze@451 2901 <tr>
dschulze@451 2902 <th>Percentages:
dschulze@451 2903
dschulze@451 2904 <td>N/A
dschulze@451 2905
dschulze@451 2906 <tr>
dschulze@451 2907 <th>Media:
dschulze@451 2908
dschulze@451 2909 <td>visual
dschulze@451 2910
dschulze@451 2911 <tr>
dschulze@551 2912 <th>Computed value:
dschulze@451 2913
dschulze@451 2914 <td>as specified
dschulze@451 2915
dschulze@451 2916 <tr>
dschulze@451 2917 <th>Animatable:
dschulze@451 2918
dschulze@731 2919 <td>as <a
dschulze@731 2920 href="http://dev.w3.org/csswg/css3-transitions/#animtype-rect">rectangle</a>
dschulze@451 2921 </table>
dschulze@451 2922
dschulze@474 2923 <p class=note>With this specification the ‘<a href="#ClipProperty"><code
dschulze@474 2924 class=property>clip</code></a>’ property is deprecated. Authors are
dschulze@474 2925 encouraged to use the ‘<a href="#clip-path"><code
dschulze@474 2926 class=property>clip-path</code></a>’ property instead. UAs must support
dschulze@474 2927 the ‘<a href="#ClipProperty"><code class=property>clip</code></a>’
dschulze@474 2928 property.
dschulze@474 2929
dschulze@451 2930 <p> The ‘<a href="#ClipProperty"><code class=property>clip</code></a>’
dschulze@451 2931 property applies only to absolutely positioned elements. In SVG, it
dschulze@451 2932 applies to <a
dschulze@451 2933 href="http://www.w3.org/TR/SVG2/coords.html#EstablishingANewViewport">elements
dschulze@551 2934 which establish a new viewport</a>, <a class=element-name
dschulze@551 2935 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/pservers.html#PatternElement">‘<code
dschulze@551 2936 class=property>pattern</code>’</a> elements and <a class=element-name
dschulze@551 2937 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/painting.html#MarkerElement">‘<code
dschulze@551 2938 class=property>marker</code>’</a> elements. Values have the following
dschulze@551 2939 meanings:
dschulze@451 2940
dschulze@451 2941 <dl>
dschulze@551 2942 <dt>‘<a href="#auto"><code class=css>auto</code></a>’
dschulze@451 2943
dschulze@451 2944 <dd>The element does not clip.
dschulze@451 2945
dschulze@451 2946 <dt><a href="#ltshapegt"><var>&lt;shape&gt;</var></a>
dschulze@451 2947
dschulze@451 2948 <dd>
dschulze@451 2949 <p> In CSS 2.1, the only valid &lt;shape&gt; value is: rect(<a
dschulze@451 2950 href="#lttopgt"><var>&lt;top&gt;</var></a>, <a
dschulze@451 2951 href="#ltrightgt"><var>&lt;right&gt;</var></a>, <a
dschulze@451 2952 href="#ltbottomgt"><var>&lt;bottom&gt;</var></a>, <a
dschulze@451 2953 href="#ltleftgt"><var>&lt;left&gt;</var></a>) where <a
dschulze@451 2954 href="#lttopgt"><var>&lt;top&gt;</var></a> and <a
dschulze@451 2955 href="#ltbottomgt"><var>&lt;bottom&gt;</var></a> specify offsets from
dschulze@451 2956 the top border edge of the box, and <a
dschulze@451 2957 href="#ltrightgt"><var>&lt;right&gt;</var></a>, and <a
dschulze@451 2958 href="#ltleftgt"><var>&lt;left&gt;</var></a> specify offsets from the
dschulze@451 2959 left border edge of the box. Authors should separate offset values with
dschulze@451 2960 commas. User agents must support separation with commas, but may also
dschulze@451 2961 support separation without commas (but not a combination), because a
dschulze@451 2962 previous revision of this specification was ambiguous in this respect.
dschulze@451 2963
dschulze@451 2964 <p><dfn id=lttopgt>&lt;top&gt;</dfn>, <dfn
dschulze@451 2965 id=ltrightgt>&lt;right&gt;</dfn>, <dfn
dschulze@451 2966 id=ltbottomgt>&lt;bottom&gt;</dfn>, and <dfn
dschulze@451 2967 id=ltleftgt>&lt;left&gt;</dfn> may either have a
dschulze@551 2968 <var>&lt;length&gt;</var> value or ‘<a href="#auto"><code
dschulze@551 2969 class=css>auto</code></a>’. Negative lengths are permitted. The value
dschulze@551 2970 ‘<a href="#auto"><code class=css>auto</code></a>’ means that a given
dschulze@551 2971 edge of the clipping region will be the same as the edge of the
dschulze@551 2972 element's generated border box (i.e., ‘<a href="#auto"><code
dschulze@551 2973 class=css>auto</code></a>’ means the same as ‘<code
dschulze@451 2974 class=css>0</code>’ for <a href="#lttopgt"><var>&lt;top&gt;</var></a>
dschulze@451 2975 and <a href="#ltleftgt"><var>&lt;left&gt;</var></a>, the same as the
dschulze@451 2976 used value of the height plus the sum of vertical padding and border
dschulze@451 2977 widths for <a href="#ltbottomgt"><var>&lt;bottom&gt;</var></a>, and the
dschulze@451 2978 same as the used value of the width plus the sum of the horizontal
dschulze@451 2979 padding and border widths for <a
dschulze@551 2980 href="#ltrightgt"><var>&lt;right&gt;</var></a>, such that four ‘<a
dschulze@551 2981 href="#auto"><code class=property>auto</code></a>’ values result in
dschulze@551 2982 the clipping region being the same as the element's border box).
dschulze@451 2983
dschulze@451 2984 <p> When coordinates are rounded to pixel coordinates, care should be
dschulze@451 2985 taken that no pixels remain visible when <a
dschulze@451 2986 href="#ltleftgt"><var>&lt;left&gt;</var></a> and <a
dschulze@451 2987 href="#ltrightgt"><var>&lt;right&gt;</var></a> have the same value (or
dschulze@451 2988 <a href="#lttopgt"><var>&lt;top&gt;</var></a> and <a
dschulze@451 2989 href="#ltbottomgt"><var>&lt;bottom&gt;</var></a> have the same value),
dschulze@451 2990 and conversely that no pixels within the element's border box remain
dschulze@551 2991 hidden when these values are ‘<a href="#auto"><code
dschulze@551 2992 class=css>auto</code></a>’.
dschulze@451 2993 </dl>
dschulze@451 2994
dschulze@451 2995 <div class=example>
dschulze@451 2996 <p> Example: The following two rules:
dschulze@451 2997
dschulze@470 2998 <pre><code>
dschulze@470 2999 p#one { clip: rect(5px, 40px, 45px, 5px); }
dschulze@451 3000 p#two { clip: rect(5px, 55px, 45px, 5px); }</code></pre>
dschulze@451 3001
dschulze@451 3002 <p> and assuming both Ps are 50 by 55 pixel, will create, respectively,
dschulze@451 3003 the rectangular clipping regions delimited by the dashed lines in the
dschulze@451 3004 following illustrations:
dschulze@451 3005
dschulze@451 3006 <div class=figure> <img alt="Values for rect shape" height=577
dschulze@451 3007 src="images/clip.png" width=292>
dschulze@451 3008 <p class=caption>This diagram illustrates two block boxes, one above the
dschulze@451 3009 other, with rectangular clipping regions of different dimensions. (See
dschulze@451 3010 <a href="http://www.w3.org/TR/CSS2/images/longdesc/clip-desc.html">long
dschulze@451 3011 description</a>.)
dschulze@451 3012 </div>
dschulze@451 3013 </div>
dschulze@451 3014
dschulze@551 3015 <h3 id=ClipPathElement><span class=secno>8.4. </span>The <a
dschulze@551 3016 class=element-name href="#ClipPathElement">‘<code
dschulze@551 3017 class=property>clipPath</code>’</a> element</h3>
dschulze@551 3018
dschulze@551 3019 <table class=propdef summary="clipPath element">
dschulze@551 3020 <tbody>
dschulze@551 3021 <tr>
dschulze@551 3022 <th>Name:
dschulze@551 3023
dschulze@551 3024 <td><dfn id=clippath>clipPath</dfn>
dschulze@551 3025
dschulze@551 3026 <tr>
dschulze@551 3027 <th>Categories:
dschulze@551 3028
dschulze@551 3029 <td>None.
dschulze@551 3030
dschulze@551 3031 <tr>
dschulze@551 3032 <th>Content model:
dschulze@551 3033
dschulze@551 3034 <td>Any number of the following elements, in any order:
dschulze@551 3035 <ul class=no-bullets>
dschulze@551 3036 <li><a
dschulze@551 3037 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/intro.html#TermDescriptiveElement">descriptive</a>
dschulze@551 3038 <span class=expanding> — <a
dschulze@551 3039 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/struct.html#DescElement"><span
dschulze@551 3040 class=element-name>‘desc’</span></a>, <a
dschulze@551 3041 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/struct.html#TitleElement"><span
dschulze@551 3042 class=element-name>‘title’</span></a>, <a
dschulze@551 3043 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/metadata.html#MetadataElement"><span
dschulze@551 3044 class=element-name>‘metadata’</span></a></span>
dschulze@551 3045
dschulze@551 3046 <li><a
dschulze@551 3047 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/intro.html#TermAnimationElement">animation</a>
dschulze@551 3048 <span class=expanding> — <a
dschulze@551 3049 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/animate.html#AnimateElement"><span
dschulze@551 3050 class=element-name>‘animate’</span></a>, <a
dschulze@551 3051 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/animate.html#AnimateColorElement"><span
dschulze@551 3052 class=element-name>‘animateColor’</span></a>, <a
dschulze@551 3053 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/animate.html#AnimateMotionElement"><span
dschulze@551 3054 class=element-name>‘animateMotion’</span></a>, <a
dschulze@551 3055 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/animate.html#AnimateTransformElement"><span
dschulze@551 3056 class=element-name>‘animateTransform’</span></a>, <a
dschulze@551 3057 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/animate.html#SetElement"><span
dschulze@551 3058 class=element-name>‘set’</span></a></span>
dschulze@551 3059
dschulze@551 3060 <li><a
dschulze@551 3061 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/intro.html#TermShapeElement">shape</a>
dschulze@551 3062 <span class=expanding> — <a
dschulze@551 3063 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/shapes.html#CircleElement"><span
dschulze@551 3064 class=element-name>‘circle’</span></a>, <a
dschulze@551 3065 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/shapes.html#EllipseElement"><span
dschulze@551 3066 class=element-name>‘ellipse’</span></a>, <a
dschulze@551 3067 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/shapes.html#LineElement"><span
dschulze@551 3068 class=element-name>‘line’</span></a>, <a
dschulze@551 3069 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/paths.html#PathElement"><span
dschulze@551 3070 class=element-name>‘path’</span></a>, <a
dschulze@551 3071 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/shapes.html#PolygonElement"><span
dschulze@551 3072 class=element-name>‘polygon’</span></a>, <a
dschulze@551 3073 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/shapes.html#PolylineElement"><span
dschulze@551 3074 class=element-name>‘polyline’</span></a>, <a
dschulze@551 3075 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/shapes.html#RectElement"><span
dschulze@551 3076 class=element-name>‘rect’</span></a></span>
dschulze@551 3077
dschulze@551 3078 <li><a
dschulze@551 3079 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/text.html#TextElement"><span
dschulze@551 3080 class=element-name>‘text’</span></a>
dschulze@551 3081
dschulze@551 3082 <li><a
dschulze@551 3083 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/struct.html#UseElement"><span
dschulze@551 3084 class=element-name>‘use’</span></a>
dschulze@551 3085 </ul>
dschulze@551 3086
dschulze@551 3087 <tr>
dschulze@551 3088 <th>Attributes:
dschulze@551 3089
dschulze@551 3090 <td>
dschulze@551 3091 <ul class=no-bullets>
dschulze@551 3092 <li><a
dschulze@551 3093 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/intro.html#TermConditionalProcessingAttribute">conditional
dschulze@551 3094 processing attributes</a><span class=expanding> — <a
dschulze@551 3095 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/struct.html#RequiredFeaturesAttribute"><span
dschulze@551 3096 class=attr-name>‘requiredFeatures’</span></a>, <a
dschulze@551 3097 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/struct.html#RequiredExtensionsAttribute"><span
dschulze@551 3098 class=attr-name>‘requiredExtensions’</span></a>, <a
dschulze@551 3099 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/struct.html#SystemLanguageAttribute"><span
dschulze@551 3100 class=attr-name>‘systemLanguage’</span></a></span>
dschulze@551 3101
dschulze@551 3102 <li><a
dschulze@551 3103 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/intro.html#TermCoreAttributes">core
dschulze@551 3104 attributes</a><span class=expanding> — <a
dschulze@551 3105 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/struct.html#IDAttribute"><span
dschulze@551 3106 class=attr-name>‘id’</span></a>, <a
dschulze@551 3107 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/struct.html#XMLBaseAttribute"><span
dschulze@551 3108 class=attr-name>‘xml:base’</span></a>, <a
dschulze@551 3109 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/struct.html#XMLLangAttribute"><span
dschulze@551 3110 class=attr-name>‘xml:lang’</span></a>, <a
dschulze@551 3111 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/struct.html#XMLSpaceAttribute"><span
dschulze@551 3112 class=attr-name>‘xml:space’</span></a></span>
dschulze@551 3113
dschulze@551 3114 <li><a
dschulze@551 3115 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/intro.html#TermPresentationAttribute">presentation
dschulze@551 3116 attributes</a><span class=expanding> — <a
dschulze@551 3117 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/text.html#AlignmentBaselineProperty"><span
dschulze@551 3118 class=attr-name>‘alignment-baseline’</span></a>, <a
dschulze@551 3119 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/text.html#BaselineShiftProperty"><span
dschulze@551 3120 class=attr-name>‘baseline-shift’</span></a>, <a
dschulze@551 3121 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/masking.html#ClipProperty"><span
dschulze@551 3122 class=attr-name>‘clip’</span></a>, <a
dschulze@551 3123 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/masking.html#ClipPathProperty"><span
dschulze@551 3124 class=attr-name>‘clip-path’</span></a>, <a
dschulze@551 3125 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/masking.html#ClipRuleProperty"><span
dschulze@551 3126 class=attr-name>‘clip-rule’</span></a>, <a
dschulze@551 3127 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/color.html#ColorProperty"><span
dschulze@551 3128 class=attr-name>‘color’</span></a>, <a
dschulze@551 3129 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/painting.html#ColorInterpolationProperty"><span
dschulze@551 3130 class=attr-name>‘color-interpolation’</span></a>, <a
dschulze@551 3131 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/painting.html#ColorInterpolationFiltersProperty"><span
dschulze@551 3132 class=attr-name>‘color-interpolation-filters’</span></a>, <a
dschulze@551 3133 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/color.html#ColorProfileProperty"><span
dschulze@551 3134 class=attr-name>‘color-profile’</span></a>, <a
dschulze@551 3135 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/painting.html#ColorRenderingProperty"><span
dschulze@551 3136 class=attr-name>‘color-rendering’</span></a>, <a
dschulze@551 3137 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/interact.html#CursorProperty"><span
dschulze@551 3138 class=attr-name>‘cursor’</span></a>, <a
dschulze@551 3139 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/text.html#DirectionProperty"><span
dschulze@551 3140 class=attr-name>‘direction’</span></a>, <a
dschulze@551 3141 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/painting.html#DisplayProperty"><span
dschulze@551 3142 class=attr-name>‘display’</span></a>, <a
dschulze@551 3143 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/text.html#DominantBaselineProperty"><span
dschulze@551 3144 class=attr-name>‘dominant-baseline’</span></a>, <a
dschulze@551 3145 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/filters.html#EnableBackgroundProperty"><span
dschulze@551 3146 class=attr-name>‘enable-background’</span></a>, <a
dschulze@551 3147 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/painting.html#FillProperty"><span
dschulze@551 3148 class=attr-name>‘fill’</span></a>, <a
dschulze@551 3149 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/painting.html#FillOpacityProperty"><span
dschulze@551 3150 class=attr-name>‘fill-opacity’</span></a>, <a
dschulze@551 3151 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/painting.html#FillRuleProperty"><span
dschulze@551 3152 class=attr-name>‘fill-rule’</span></a>, <a
dschulze@551 3153 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/filters.html#FilterProperty"><span
dschulze@551 3154 class=attr-name>‘filter’</span></a>, <a
dschulze@551 3155 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/filters.html#FloodColorProperty"><span
dschulze@551 3156 class=attr-name>‘flood-color’</span></a>, <a
dschulze@551 3157 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/filters.html#FloodOpacityProperty"><span
dschulze@551 3158 class=attr-name>‘flood-opacity’</span></a>, <a
dschulze@551 3159 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/text.html#FontProperty"><span
dschulze@551 3160 class=attr-name>‘font’</span></a>, <a
dschulze@551 3161 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/text.html#FontFamilyProperty"><span
dschulze@551 3162 class=attr-name>‘font-family’</span></a>, <a
dschulze@551 3163 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/text.html#FontSizeProperty"><span
dschulze@551 3164 class=attr-name>‘font-size’</span></a>, <a
dschulze@551 3165 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/text.html#FontSizeAdjustProperty"><span
dschulze@551 3166 class=attr-name>‘font-size-adjust’</span></a>, <a
dschulze@551 3167 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/text.html#FontStretchProperty"><span
dschulze@551 3168 class=attr-name>‘font-stretch’</span></a>, <a
dschulze@551 3169 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/text.html#FontStyleProperty"><span
dschulze@551 3170 class=attr-name>‘font-style’</span></a>, <a
dschulze@551 3171 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/text.html#FontVariantProperty"><span
dschulze@551 3172 class=attr-name>‘font-variant’</span></a>, <a
dschulze@551 3173 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/text.html#FontWeightProperty"><span
dschulze@551 3174 class=attr-name>‘font-weight’</span></a>, <a
dschulze@551 3175 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/text.html#GlyphOrientationHorizontalProperty"><span
dschulze@551 3176 class=attr-name>‘glyph-orientation-horizontal’</span></a>, <a
dschulze@551 3177 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/text.html#GlyphOrientationVerticalProperty"><span
dschulze@551 3178 class=attr-name>‘glyph-orientation-vertical’</span></a>, <a
dschulze@551 3179 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/painting.html#ImageRenderingProperty"><span
dschulze@551 3180 class=attr-name>‘image-rendering’</span></a>, <a
dschulze@551 3181 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/text.html#KerningProperty"><span
dschulze@551 3182 class=attr-name>‘kerning’</span></a>, <a
dschulze@551 3183 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/text.html#LetterSpacingProperty"><span
dschulze@551 3184 class=attr-name>‘letter-spacing’</span></a>, <a
dschulze@551 3185 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/filters.html#LightingColorProperty"><span
dschulze@551 3186 class=attr-name>‘lighting-color’</span></a>, <a
dschulze@551 3187 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/painting.html#MarkerProperty"><span
dschulze@551 3188 class=attr-name>‘marker’</span></a>, <a
dschulze@551 3189 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/painting.html#MarkerEndProperty"><span
dschulze@551 3190 class=attr-name>‘marker-end’</span></a>, <a
dschulze@551 3191 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/painting.html#MarkerMidProperty"><span
dschulze@551 3192 class=attr-name>‘marker-mid’</span></a>, <a
dschulze@551 3193 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/painting.html#MarkerStartProperty"><span
dschulze@551 3194 class=attr-name>‘marker-start’</span></a>, <a
dschulze@551 3195 href="#MaskProperty"><span class=attr-name>‘mask’</span></a>, <a
dschulze@551 3196 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/masking.html#OpacityProperty"><span
dschulze@551 3197 class=attr-name>‘opacity’</span></a>, <a
dschulze@551 3198 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/masking.html#OverflowProperty"><span
dschulze@551 3199 class=attr-name>‘overflow’</span></a>, <a
dschulze@551 3200 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/interact.html#PointerEventsProperty"><span
dschulze@551 3201 class=attr-name>‘pointer-events’</span></a>, <a
dschulze@551 3202 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/painting.html#ShapeRenderingProperty"><span
dschulze@551 3203 class=attr-name>‘shape-rendering’</span></a>, <a
dschulze@551 3204 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/pservers.html#StopColorProperty"><span
dschulze@551 3205 class=attr-name>‘stop-color’</span></a>, <a
dschulze@551 3206 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/pservers.html#StopOpacityProperty"><span
dschulze@551 3207 class=attr-name>‘stop-opacity’</span></a>, <a
dschulze@551 3208 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/painting.html#StrokeProperty"><span
dschulze@551 3209 class=attr-name>‘stroke’</span></a>, <a
dschulze@551 3210 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/painting.html#StrokeDasharrayProperty"><span
dschulze@551 3211 class=attr-name>‘stroke-dasharray’</span></a>, <a
dschulze@551 3212 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/painting.html#StrokeDashoffsetProperty"><span
dschulze@551 3213 class=attr-name>‘stroke-dashoffset’</span></a>, <a
dschulze@551 3214 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/painting.html#StrokeLinecapProperty"><span
dschulze@551 3215 class=attr-name>‘stroke-linecap’</span></a>, <a
dschulze@551 3216 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/painting.html#StrokeLinejoinProperty"><span
dschulze@551 3217 class=attr-name>‘stroke-linejoin’</span></a>, <a
dschulze@551 3218 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/painting.html#StrokeMiterlimitProperty"><span
dschulze@551 3219 class=attr-name>‘stroke-miterlimit’</span></a>, <a
dschulze@551 3220 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/painting.html#StrokeOpacityProperty"><span
dschulze@551 3221 class=attr-name>‘stroke-opacity’</span></a>, <a
dschulze@551 3222 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/painting.html#StrokeWidthProperty"><span
dschulze@551 3223 class=attr-name>‘stroke-width’</span></a>, <a
dschulze@551 3224 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/text.html#TextAnchorProperty"><span
dschulze@551 3225 class=attr-name>‘text-anchor’</span></a>, <a
dschulze@551 3226 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/text.html#TextDecorationProperty"><span
dschulze@551 3227 class=attr-name>‘text-decoration’</span></a>, <a
dschulze@551 3228 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/painting.html#TextRenderingProperty"><span
dschulze@551 3229 class=attr-name>‘text-rendering’</span></a>, <a
dschulze@551 3230 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/text.html#UnicodeBidiProperty"><span
dschulze@551 3231 class=attr-name>‘unicode-bidi’</span></a>, <a
dschulze@551 3232 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/painting.html#VisibilityProperty"><span
dschulze@551 3233 class=attr-name>‘visibility’</span></a>, <a
dschulze@551 3234 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/text.html#WordSpacingProperty"><span
dschulze@551 3235 class=attr-name>‘word-spacing’</span></a>, <a
dschulze@551 3236 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/text.html#WritingModeProperty"><span
dschulze@551 3237 class=attr-name>‘writing-mode’</span></a></span>
dschulze@551 3238
dschulze@551 3239 <li><a
dschulze@551 3240 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/styling.html#ClassAttribute"><span
dschulze@551 3241 class=attr-name>‘class’</span></a>
dschulze@551 3242
dschulze@551 3243 <li><a
dschulze@551 3244 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/styling.html#StyleAttribute"><span
dschulze@551 3245 class=attr-name>‘style’</span></a>
dschulze@551 3246
dschulze@551 3247 <li><a
dschulze@551 3248 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/struct.html#ExternalResourcesRequiredAttribute"><span
dschulze@551 3249 class=attr-name>‘externalResourcesRequired’</span></a>
dschulze@551 3250
dschulze@551 3251 <li><a
dschulze@551 3252 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/coords.html#TransformAttribute"><span
dschulze@551 3253 class=attr-name>‘transform’</span></a>
dschulze@551 3254
dschulze@551 3255 <li><a href="#ClipPathElementClipPathUnitsAttribute"><span
dschulze@551 3256 class=attr-name>‘clipPathUnits’</span></a>
dschulze@551 3257 </ul>
dschulze@551 3258
dschulze@551 3259 <tr>
dschulze@551 3260 <th>DOM Interfaces:
dschulze@551 3261
dschulze@551 3262 <td><a class=idlinterface
dschulze@551 3263 href="#InterfaceSVGClipPathElement">SVGClipPathElement</a>
dschulze@551 3264 </table>
dschulze@298 3265
dschulze@298 3266 <div class=adef-list>
dschulze@427 3267 <p><em>Attribute definitions:</em>
dschulze@298 3268
dschulze@298 3269 <dl>
dschulze@298 3270 <dt id=ClipPathElementClipPathUnitsAttribute><span
dschulze@298 3271 class=adef>clipPathUnits</span> = "<em>userSpaceOnUse</em> |
dschulze@298 3272 <em>objectBoundingBox</em>"
dschulze@298 3273
dschulze@551 3274 <dd>Defines the coordinate system for the contents of the <a
dschulze@551 3275 class=element-name href="#ClipPathElement">‘<code
dschulze@298 3276 class=property>clipPath</code>’</a>.<br>
dschulze@298 3277 If <span class=attr-value>clipPathUnits="userSpaceOnUse"</span>, the
dschulze@551 3278 contents of the <a class=element-name href="#ClipPathElement">‘<code
dschulze@551 3279 class=property>clipPath</code>’</a> represent values in the current
dschulze@551 3280 user coordinate system in place at the time when the <a
dschulze@551 3281 class=element-name href="#ClipPathElement">‘<code
dschulze@551 3282 class=property>clipPath</code>’</a> element is referenced (i.e., the
dschulze@551 3283 user coordinate system for the element referencing the <a
dschulze@551 3284 class=element-name href="#ClipPathElement">‘<code
dschulze@551 3285 class=property>clipPath</code>’</a> element via the <a class=property
dschulze@551 3286 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/masking.html#ClipPathProperty">‘<code
dschulze@551 3287 class=property>clip-path</code>’</a> property).<br>
dschulze@298 3288 If <span class=attr-value>clipPathUnits="objectBoundingBox"</span>, then
dschulze@551 3289 the user coordinate system for the contents of the <a class=element-name
dschulze@551 3290 href="#ClipPathElement">‘<code class=property>clipPath</code>’</a>
dschulze@551 3291 element is established using the bounding box of the element to which
dschulze@551 3292 the clipping path is applied (see <a class=index
dschulze@551 3293 href="#object-bounding-box-units" id=object-bounding-box-units0>object
dschulze@551 3294 bounding box units</a>).<br>
dschulze@551 3295 If attribute <a class=attr-name
dschulze@551 3296 href="#ClipPathElementClipPathUnitsAttribute">‘<code
dschulze@551 3297 class=property>clipPathUnits</code>’</a> is not specified, then the
dschulze@551 3298 effect is as if a value of <span class=attr-value>‘<code
dschulze@551 3299 class=property>userSpaceOnUse</code>’</span> were specified.<br>
dschulze@343 3300 <span class=anim-target>Animatable: yes.</span>
dschulze@298 3301 </dl>
dschulze@298 3302 </div>
dschulze@298 3303
dschulze@551 3304 <p>CSS properties inherit into the <a class=element-name
dschulze@551 3305 href="#ClipPathElement">‘<code class=property>clipPath</code>’</a>
dschulze@551 3306 element from its ancestors; properties do <em>not</em> inherit from the
dschulze@551 3307 element referencing the <a class=element-name
dschulze@551 3308 href="#ClipPathElement">‘<code class=property>clipPath</code>’</a>
dschulze@551 3309 element.
dschulze@551 3310
dschulze@551 3311 <p><a class=element-name href="#ClipPathElement">‘<code
dschulze@551 3312 class=property>clipPath</code>’</a> elements are never rendered
dschulze@551 3313 directly; their only usage is as something that can be referenced using
dschulze@551 3314 the <a class=property
dschulze@551 3315 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/masking.html#ClipPathProperty">‘<code
dschulze@551 3316 class=property>clip-path</code>’</a> property. The <a class=property
dschulze@551 3317 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/painting.html#DisplayProperty">‘<code
dschulze@551 3318 class=property>display</code>’</a> property does not apply to the <a
dschulze@551 3319 class=element-name href="#ClipPathElement">‘<code
dschulze@551 3320 class=property>clipPath</code>’</a> element; thus, <a class=element-name
dschulze@551 3321 href="#ClipPathElement">‘<code class=property>clipPath</code>’</a>
dschulze@551 3322 elements are not directly rendered even if the ‘<code
dschulze@551 3323 class=property>display</code>’ property is set to a value other than <a
dschulze@551 3324 class=prop-value href="#none">none</a>, and <a class=element-name
dschulze@551 3325 href="#ClipPathElement">‘<code class=property>clipPath</code>’</a>
dschulze@551 3326 elements are available for referencing even when the <a class=property
dschulze@551 3327 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/painting.html#DisplayProperty">‘<code
dschulze@551 3328 class=property>display</code>’</a> property on the <a class=element-name
dschulze@551 3329 href="#ClipPathElement">‘<code class=property>clipPath</code>’</a>
dschulze@551 3330 element or any of its ancestors is set to <a class=prop-value
dschulze@344 3331 href="#none">none</a>.
dschulze@298 3332
dschulze@551 3333 <p>A <a class=element-name href="#ClipPathElement">‘<code
dschulze@551 3334 class=property>clipPath</code>’</a> element can contain <a
dschulze@551 3335 class=element-name
dschulze@551 3336 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/paths.html#PathElement">‘<code
dschulze@551 3337 class=property>path</code>’</a> elements, <a class=element-name
dschulze@551 3338 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/text.html#TextElement">‘<code
dschulze@551 3339 class=property>text</code>’</a> elements, <a
dschulze@551 3340 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/intro.html#TermBasicShapeElement">basic
dschulze@551 3341 shapes</a> (such as <a class=element-name
dschulze@551 3342 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/shapes.html#CircleElement">‘<code
dschulze@551 3343 class=property>circle</code>’</a>) or a <a class=element-name
dschulze@551 3344 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/struct.html#UseElement">‘<code
dschulze@551 3345 class=property>use</code>’</a> element. If a <a class=element-name
dschulze@551 3346 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/struct.html#UseElement">‘<code
dschulze@551 3347 class=property>use</code>’</a> element is a child of a <a
dschulze@551 3348 class=element-name href="#ClipPathElement">‘<code
dschulze@298 3349 class=property>clipPath</code>’</a> element, it must directly reference
dschulze@551 3350 <a class=element-name
dschulze@551 3351 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/paths.html#PathElement">‘<code
dschulze@551 3352 class=property>path</code>’</a>, <a class=element-name
dschulze@551 3353 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/text.html#TextElement">‘<code
dschulze@551 3354 class=property>text</code>’</a> or <a
dschulze@551 3355 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/intro.html#TermBasicShapeElement">basic
dschulze@551 3356 shapes</a> elements. Indirect references are an error and the <a
dschulze@551 3357 class=element-name href="#ClipPathElement">‘<code
dschulze@451 3358 class=property>clipPath</code>’</a> element must be ignored.
dschulze@298 3359
dschulze@298 3360 <p>The raw geometry of each child element exclusive of rendering properties
dschulze@659 3361 such as ‘<code class=property>fill</code>’, ‘<code
dschulze@298 3362 class=property>stroke</code>’, ‘<code
dschulze@551 3363 class=property>stroke-width</code>’ within a <a class=element-name
dschulze@551 3364 href="#ClipPathElement">‘<code class=property>clipPath</code>’</a>
dschulze@551 3365 conceptually defines a 1-bit mask (with the possible exception of
dschulze@551 3366 anti-aliasing along the edge of the geometry) which represents the
dschulze@551 3367 silhouette of the graphics associated with that element. Anything outside
dschulze@551 3368 the outline of the object is masked out. If a child element is made
dschulze@551 3369 invisible by ‘<code class=property>display</code>’ or ‘<code
dschulze@298 3370 class=property>visibility</code>’ it does not contribute to the clipping
dschulze@551 3371 path. When the <a class=element-name href="#ClipPathElement">‘<code
dschulze@551 3372 class=property>clipPath</code>’</a> element contains multiple child
dschulze@551 3373 elements, the silhouettes of the child elements are logically OR'd
dschulze@551 3374 together to create a single silhouette which is then used to restrict the
dschulze@551 3375 region onto which paint can be applied. Thus, a point is inside the
dschulze@551 3376 clipping path if it is inside any of the children of the <a
dschulze@551 3377 class=element-name href="#ClipPathElement">‘<code
dschulze@551 3378 class=property>clipPath</code>’</a>.
dschulze@298 3379
dschulze@298 3380 <p>For a given graphics element, the actual clipping path used will be the
dschulze@298 3381 intersection of the clipping path specified by its ‘<a
dschulze@298 3382 href="#clip-path"><code class=property>clip-path</code></a>’ property
dschulze@298 3383 (if any) with any clipping paths on its ancestors, as specified by the
dschulze@298 3384 ‘<a href="#clip-path"><code class=property>clip-path</code></a>’
dschulze@343 3385 property on the elements which establish a new viewport. (See <a
dschulze@343 3386 href="#SVG11" rel=biblioentry>[SVG11]<!--{{SVG11}}--></a>)
dschulze@298 3387
dschulze@734 3388 <p>A couple of additions:
dschulze@734 3389
dschulze@734 3390 <ul>
dschulze@734 3391 <li>The <a class=element-name href="#ClipPathElement">‘<code
dschulze@734 3392 class=property>clipPath</code>’</a> element itself and its child
dschulze@734 3393 elements do <em>not</em> inherit clipping paths from the ancestors of the
dschulze@734 3394 <a class=element-name href="#ClipPathElement">‘<code
dschulze@734 3395 class=property>clipPath</code>’</a> element.
dschulze@734 3396
dschulze@734 3397 <li>The <a class=element-name href="#ClipPathElement">‘<code
dschulze@734 3398 class=property>clipPath</code>’</a> element or any of its children can
dschulze@734 3399 specify property ‘<a href="#clip-path"><code
dschulze@734 3400 class=property>clip-path</code></a>’.<br>
dschulze@734 3401 If a valid ‘<a href="#clip-path"><code
dschulze@734 3402 class=property>clip-path</code></a>’ reference is placed on a <a
dschulze@734 3403 class=element-name href="#ClipPathElement">‘<code
dschulze@734 3404 class=property>clipPath</code>’</a> element, the resulting clipping
dschulze@734 3405 path is the intersection of the contents of the <a class=element-name
dschulze@734 3406 href="#ClipPathElement">‘<code class=property>clipPath</code>’</a>
dschulze@734 3407 element with the referenced clipping path.<br>
dschulze@734 3408 If a valid ‘<a href="#clip-path"><code
dschulze@734 3409 class=property>clip-path</code></a>’ reference is placed on one of the
dschulze@734 3410 children of a <a class=element-name href="#ClipPathElement">‘<code
dschulze@734 3411 class=property>clipPath</code>’</a> element, then the given child
dschulze@734 3412 element is clipped by the referenced clipping path before OR'ing the
dschulze@734 3413 silhouette of the child element with the silhouettes of the other child
dschulze@734 3414 elements.
dschulze@734 3415
dschulze@734 3416 <li>An empty clipping path will completely clip away the element that had
dschulze@734 3417 the ‘<a href="#clip-path"><code class=property>clip-path</code></a>’
dschulze@734 3418 property applied.
dschulze@734 3419 </ul>
dschulze@298 3420
dschulze@451 3421 <h3 id=clipPath-geometry><span class=secno>8.5. </span>Clipping paths,
dschulze@298 3422 geometry, and pointer events</h3>
dschulze@298 3423
dschulze@298 3424 <p>A clipping path is conceptually equivalent to a custom viewport for the
dschulze@298 3425 referencing element. Thus, it affects the rendering of an element, but not
dschulze@298 3426 the element's inherent geometry. The <a class=index
dschulze@552 3427 href="#bounding-client-rect" id=bounding-client-rect2>bounding client
dschulze@551 3428 rect</a> of a clipped element (that is, an element which references a <a
dschulze@551 3429 class=element-name href="#ClipPathElement">‘<code
dschulze@551 3430 class=property>clipPath</code>’</a> element via a ‘<a
dschulze@298 3431 href="#clip-path"><code class=property>clip-path</code></a>’ property,
dschulze@298 3432 or a child of the referencing element) must remain the same as if it were
dschulze@298 3433 not clipped.
dschulze@298 3434
dschulze@551 3435 <p>By default, <a
dschulze@551 3436 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/interact.html#PointerEventsProperty">pointer
dschulze@551 3437 events</a> must not be dispatched on the clipped (non-visible) regions of
dschulze@551 3438 a shape. For example, a circle with a radius of 10 which is clipped to a
dschulze@551 3439 circle with a radius of 5 will not receive <span class=event-name>‘<code
dschulze@551 3440 class=property>click</code>’</span> events outside the smaller radius.
dschulze@551 3441 Later versions of this specification may define new properties to enable
dschulze@551 3442 fine-grained control over the interactions between hit testing and
dschulze@551 3443 clipping.
dschulze@298 3444
dschulze@473 3445 <h2 id=security><span class=secno>9. </span>Security</h2>
dschulze@473 3446
dschulze@473 3447 <h3 id=origin-restrictions><span class=secno>9.1. </span>Origin
dschulze@473 3448 Restrictions</h3>
dschulze@473 3449
dschulze@551 3450 <p> External references to resources like <a class=element-name
dschulze@551 3451 href="#MaskElement">‘<code class=property>mask</code>’</a> or <a
dschulze@551 3452 class=element-name href="#ClipPathElement">‘<code
dschulze@551 3453 class=property>clipPath</code>’</a> must not violate the same origin
dschulze@551 3454 restrictions <a href="#CORS" rel=biblioentry>[CORS]<!--{{!CORS}}--></a>.
dschulze@473 3455
dschulze@473 3456 <p>This restriction includes:
dschulze@473 3457
dschulze@473 3458 <ul>
dschulze@473 3459 <li>Any images, either as content or via styling, that are not exposed
dschulze@473 3460 with CORS
dschulze@473 3461
dschulze@473 3462 <li>Any tainted canvas
dschulze@473 3463
dschulze@473 3464 <li>Any cross-origin content referenced by ‘<code
dschulze@473 3465 class=css>xlink:href</code>’ or &lt;use&gt;
dschulze@473 3466 </ul>
dschulze@473 3467
dschulze@473 3468 <p> If content falls under this restriction, the resource must be rejected.
dschulze@473 3469 The element is drawn as if the resource was not specified (i.e. the ‘<a
dschulze@473 3470 href="#clip-path"><code class=property>clip-path</code></a>’ or ‘<a
dschulze@551 3471 href="#mask"><code class=property>mask</code></a>’ property were set to
dschulze@551 3472 ‘<a href="#none"><code class=css>none</code></a>’).
dschulze@473 3473
dschulze@473 3474 <h2 id=DOMInterfaces><span class=secno>10. </span>DOM interfaces</h2>
dschulze@473 3475
dschulze@473 3476 <h3 id=InterfaceSVGClipPathElement><span class=secno>10.1. </span>Interface
dschulze@462 3477 SVGClipPathElement</h3>
dschulze@464 3478
dschulze@551 3479 <p>The <a href="#InterfaceSVGClipPathElement">SVGClipPathElement</a>
dschulze@551 3480 interface corresponds to the <a class=element-name
dschulze@551 3481 href="#ClipPathElement">‘<code class=property>clipPath</code>’</a>
dschulze@551 3482 element.
dschulze@551 3483
dschulze@551 3484 <pre class=idl>interface <b>SVGClipPathElement</b> : <a
dschulze@628 3485 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/types.html#InterfaceSVGElement">SVGElement</a> {
dschulze@551 3486 readonly attribute <a
dschulze@551 3487 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/types.html#InterfaceSVGAnimatedEnumeration">SVGAnimatedEnumeration</a> <a
dschulze@470 3488 href="#SVGClipPathElement__clipPathUnits">clipPathUnits</a>;
dschulze@628 3489 readonly attribute <a
dschulze@628 3490 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/coords.html#InterfaceSVGAnimatedTransformList">SVGAnimatedTransformList</a> <a
dschulze@628 3491 href="#SVGClipPathElement__transform">transform</a>;
dschulze@470 3492 };
dschulze@470 3493
dschulze@551 3494 <a
dschulze@551 3495 href="#InterfaceSVGClipPathElement">SVGClipPathElement</a> implements <a
dschulze@551 3496 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/types.html#InterfaceSVGUnitTypes">SVGUnitTypes</a>;</pre>
dschulze@462 3497
dschulze@462 3498 <dl class=interface>
dschulze@462 3499 <dt class=attributes-header>Attributes:
dschulze@462 3500
dschulze@462 3501 <dd>
dschulze@462 3502 <dl class=attributes>
dschulze@462 3503 <dt class="attribute first-child"
dschulze@464 3504 id="SVGClipPathElement__clipPathUnits"><b>clipPathUnits</b><span
dschulze@551 3505 class=idl-type-parenthetical> (readonly <a
dschulze@551 3506 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/types.html#InterfaceSVGAnimatedEnumeration">SVGAnimatedEnumeration</a>)</span>
dschulze@462 3507
dschulze@462 3508 <dd class=attribute>
dschulze@551 3509 <div> Corresponds to attribute <a class=attr-name
dschulze@551 3510 href="#ClipPathElementClipPathUnitsAttribute">‘<code
dschulze@551 3511 class=property>clipPathUnits</code>’</a> on the given <a
dschulze@551 3512 class=element-name href="#ClipPathElement">‘<code
dschulze@462 3513 class=property>clipPath</code>’</a> element. Takes one of the
dschulze@551 3514 constants defined in <a
dschulze@551 3515 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/types.html#InterfaceSVGUnitTypes">SVGUnitTypes</a>.</div>
dschulze@628 3516
dschulze@628 3517 <dt class="attribute first-child"
dschulze@628 3518 id="SVGClipPathElement__transform"><b>transform</b><span
dschulze@628 3519 class=idl-type-parenthetical> (readonly <a
dschulze@628 3520 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/coords.html#InterfaceSVGAnimatedTransformList">SVGAnimatedTransformList</a>)</span>
dschulze@628 3521
dschulze@628 3522 <dd class=attribute>
dschulze@628 3523 <div> Corresponds to attribute <a class=attr-name
dschulze@628 3524 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/coords.html#TransformAttribute">‘<code
dschulze@628 3525 class=property>transform</code>’</a> on the given element.</div>
dschulze@462 3526 </dl>
dschulze@462 3527 </dl>
dschulze@464 3528
dschulze@473 3529 <h3 id=InterfaceSVGMaskElement><span class=secno>10.2. </span>Interface
dschulze@462 3530 SVGMaskElement</h3>
dschulze@464 3531
dschulze@551 3532 <p>The <a href="#InterfaceSVGMaskElement">SVGMaskElement</a> interface
dschulze@551 3533 corresponds to the <a class=element-name href="#MaskElement">‘<code
dschulze@551 3534 class=property>mask</code>’</a> element.
dschulze@551 3535
dschulze@551 3536 <pre class=idl>interface <b>SVGMaskElement</b> : <a
dschulze@619 3537 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/types.html#InterfaceSVGElement">SVGElement</a> {
dschulze@551 3538 readonly attribute <a
dschulze@551 3539 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/types.html#InterfaceSVGAnimatedEnumeration">SVGAnimatedEnumeration</a> <a
dschulze@470 3540 href="#SVGMaskElement__maskUnits">maskUnits</a>;
dschulze@551 3541 readonly attribute <a
dschulze@551 3542 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/types.html#InterfaceSVGAnimatedEnumeration">SVGAnimatedEnumeration</a> <a
dschulze@470 3543 href="#SVGMaskElement__maskContentUnits">maskContentUnits</a>;
dschulze@551 3544 readonly attribute <a
dschulze@551 3545 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/types.html#InterfaceSVGAnimatedLength">SVGAnimatedLength</a> <a
dschulze@470 3546 href="#SVGMaskElement__x">x</a>;
dschulze@551 3547 readonly attribute <a
dschulze@551 3548 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/types.html#InterfaceSVGAnimatedLength">SVGAnimatedLength</a> <a
dschulze@470 3549 href="#SVGMaskElement__y">y</a>;
dschulze@551 3550 readonly attribute <a
dschulze@551 3551 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/types.html#InterfaceSVGAnimatedLength">SVGAnimatedLength</a> <a
dschulze@470 3552 href="#SVGMaskElement__width">width</a>;
dschulze@551 3553 readonly attribute <a
dschulze@551 3554 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/types.html#InterfaceSVGAnimatedLength">SVGAnimatedLength</a> <a
dschulze@470 3555 href="#SVGMaskElement__height">height</a>;
dschulze@470 3556 };
dschulze@470 3557
dschulze@551 3558 <a
dschulze@551 3559 href="#InterfaceSVGMaskElement">SVGMaskElement</a> implements <a
dschulze@551 3560 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/types.html#InterfaceSVGUnitTypes">SVGUnitTypes</a>;</pre>
dschulze@462 3561
dschulze@462 3562 <dl class=interface>
dschulze@462 3563 <dt class=attributes-header>Attributes:
dschulze@462 3564
dschulze@462 3565 <dd>
dschulze@462 3566 <dl class=attributes>
dschulze@462 3567 <dt class="attribute first-child"
dschulze@464 3568 id="SVGMaskElement__maskUnits"><b>maskUnits</b><span
dschulze@551 3569 class=idl-type-parenthetical> (readonly <a
dschulze@551 3570 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/types.html#InterfaceSVGAnimatedEnumeration">SVGAnimatedEnumeration</a>)</span>
dschulze@462 3571
dschulze@462 3572 <dd class=attribute>
dschulze@551 3573 <div> Corresponds to attribute <a class=attr-name
dschulze@551 3574 href="#MaskElementMaskUnitsAttribute">‘<code
dschulze@551 3575 class=property>maskUnits</code>’</a> on the given <a
dschulze@551 3576 class=element-name href="#MaskElement">‘<code
dschulze@551 3577 class=property>mask</code>’</a> element. Takes one of the constants
dschulze@551 3578 defined in <a
dschulze@551 3579 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/types.html#InterfaceSVGUnitTypes">SVGUnitTypes</a>.</div>
dschulze@462 3580
dschulze@462 3581 <dt class=attribute
dschulze@464 3582 id="SVGMaskElement__maskContentUnits"><b>maskContentUnits</b><span
dschulze@551 3583 class=idl-type-parenthetical> (readonly <a
dschulze@551 3584 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/types.html#InterfaceSVGAnimatedEnumeration">SVGAnimatedEnumeration</a>)</span>
dschulze@462 3585
dschulze@462 3586 <dd class=attribute>
dschulze@551 3587 <div> Corresponds to attribute <a class=attr-name
dschulze@551 3588 href="#MaskElementMaskContentUnitsAttribute">‘<code
dschulze@551 3589 class=property>maskContentUnits</code>’</a> on the given <a
dschulze@551 3590 class=element-name href="#MaskElement">‘<code
dschulze@551 3591 class=property>mask</code>’</a> element. Takes one of the constants
dschulze@551 3592 defined in <a
dschulze@551 3593 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/types.html#InterfaceSVGUnitTypes">SVGUnitTypes</a>.</div>
dschulze@462 3594
dschulze@464 3595 <dt class=attribute id="SVGMaskElement__x"><b>x</b><span
dschulze@551 3596 class=idl-type-parenthetical> (readonly <a
dschulze@551 3597 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/types.html#InterfaceSVGAnimatedLength">SVGAnimatedLength</a>)</span>
dschulze@462 3598
dschulze@462 3599 <dd class=attribute>
dschulze@551 3600 <div> Corresponds to attribute <a class=attr-name
dschulze@551 3601 href="#MaskElementXAttribute">‘<code class=property>x</code>’</a>
dschulze@551 3602 on the given <a class=element-name href="#MaskElement">‘<code
dschulze@551 3603 class=property>mask</code>’</a> element.</div>
dschulze@462 3604
dschulze@464 3605 <dt class=attribute id="SVGMaskElement__y"><b>y</b><span
dschulze@551 3606 class=idl-type-parenthetical> (readonly <a
dschulze@551 3607 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/types.html#InterfaceSVGAnimatedLength">SVGAnimatedLength</a>)</span>
dschulze@462 3608
dschulze@462 3609 <dd class=attribute>
dschulze@551 3610 <div> Corresponds to attribute <a class=attr-name
dschulze@551 3611 href="#MaskElementYAttribute">‘<code class=property>y</code>’</a>
dschulze@551 3612 on the given <a class=element-name href="#MaskElement">‘<code
dschulze@551 3613 class=property>mask</code>’</a> element.</div>
dschulze@462 3614
dschulze@464 3615 <dt class=attribute id="SVGMaskElement__width"><b>width</b><span
dschulze@551 3616 class=idl-type-parenthetical> (readonly <a
dschulze@551 3617 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/types.html#InterfaceSVGAnimatedLength">SVGAnimatedLength</a>)</span>
dschulze@462 3618
dschulze@462 3619 <dd class=attribute>
dschulze@551 3620 <div> Corresponds to attribute <a class=attr-name
dschulze@551 3621 href="#MaskElementWidthAttribute">‘<code
dschulze@551 3622 class=property>width</code>’</a> on the given <a class=element-name
dschulze@551 3623 href="#MaskElement">‘<code class=property>mask</code>’</a>
dschulze@551 3624 element.</div>
dschulze@462 3625
dschulze@464 3626 <dt class=attribute id="SVGMaskElement__height"><b>height</b><span
dschulze@551 3627 class=idl-type-parenthetical> (readonly <a
dschulze@551 3628 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/types.html#InterfaceSVGAnimatedLength">SVGAnimatedLength</a>)</span>
dschulze@462 3629
dschulze@462 3630 <dd class=attribute>
dschulze@551 3631 <div> Corresponds to attribute <a class=attr-name
dschulze@551 3632 href="#MaskElementHeightAttribute">‘<code
dschulze@551 3633 class=property>height</code>’</a> on the given <a class=element-name
dschulze@551 3634 href="#MaskElement">‘<code class=property>mask</code>’</a>
dschulze@551 3635 element.</div>
dschulze@462 3636 </dl>
dschulze@462 3637 </dl>
dschulze@464 3638
dschulze@734 3639 <h2 id=conformance><span class=secno>11. </span> Conformance</h2>
dschulze@734 3640
dschulze@734 3641 <h3 id=conventions><span class=secno>11.1. </span> Document conventions</h3>
dschulze@734 3642
dschulze@734 3643 <p>Conformance requirements are expressed with a combination of descriptive
dschulze@734 3644 assertions and RFC 2119 terminology. The key words “MUST”, “MUST
dschulze@734 3645 NOT”, “REQUIRED”, “SHALL”, “SHALL NOT”, “SHOULD”,
dschulze@734 3646 “SHOULD NOT”, “RECOMMENDED”, “MAY”, and “OPTIONAL” in the
dschulze@734 3647 normative parts of this document are to be interpreted as described in RFC
dschulze@734 3648 2119. However, for readability, these words do not appear in all uppercase
dschulze@734 3649 letters in this specification.
dschulze@734 3650
dschulze@734 3651 <p>All of the text of this specification is normative except sections
dschulze@734 3652 explicitly marked as non-normative, examples, and notes. <a
dschulze@734 3653 href="#RFC2119" rel=biblioentry>[RFC2119]<!--{{!RFC2119}}--></a>
dschulze@734 3654
dschulze@734 3655 <p>Examples in this specification are introduced with the words “for
dschulze@734 3656 example” or are set apart from the normative text with
dschulze@734 3657 <code>class="example"</code>, like this:
dschulze@734 3658
dschulze@734 3659 <div class=example>
dschulze@734 3660 <p>This is an example of an informative example.
dschulze@734 3661 </div>
dschulze@734 3662
dschulze@734 3663 <p>Informative notes begin with the word “Note” and are set apart from
dschulze@734 3664 the normative text with <code>class="note"</code>, like this:
dschulze@734 3665
dschulze@734 3666 <p class=note>Note, this is an informative note.
dschulze@734 3667
dschulze@734 3668 <h3 id=conformance-classes><span class=secno>11.2. </span> Conformance
dschulze@734 3669 classes</h3>
dschulze@734 3670
dschulze@734 3671 <p>Conformance to CSS Masking is defined for three conformance classes:
dschulze@734 3672
dschulze@734 3673 <dl>
dschulze@734 3674 <dt><dfn id=style-sheet title="style sheet!!as conformance class">style
dschulze@734 3675 sheet</dfn>
dschulze@734 3676
dschulze@734 3677 <dd>A <a href="http://www.w3.org/TR/CSS21/conform.html#style-sheet">CSS
dschulze@734 3678 style sheet</a>.
dschulze@734 3679
dschulze@734 3680 <dt><dfn id=renderer>renderer</dfn>
dschulze@734 3681
dschulze@734 3682 <dd>A <a href="http://www.w3.org/TR/CSS21/conform.html#user-agent">UA</a>
dschulze@734 3683 that interprets the semantics of a style sheet and renders documents that
dschulze@734 3684 use them.
dschulze@734 3685
dschulze@734 3686 <dt><dfn id=authoring-tool>authoring tool</dfn>
dschulze@734 3687
dschulze@734 3688 <dd>A <a href="http://www.w3.org/TR/CSS21/conform.html#user-agent">UA</a>
dschulze@734 3689 that writes a style sheet.
dschulze@734 3690 </dl>
dschulze@734 3691
dschulze@734 3692 <p>A style sheet is conformant to CSS Masking if all of its statements that
dschulze@734 3693 use syntax defined in this module are valid according to the generic CSS
dschulze@734 3694 grammar and the individual grammars of each feature defined in this
dschulze@734 3695 module.
dschulze@734 3696
dschulze@734 3697 <p>A renderer is conformant to CSS Masking if, in addition to interpreting
dschulze@734 3698 the style sheet as defined by the appropriate specifications, it supports
dschulze@734 3699 all the features defined by CSS Masking by parsing them correctly and
dschulze@734 3700 rendering the document accordingly. However, the inability of a UA to
dschulze@734 3701 correctly render a document due to limitations of the device does not make
dschulze@734 3702 the UA non-conformant. (For example, a UA is not required to render color
dschulze@734 3703 on a monochrome monitor.)
dschulze@734 3704
dschulze@734 3705 <p>An authoring tool is conformant to CSS Masking if it writes style sheets
dschulze@734 3706 that are syntactically correct according to the generic CSS grammar and
dschulze@734 3707 the individual grammars of each feature in this module, and meet all other
dschulze@734 3708 conformance requirements of style sheets as described in this module.
dschulze@734 3709
dschulze@734 3710 <h3 id=partial><span class=secno>11.3. </span> Partial implementations</h3>
dschulze@734 3711
dschulze@734 3712 <p>So that authors can exploit the forward-compatible parsing rules to
dschulze@734 3713 assign fallback values, CSS renderers <strong>must</strong> treat as
dschulze@734 3714 invalid (and <a
dschulze@734 3715 href="http://www.w3.org/TR/CSS21/conform.html#ignore">ignore as
dschulze@734 3716 appropriate</a>) any at-rules, properties, property values, keywords, and
dschulze@734 3717 other syntactic constructs for which they have no usable level of support.
dschulze@734 3718 In particular, user agents <strong>must not</strong> selectively ignore
dschulze@734 3719 unsupported component values and honor supported values in a single
dschulze@734 3720 multi-value property declaration: if any value is considered invalid (as
dschulze@734 3721 unsupported values must be), CSS requires that the entire declaration be
dschulze@734 3722 ignored.
dschulze@734 3723
dschulze@734 3724 <h3 id=experimental><span class=secno>11.4. </span> Experimental
dschulze@734 3725 implementations</h3>
dschulze@734 3726
dschulze@734 3727 <p>To avoid clashes with future CSS features, the CSS2.1 specification
dschulze@734 3728 reserves a <a
dschulze@734 3729 href="http://www.w3.org/TR/CSS21/syndata.html#vendor-keywords">prefixed
dschulze@734 3730 syntax</a> for proprietary and experimental extensions to CSS.
dschulze@734 3731
dschulze@734 3732 <p>Prior to a specification reaching the Candidate Recommendation stage in
dschulze@734 3733 the W3C process, all implementations of a CSS feature are considered
dschulze@734 3734 experimental. The CSS Working Group recommends that implementations use a
dschulze@734 3735 vendor-prefixed syntax for such features, including those in W3C Working
dschulze@734 3736 Drafts. This avoids incompatibilities with future changes in the draft.
dschulze@734 3737
dschulze@734 3738 <h3 id=testing><span class=secno>11.5. </span> Non-experimental
dschulze@734 3739 implementations</h3>
dschulze@734 3740
dschulze@734 3741 <p>Once a specification reaches the Candidate Recommendation stage,
dschulze@734 3742 non-experimental implementations are possible, and implementors should
dschulze@734 3743 release an unprefixed implementation of any CR-level feature they can
dschulze@734 3744 demonstrate to be correctly implemented according to spec.
dschulze@734 3745
dschulze@734 3746 <p>To establish and maintain the interoperability of CSS across
dschulze@734 3747 implementations, the CSS Working Group requests that non-experimental CSS
dschulze@734 3748 renderers submit an implementation report (and, if necessary, the
dschulze@734 3749 testcases used for that implementation report) to the W3C before releasing
dschulze@734 3750 an unprefixed implementation of any CSS features. Testcases submitted to
dschulze@734 3751 W3C are subject to review and correction by the CSS Working Group.
dschulze@734 3752
dschulze@734 3753 <p>Further information on submitting testcases and implementation reports
dschulze@734 3754 can be found from on the CSS Working Group's website at <a
dschulze@734 3755 href="http://www.w3.org/Style/CSS/Test/">http://www.w3.org/Style/CSS/Test/</a>.
dschulze@734 3756 Questions should be directed to the <a
dschulze@734 3757 href="http://lists.w3.org/Archives/Public/public-css-testsuite">public-css-testsuite@w3.org</a>
dschulze@734 3758 mailing list.
dschulze@734 3759
dschulze@273 3760 <h2 class=no-num id=references> References</h2>
dschulze@273 3761
dschulze@273 3762 <h3 class=no-num id=normative-references> Normative references</h3>
dschulze@273 3763 <!--begin-normative-->
dschulze@273 3764 <!-- Sorted by label -->
dschulze@273 3765
dschulze@273 3766 <dl class=bibliography>
dschulze@273 3767 <dt style="display: none"><!-- keeps the doc valid if the DL is empty -->
dschulze@273 3768 <!---->
dschulze@273 3769
dschulze@473 3770 <dt id=CORS>[CORS]
dschulze@473 3771
dschulze@473 3772 <dd>Anne van Kesteren. <a
dschulze@659 3773 href="http://www.w3.org/TR/2013/CR-cors-20130129/"><cite>Cross-Origin
dschulze@659 3774 Resource Sharing.</cite></a> 29 January 2013. W3C Candidate
dschulze@659 3775 Recommendation. (Work in progress.) URL: <a
dschulze@659 3776 href="http://www.w3.org/TR/2013/CR-cors-20130129/">http://www.w3.org/TR/2013/CR-cors-20130129/</a>
dschulze@473 3777 </dd>
dschulze@473 3778 <!---->
dschulze@473 3779
dschulze@273 3780 <dt id=CSS21>[CSS21]
dschulze@273 3781
dschulze@273 3782 <dd>Bert Bos; et al. <a
dschulze@536 3783 href="http://www.w3.org/TR/2011/REC-CSS2-20110607/"><cite>Cascading Style
dschulze@551 3784 Sheets Level 2 Revision 1 (CSS 2.1) Specification.</cite></a> 7 June
dschulze@273 3785 2011. W3C Recommendation. URL: <a
dschulze@536 3786 href="http://www.w3.org/TR/2011/REC-CSS2-20110607/">http://www.w3.org/TR/2011/REC-CSS2-20110607/</a>
dschulze@427 3787 </dd>
dschulze@273 3788 <!---->
dschulze@273 3789
dschulze@342 3790 <dt id=CSS3-EXCLUSIONS>[CSS3-EXCLUSIONS]
dschulze@342 3791
dschulze@342 3792 <dd>Vincent Hardy; Rossen Atanassov; Alan Stearns. <a
dschulze@342 3793 href="http://www.w3.org/TR/2012/WD-css3-exclusions-20120503/"><cite>CSS
dschulze@342 3794 Exclusions and Shapes Module Level 3.</cite></a> 3 May 2012. W3C Working
dschulze@342 3795 Draft. (Work in progress.) URL: <a
dschulze@342 3796 href="http://www.w3.org/TR/2012/WD-css3-exclusions-20120503/">http://www.w3.org/TR/2012/WD-css3-exclusions-20120503/</a>
dschulze@427 3797 </dd>
dschulze@342 3798 <!---->
dschulze@342 3799
dschulze@277 3800 <dt id=CSS3-IMAGES>[CSS3-IMAGES]
dschulze@277 3801
dschulze@277 3802 <dd>Elika J. Etemad; Tab Atkins Jr. <a
dschulze@277 3803 href="http://www.w3.org/TR/2012/CR-css3-images-20120417/"><cite>CSS Image
dschulze@277 3804 Values and Replaced Content Module Level 3.</cite></a> 17 April 2012. W3C
dschulze@277 3805 Candidate Recommendation. (Work in progress.) URL: <a
dschulze@277 3806 href="http://www.w3.org/TR/2012/CR-css3-images-20120417/">http://www.w3.org/TR/2012/CR-css3-images-20120417/</a>
dschulze@427 3807 </dd>
dschulze@277 3808 <!---->
dschulze@277 3809
dschulze@659 3810 <dt id=CSS3BG>[CSS3BG]
dschulze@659 3811
dschulze@659 3812 <dd>Bert Bos; Elika J. Etemad; Brad Kemper. <a
dschulze@659 3813 href="http://www.w3.org/TR/2012/CR-css3-background-20120724/"><cite>CSS
dschulze@659 3814 Backgrounds and Borders Module Level 3.</cite></a> 24 July 2012. W3C
dschulze@659 3815 Candidate Recommendation. (Work in progress.) URL: <a
dschulze@659 3816 href="http://www.w3.org/TR/2012/CR-css3-background-20120724/">http://www.w3.org/TR/2012/CR-css3-background-20120724/</a>
dschulze@659 3817 </dd>
dschulze@659 3818 <!---->
dschulze@659 3819
dschulze@731 3820 <dt id=CSS3VAL>[CSS3VAL]
dschulze@731 3821
dschulze@731 3822 <dd>Håkon Wium Lie; Tab Atkins; Elika J. Etemad. <a
dschulze@731 3823 href="http://www.w3.org/TR/2012/CR-css3-values-20120828/"><cite>CSS
dschulze@731 3824 Values and Units Module Level 3.</cite></a> 28 August 2012. W3C Candidate
dschulze@731 3825 Recommendation. (Work in progress.) URL: <a
dschulze@731 3826 href="http://www.w3.org/TR/2012/CR-css3-values-20120828/">http://www.w3.org/TR/2012/CR-css3-values-20120828/</a>
dschulze@731 3827 </dd>
dschulze@731 3828 <!---->
dschulze@731 3829
birtles@291 3830 <dt id=DOM>[DOM]
birtles@291 3831
dschulze@659 3832 <dd>Anne van Kesteren; et al. <a
dschulze@659 3833 href="http://www.w3.org/TR/2012/WD-dom-20121206/"><cite>DOM4.</cite></a>
dschulze@659 3834 6 December 2012. W3C Working Draft. (Work in progress.) URL: <a
dschulze@659 3835 href="http://www.w3.org/TR/2012/WD-dom-20121206/">http://www.w3.org/TR/2012/WD-dom-20121206/</a>
dschulze@427 3836 </dd>
birtles@291 3837 <!---->
birtles@291 3838
dschulze@734 3839 <dt id=RFC2119>[RFC2119]
dschulze@734 3840
dschulze@734 3841 <dd>S. Bradner. <a href="http://www.ietf.org/rfc/rfc2119.txt"><cite>Key
dschulze@734 3842 words for use in RFCs to Indicate Requirement Levels.</cite></a> Internet
dschulze@734 3843 RFC 2119. URL: <a
dschulze@734 3844 href="http://www.ietf.org/rfc/rfc2119.txt">http://www.ietf.org/rfc/rfc2119.txt</a>
dschulze@734 3845 </dd>
dschulze@734 3846 <!---->
dschulze@734 3847
birtles@291 3848 <dt id=SELECTORS4>[SELECTORS4]
birtles@291 3849
birtles@291 3850 <dd>Elika J. Etemad. <a
dschulze@402 3851 href="http://www.w3.org/TR/2012/WD-selectors4-20120823/"><cite>Selectors
dschulze@402 3852 Level 4.</cite></a> 23 August 2012. W3C Working Draft. (Work in
birtles@291 3853 progress.) URL: <a
dschulze@402 3854 href="http://www.w3.org/TR/2012/WD-selectors4-20120823/">http://www.w3.org/TR/2012/WD-selectors4-20120823/</a>
dschulze@427 3855 </dd>
birtles@291 3856 <!---->
birtles@291 3857
dschulze@273 3858 <dt id=SVG11>[SVG11]
dschulze@273 3859
dschulze@273 3860 <dd>Erik Dahlström; et al. <a
dschulze@273 3861 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/"><cite>Scalable
dschulze@273 3862 Vector Graphics (SVG) 1.1 (Second Edition).</cite></a> 16 August 2011.
dschulze@273 3863 W3C Recommendation. URL: <a
dschulze@273 3864 href="http://www.w3.org/TR/2011/REC-SVG11-20110816/">http://www.w3.org/TR/2011/REC-SVG11-20110816/</a>
dschulze@427 3865 </dd>
dschulze@273 3866 <!---->
dschulze@273 3867 </dl>
dschulze@273 3868 <!--end-normative-->
dschulze@273 3869
dschulze@470 3870 <dl>
dschulze@470 3871 <dt id=ref-svg2><strong class=normref>[SVG2]</strong>
dschulze@470 3872
dschulze@731 3873 <dd> Cameron McCormack; et al. <a
dschulze@470 3874 href="http://www.w3.org/TR/2012/WD-SVG2-20120828/"><cite>Scalable Vector
dschulze@470 3875 Graphics (SVG) 2</cite>.</a> 28 August 2012. W3C Working Draft. (Work in
dschulze@470 3876 progress.) URL: <a
dschulze@470 3877 href="http://www.w3.org/TR/2012/WD-SVG2-20120828/">http://www.w3.org/TR/2012/WD-SVG2-20120828/</a>
dschulze@470 3878 </dl>
dschulze@470 3879
dschulze@273 3880 <h3 class=no-num id=other-references> Other references</h3>
dschulze@273 3881 <!--begin-informative-->
dschulze@273 3882 <!-- Sorted by label -->
dschulze@273 3883
dschulze@273 3884 <dl class=bibliography>
dschulze@273 3885 <dt style="display: none"><!-- keeps the doc valid if the DL is empty -->
dschulze@273 3886 <!---->
dschulze@273 3887
dschulze@273 3888 <dt id=CSS3-TRANSFORMS>[CSS3-TRANSFORMS]
dschulze@273 3889
dschulze@273 3890 <dd>Simon Fraser; et al. <a
dschulze@536 3891 href="http://www.w3.org/TR/2012/WD-css3-transforms-20120911/"><cite>CSS
dschulze@536 3892 Transforms.</cite></a> 11 September 2012. W3C Working Draft. (Work in
dschulze@273 3893 progress.) URL: <a
dschulze@536 3894 href="http://www.w3.org/TR/2012/WD-css3-transforms-20120911/">http://www.w3.org/TR/2012/WD-css3-transforms-20120911/</a>
dschulze@427 3895 </dd>
dschulze@273 3896 <!---->
dschulze@279 3897
dschulze@463 3898 <dt id=CSSOM-VIEW>[CSSOM-VIEW]
dschulze@463 3899
dschulze@463 3900 <dd>Anne van Kesteren. <a
dschulze@463 3901 href="http://www.w3.org/TR/2011/WD-cssom-view-20110804/"><cite>CSSOM View
dschulze@463 3902 Module.</cite></a> 4 August 2011. W3C Working Draft. (Work in progress.)
dschulze@463 3903 URL: <a
dschulze@463 3904 href="http://www.w3.org/TR/2011/WD-cssom-view-20110804/">http://www.w3.org/TR/2011/WD-cssom-view-20110804/</a>
dschulze@463 3905 </dd>
dschulze@463 3906 <!---->
dschulze@273 3907 </dl>
dschulze@273 3908 <!--end-informative-->
dschulze@273 3909
dschulze@273 3910 <h2 class=no-num id=index> Index</h2>
dschulze@273 3911 <!--begin-index-->
dschulze@273 3912
dschulze@273 3913 <ul class=indexlist>
birtles@447 3914 <li>‘<a href="#alpha"><code class=css>alpha</code></a>’, <a
dschulze@551 3915 href="#alpha" title="section 6.2."><strong>6.2.</strong></a>
dschulze@551 3916
dschulze@734 3917 <li>authoring tool, <a href="#authoring-tool"
dschulze@734 3918 title="section 11.2."><strong>11.2.</strong></a>
dschulze@734 3919
dschulze@551 3920 <li>‘<a href="#auto"><code class=css>auto</code></a>’, <a href="#auto"
dschulze@551 3921 title="section 6.2."><strong>6.2.</strong></a>
dschulze@277 3922
dschulze@274 3923 <li>‘<code class=css>border-box</code>’
dschulze@274 3924 <ul>
dschulze@274 3925 <li>‘<a href="#mask-clip"><code class=property>mask-clip</code></a>’
dschulze@274 3926 value, <a href="#border-box"
dschulze@551 3927 title="section 6.5."><strong>6.5.</strong></a>
dschulze@275 3928
dschulze@276 3929 <li>‘<a href="#mask-origin"><code
dschulze@276 3930 class=property>mask-origin</code></a>’ value, <a href="#border-box0"
dschulze@551 3931 title="section 6.6."><strong>6.6.</strong></a>
dschulze@274 3932 </ul>
dschulze@274 3933
dschulze@451 3934 <li>&lt;bottom&gt;, <a href="#ltbottomgt"
dschulze@536 3935 title="section 8.3."><strong>8.3.</strong></a>
dschulze@451 3936
dschulze@273 3937 <li>bounding client rect, <a href="#bounding-client-rect"
dschulze@536 3938 title="section 4."><strong>4.</strong></a>, <a
dschulze@536 3939 href="#bounding-client-rect0" title="section 8.1.">8.1.</a>, <a
dschulze@552 3940 href="#bounding-client-rect1" title="section 8.1.">8.1.</a>, <a
dschulze@552 3941 href="#bounding-client-rect2" title="section 8.5.">8.5.</a>
dschulze@273 3942
dschulze@274 3943 <li><a href="#ltboxgt"><var>&lt;box&gt;</var></a>, <a href="#ltboxgt"
dschulze@551 3944 title="section 6.5."><strong>6.5.</strong></a>
dschulze@274 3945
birtles@288 3946 <li>&lt;child-selector&gt;, <a href="#ltchild-selectorgt"
dschulze@536 3947 title="section 6.1."><strong>6.1.</strong></a>
dschulze@338 3948
dschulze@536 3949 <li>clip, <a href="#ClipProperty"
dschulze@536 3950 title="section 8.3."><strong>8.3.</strong></a>
dschulze@298 3951
dschulze@615 3952 <li><a href="#ltclip-boxgt"><var>&lt;clip-box&gt;</var></a>, <a
dschulze@615 3953 href="#ltclip-boxgt" title="section 6.5."><strong>6.5.</strong></a>
dschulze@615 3954
dschulze@551 3955 <li>clipPath, <a href="#clippath"
dschulze@551 3956 title="section 8.4."><strong>8.4.</strong></a>
dschulze@551 3957
dschulze@298 3958 <li>clip-path, <a href="#clip-path"
dschulze@536 3959 title="section 8.1."><strong>8.1.</strong></a>
dschulze@298 3960
dschulze@298 3961 <li>clip-rule, <a href="#clip-rule"
dschulze@536 3962 title="section 8.2."><strong>8.2.</strong></a>
dschulze@298 3963
dschulze@338 3964 <li>&lt;clip-source&gt;, <a href="#ltclip-sourcegt"
dschulze@536 3965 title="section 8.1."><strong>8.1.</strong></a>
dschulze@338 3966
dschulze@338 3967 <li>‘<a href="#ltcompound-selectorgt"><code
dschulze@338 3968 class=css>&lt;compound-selector&gt;</code></a>’, <a
dschulze@338 3969 href="#ltcompound-selectorgt"
dschulze@536 3970 title="section 6.1."><strong>6.1.</strong></a>
birtles@288 3971
dschulze@275 3972 <li>‘<a href="#content-box0"><code class=css>content-box</code></a>’,
dschulze@551 3973 <a href="#content-box0" title="section 6.6."><strong>6.6.</strong></a>
dschulze@274 3974 <ul>
dschulze@274 3975 <li>‘<a href="#mask-clip"><code class=property>mask-clip</code></a>’
dschulze@274 3976 value, <a href="#content-box"
dschulze@551 3977 title="section 6.5."><strong>6.5.</strong></a>
dschulze@274 3978 </ul>
dschulze@274 3979
dschulze@298 3980 <li>‘<a href="#evenodd"><code class=css>evenodd</code></a>’, <a
dschulze@536 3981 href="#evenodd" title="section 8.2."><strong>8.2.</strong></a>
dschulze@298 3982
birtles@287 3983 <li>&lt;image&gt;, <a href="#ltimagegt"
dschulze@536 3984 title="section 6.1."><strong>6.1.</strong></a>
dschulze@536 3985
dschulze@536 3986 <li>layers, <a href="#layers" title="section 5.1.">5.1.</a>
dschulze@279 3987
dschulze@451 3988 <li>&lt;left&gt;, <a href="#ltleftgt"
dschulze@536 3989 title="section 8.3."><strong>8.3.</strong></a>
dschulze@451 3990
dschulze@273 3991 <li>local coordinate system, <a href="#local-coordinate-system"
dschulze@536 3992 title="section 4."><strong>4.</strong></a>
dschulze@273 3993
birtles@447 3994 <li>‘<a href="#luminance"><code class=css>luminance</code></a>’, <a
dschulze@551 3995 href="#luminance" title="section 6.2."><strong>6.2.</strong></a>
dschulze@536 3996
dschulze@536 3997 <li>mask, <a href="#MaskProperty"
dschulze@551 3998 title="section 6.8."><strong>6.8.</strong></a>, <a href="#mask"
dschulze@551 3999 title="section 6.10."><strong>6.10.</strong></a>, <a href="#mask0"
dschulze@536 4000 title="section 4."><strong>4.</strong></a>
dschulze@274 4001
dschulze@299 4002 <li>mask-box-image, <a href="#mask-box-image0"
dschulze@536 4003 title="section 7.6."><strong>7.6.</strong></a>
dschulze@299 4004
dschulze@301 4005 <li>mask box image area, <a href="#mask-box-image-area"
dschulze@536 4006 title="section 7.4."><strong>7.4.</strong></a>
dschulze@301 4007
dschulze@299 4008 <li>mask-box-image-outset, <a href="#mask-box-image-outset"
dschulze@536 4009 title="section 7.4."><strong>7.4.</strong></a>
dschulze@299 4010
dschulze@299 4011 <li>mask-box-image-repeat, <a href="#mask-box-image-repeat"
dschulze@536 4012 title="section 7.5."><strong>7.5.</strong></a>
dschulze@299 4013
dschulze@299 4014 <li>mask-box-image-slice, <a href="#mask-box-image-slice"
dschulze@536 4015 title="section 7.2."><strong>7.2.</strong></a>
dschulze@299 4016
dschulze@299 4017 <li>mask-box-image-source, <a href="#mask-box-image-source"
dschulze@536 4018 title="section 7.1."><strong>7.1.</strong></a>
dschulze@299 4019
dschulze@299 4020 <li>mask-box-image-width, <a href="#mask-box-image-width"
dschulze@536 4021 title="section 7.3."><strong>7.3.</strong></a>
dschulze@299 4022
dschulze@274 4023 <li>mask-clip, <a href="#mask-clip"
dschulze@551 4024 title="section 6.5."><strong>6.5.</strong></a>
dschulze@278 4025
dschulze@607 4026 <li>&lt;mask-element&gt;, <a href="#ltmask-elementgt"
dschulze@607 4027 title="section 6.1."><strong>6.1.</strong></a>
dschulze@607 4028
birtles@287 4029 <li>&lt;mask-image&gt;, <a href="#ltmask-imagegt"
dschulze@536 4030 title="section 6.1."><strong>6.1.</strong></a>
dschulze@274 4031
dschulze@274 4032 <li>mask-image, <a href="#mask-image"
dschulze@536 4033 title="section 6.1."><strong>6.1.</strong></a>
dschulze@536 4034
dschulze@536 4035 <li>mask image area, <a href="#mask-image-area" title="section 7.">7.</a>
dschulze@342 4036
birtles@288 4037 <li>&lt;mask-layer&gt;, <a href="#ltmask-layergt"
dschulze@551 4038 title="section 6.8."><strong>6.8.</strong></a>
dschulze@277 4039
dschulze@276 4040 <li>mask-origin, <a href="#mask-origin"
dschulze@551 4041 title="section 6.6."><strong>6.6.</strong></a>
dschulze@276 4042
dschulze@274 4043 <li>mask painting area, <a href="#mask-painting-area"
dschulze@551 4044 title="section 6.5."><strong>6.5.</strong></a>, <a
dschulze@551 4045 href="#mask-painting-area0" title="section 6.3.">6.3.</a>, <a
dschulze@659 4046 href="#mask-painting-area1" title="section 6.4.">6.4.</a>
dschulze@274 4047
dschulze@274 4048 <li>mask-position, <a href="#mask-position"
dschulze@551 4049 title="section 6.4."><strong>6.4.</strong></a>
dschulze@274 4050
dschulze@275 4051 <li>mask positioning area, <a href="#mask-positioning-area"
dschulze@659 4052 title="section 6.6."><strong>6.6.</strong></a>
dschulze@536 4053
dschulze@536 4054 <li>&lt;mask-reference&gt;, <a href="#ltmask-referencegt"
dschulze@536 4055 title="section 6.1."><strong>6.1.</strong></a>
dschulze@275 4056
dschulze@274 4057 <li>mask-repeat, <a href="#mask-repeat"
dschulze@551 4058 title="section 6.3."><strong>6.3.</strong></a>
dschulze@274 4059
dschulze@277 4060 <li><a href="#ltmask-sizegt"><var>&lt;mask-size&gt;</var></a>, <a
dschulze@551 4061 href="#ltmask-sizegt" title="section 6.7."><strong>6.7.</strong></a>
dschulze@277 4062
dschulze@277 4063 <li>mask-size, <a href="#mask-size"
dschulze@551 4064 title="section 6.7."><strong>6.7.</strong></a>
dschulze@277 4065
dschulze@281 4066 <li>mask source, <a href="#mask-source"
dschulze@536 4067 title="section 4."><strong>4.</strong></a>
dschulze@281 4068
dschulze@551 4069 <li>mask-source-type, <a href="#mask-source-type"
dschulze@551 4070 title="section 6.2."><strong>6.2.</strong></a>
dschulze@551 4071
dschulze@277 4072 <li>mask-type, <a href="#mask-type"
dschulze@551 4073 title="section 6.9."><strong>6.9.</strong></a>
dschulze@536 4074
dschulze@536 4075 <li>‘<code class=css>no-clip</code>’
dschulze@474 4076 <ul>
dschulze@474 4077 <li>‘<a href="#mask-clip"><code class=property>mask-clip</code></a>’
dschulze@536 4078 value, <a href="#no-clip"
dschulze@551 4079 title="section 6.5."><strong>6.5.</strong></a>
dschulze@474 4080 </ul>
dschulze@277 4081
dschulze@536 4082 <li>‘<a href="#none"><code class=css>none</code></a>’, <a href="#none"
dschulze@536 4083 title="section 6.1."><strong>6.1.</strong></a>
dschulze@536 4084
dschulze@298 4085 <li>‘<a href="#nonzero"><code class=css>nonzero</code></a>’, <a
dschulze@536 4086 href="#nonzero" title="section 8.2."><strong>8.2.</strong></a>
dschulze@298 4087
dschulze@273 4088 <li>object bounding box units, <a href="#object-bounding-box-units"
dschulze@536 4089 title="section 4."><strong>4.</strong></a>, <a
dschulze@536 4090 href="#object-bounding-box-units0" title="section 8.4.">8.4.</a>
dschulze@273 4091
dschulze@274 4092 <li>‘<code class=css>padding-box</code>’
dschulze@274 4093 <ul>
dschulze@274 4094 <li>‘<a href="#mask-clip"><code class=property>mask-clip</code></a>’
dschulze@274 4095 value, <a href="#padding-box"
dschulze@551 4096 title="section 6.5."><strong>6.5.</strong></a>
dschulze@275 4097
dschulze@276 4098 <li>‘<a href="#mask-origin"><code
dschulze@276 4099 class=property>mask-origin</code></a>’ value, <a href="#padding-box0"
dschulze@551 4100 title="section 6.6."><strong>6.6.</strong></a>
dschulze@274 4101 </ul>
dschulze@274 4102
dschulze@274 4103 <li><a href="#ltpositiongt"><var>&lt;position&gt;</var></a>, <a
dschulze@551 4104 href="#ltpositiongt" title="section 6.4."><strong>6.4.</strong></a>
dschulze@274 4105
dschulze@734 4106 <li>renderer, <a href="#renderer"
dschulze@734 4107 title="section 11.2."><strong>11.2.</strong></a>
dschulze@734 4108
dschulze@274 4109 <li><a href="#ltrepeat-stylegt"><var>&lt;repeat-style&gt;</var></a>, <a
dschulze@551 4110 href="#ltrepeat-stylegt" title="section 6.3."><strong>6.3.</strong></a>
dschulze@274 4111
dschulze@451 4112 <li>&lt;right&gt;, <a href="#ltrightgt"
dschulze@536 4113 title="section 8.3."><strong>8.3.</strong></a>
dschulze@451 4114
dschulze@338 4115 <li>‘<a href="#ltshapegt"><code class=css>&lt;shape&gt;</code></a>’,
dschulze@536 4116 <a href="#ltshapegt" title="section 8.1."><strong>8.1.</strong></a>
dschulze@338 4117
dschulze@551 4118 <li><a href="#ltsource-typegt"><var>&lt;source-type&gt;</var></a>, <a
dschulze@551 4119 href="#ltsource-typegt" title="section 6.2."><strong>6.2.</strong></a>
dschulze@551 4120
dschulze@734 4121 <li>style sheet
dschulze@734 4122 <ul>
dschulze@734 4123 <li>as conformance class, <a href="#style-sheet"
dschulze@734 4124 title="section 11.2."><strong>11.2.</strong></a>
dschulze@734 4125 </ul>
dschulze@734 4126
dschulze@451 4127 <li>&lt;top&gt;, <a href="#lttopgt"
dschulze@536 4128 title="section 8.3."><strong>8.3.</strong></a>
dschulze@451 4129
dschulze@443 4130 <li>‘<a href="#lturlgt"><code class=css>&lt;url&gt;</code></a>’, <a
dschulze@536 4131 href="#lturlgt" title="section 6.1."><strong>6.1.</strong></a>
dschulze@443 4132
dschulze@273 4133 <li>user coordinate system, <a href="#user-coordinate-system"
dschulze@536 4134 title="section 4."><strong>4.</strong></a>
dschulze@273 4135 </ul>
dschulze@273 4136 <!--end-index-->
dschulze@273 4137
dschulze@273 4138 <h2 class=no-num id=property-index> Property index</h2>
dschulze@273 4139 <!--begin-properties-->
dschulze@273 4140
dschulze@273 4141 <table class=proptable>
dschulze@273 4142 <thead>
dschulze@273 4143 <tr>
dschulze@273 4144 <th>Property
dschulze@273 4145
dschulze@273 4146 <th>Values
dschulze@273 4147
dschulze@273 4148 <th>Initial
dschulze@273 4149
dschulze@551 4150 <th>Applies to
dschulze@273 4151
dschulze@273 4152 <th>Inh.
dschulze@273 4153
dschulze@273 4154 <th>Percentages
dschulze@273 4155
dschulze@273 4156 <th>Media
dschulze@273 4157
dschulze@273 4158 <tbody>
dschulze@273 4159 <tr>
dschulze@536 4160 <th><a class=property href="#ClipProperty">clip</a>
dschulze@536 4161
dschulze@536 4162 <td>&lt;shape&gt; | auto
dschulze@536 4163
dschulze@536 4164 <td>see individual properties
dschulze@536 4165
dschulze@536 4166 <td>Absolutely positioned elements. In SVG, it applies to elements which
dschulze@551 4167 establish a new viewport, ‘pattern’ elements and ‘marker’
dschulze@551 4168 elements.
dschulze@536 4169
dschulze@536 4170 <td>no
dschulze@536 4171
dschulze@536 4172 <td>N/A
dschulze@536 4173
dschulze@536 4174 <td>visual
dschulze@536 4175
dschulze@536 4176 <tr>
dschulze@551 4177 <th><a class=property href="#clippath">clipPath</a>
dschulze@551 4178
dschulze@551 4179 <td>
dschulze@551 4180
dschulze@551 4181 <td>
dschulze@551 4182
dschulze@551 4183 <td>
dschulze@551 4184
dschulze@551 4185 <td>
dschulze@551 4186
dschulze@551 4187 <td>
dschulze@551 4188
dschulze@551 4189 <td>
dschulze@551 4190
dschulze@551 4191 <tr>
dschulze@298 4192 <th><a class=property href="#clip-path">clip-path</a>
dschulze@298 4193
dschulze@338 4194 <td>&lt;shape&gt; | &lt;clip-source&gt; | none
dschulze@298 4195
dschulze@298 4196 <td>none
dschulze@298 4197
dschulze@298 4198 <td>All elements. SVG container elements, graphics elements and
dschulze@298 4199 ‘clipPath’
dschulze@298 4200
dschulze@298 4201 <td>no
dschulze@298 4202
dschulze@338 4203 <td>as specified
dschulze@298 4204
dschulze@298 4205 <td>visual
dschulze@298 4206
dschulze@298 4207 <tr>
dschulze@536 4208 <th><a class=property href="#clip-rule">clip-rule</a>
dschulze@536 4209
dschulze@536 4210 <td>nonzero | evenodd
dschulze@536 4211
dschulze@536 4212 <td>nonzero
dschulze@536 4213
dschulze@536 4214 <td>graphics elements within a ‘clipPath’ element
dschulze@536 4215
dschulze@536 4216 <td>yes
dschulze@536 4217
dschulze@536 4218 <td>N/A
dschulze@536 4219
dschulze@536 4220 <td>visual
dschulze@298 4221
dschulze@298 4222 <tr>
dschulze@551 4223 <th><a class=property href="#mask">mask</a>
dschulze@551 4224
dschulze@551 4225 <td>
dschulze@551 4226
dschulze@551 4227 <td>
dschulze@551 4228
dschulze@551 4229 <td>
dschulze@551 4230
dschulze@551 4231 <td>
dschulze@551 4232
dschulze@551 4233 <td>
dschulze@551 4234
dschulze@551 4235 <td>
dschulze@551 4236
dschulze@551 4237 <tr>
dschulze@536 4238 <th><a class=property href="#MaskProperty">mask</a>
dschulze@536 4239
dschulze@536 4240 <td>&lt;mask-layer&gt;#
dschulze@451 4241
dschulze@451 4242 <td>see individual properties
dschulze@451 4243
dschulze@536 4244 <td>All elements. In SVG, it applies to container elements and graphics
dschulze@536 4245 elements
dschulze@451 4246
dschulze@451 4247 <td>no
dschulze@451 4248
dschulze@536 4249 <td>see individual properties
dschulze@299 4250
dschulze@299 4251 <td>visual
dschulze@299 4252
dschulze@299 4253 <tr>
dschulze@299 4254 <th><a class=property href="#mask-box-image0">mask-box-image</a>
dschulze@299 4255
dschulze@299 4256 <td>&lt;‘mask-box-image-source’&gt; ||
dschulze@299 4257 &lt;‘mask-box-image-slice’&gt; [ /
dschulze@299 4258 &lt;‘mask-box-image-width’&gt; | /
dschulze@299 4259 &lt;‘mask-box-image-width’&gt;? /
dschulze@299 4260 &lt;‘mask-box-image-outset’&gt; ]? ||
dschulze@299 4261 &lt;‘mask-box-image-repeat’&gt;
dschulze@299 4262
dschulze@299 4263 <td>See individual properties
dschulze@299 4264
dschulze@299 4265 <td>See individual properties
dschulze@299 4266
dschulze@299 4267 <td>no
dschulze@299 4268
dschulze@299 4269 <td>N/A
dschulze@299 4270
dschulze@299 4271 <td>visual
dschulze@299 4272
dschulze@299 4273 <tr>
dschulze@299 4274 <th><a class=property
dschulze@536 4275 href="#mask-box-image-outset">mask-box-image-outset</a>
dschulze@536 4276
dschulze@536 4277 <td>[ &lt;length&gt; | &lt;number&gt; ]{1,4}
dschulze@536 4278
dschulze@536 4279 <td>0
dschulze@299 4280
dschulze@299 4281 <td>All elements. In SVG, it applies to container elements and graphics
dschulze@299 4282 elements.
dschulze@299 4283
dschulze@299 4284 <td>no
dschulze@299 4285
dschulze@536 4286 <td>N/A
dschulze@536 4287
dschulze@536 4288 <td>visual
dschulze@536 4289
dschulze@536 4290 <tr>
dschulze@536 4291 <th><a class=property
dschulze@536 4292 href="#mask-box-image-repeat">mask-box-image-repeat</a>
dschulze@536 4293
dschulze@536 4294 <td>[ stretch | repeat | round | space ]{1,2}
dschulze@536 4295
dschulze@536 4296 <td>stretch
dschulze@536 4297
dschulze@536 4298 <td>All elements. In SVG, it applies to container elements and graphics
dschulze@536 4299 elements.
dschulze@536 4300
dschulze@536 4301 <td>no
dschulze@536 4302
dschulze@536 4303 <td>N/A
dschulze@536 4304
dschulze@536 4305 <td>visual
dschulze@536 4306
dschulze@536 4307 <tr>
dschulze@536 4308 <th><a class=property
dschulze@536 4309 href="#mask-box-image-slice">mask-box-image-slice</a>
dschulze@536 4310
dschulze@536 4311 <td>[&lt;number&gt; | &lt;percentage&gt;]{1,4} &amp;&amp; fill?
dschulze@536 4312
dschulze@536 4313 <td>0 fill
dschulze@536 4314
dschulze@536 4315 <td>All elements. In SVG, it applies to container elements and graphics
dschulze@536 4316 elements.
dschulze@536 4317
dschulze@536 4318 <td>no
dschulze@536 4319
dschulze@536 4320 <td>refer to size of the mask image
dschulze@536 4321
dschulze@536 4322 <td>visual
dschulze@536 4323
dschulze@536 4324 <tr>
dschulze@536 4325 <th><a class=property
dschulze@536 4326 href="#mask-box-image-source">mask-box-image-source</a>
dschulze@536 4327
dschulze@536 4328 <td>&lt;mask-image&gt;
dschulze@536 4329
dschulze@536 4330 <td>none
dschulze@536 4331
dschulze@536 4332 <td>All elements. In SVG, it applies to container elements and graphics
dschulze@536 4333 elements.
dschulze@536 4334
dschulze@536 4335 <td>no
dschulze@536 4336
dschulze@536 4337 <td>N/A
dschulze@536 4338
dschulze@536 4339 <td>visual
dschulze@536 4340
dschulze@536 4341 <tr>
dschulze@536 4342 <th><a class=property
dschulze@536 4343 href="#mask-box-image-width">mask-box-image-width</a>
dschulze@536 4344
dschulze@536 4345 <td>[ &lt;length&gt; | &lt;percentage&gt; | &lt;number&gt; | auto ]{1,4}
dschulze@536 4346
dschulze@536 4347 <td>auto
dschulze@536 4348
dschulze@536 4349 <td>All elements. In SVG, it applies to container elements and graphics
dschulze@536 4350 elements.
dschulze@536 4351
dschulze@536 4352 <td>no
dschulze@536 4353
dschulze@451 4354 <td>relative to width/height of the mask box image area
dschulze@299 4355
dschulze@299 4356 <td>visual
dschulze@299 4357
dschulze@299 4358 <tr>
dschulze@274 4359 <th><a class=property href="#mask-clip">mask-clip</a>
dschulze@274 4360
dschulze@615 4361 <td>&lt;clip-box&gt;#
dschulze@274 4362
dschulze@274 4363 <td>border-box
dschulze@274 4364
dschulze@274 4365 <td>All elements. In SVG, it applies to container elements and graphics
dschulze@274 4366 elements
dschulze@274 4367
dschulze@274 4368 <td>no
dschulze@274 4369
dschulze@274 4370 <td>N/A
dschulze@274 4371
dschulze@274 4372 <td>visual
dschulze@274 4373
dschulze@274 4374 <tr>
dschulze@274 4375 <th><a class=property href="#mask-image">mask-image</a>
dschulze@274 4376
dschulze@607 4377 <td>&lt;mask-reference&gt;
dschulze@274 4378
dschulze@274 4379 <td>none
dschulze@274 4380
dschulze@274 4381 <td>All elements. In SVG, it applies to container elements and graphics
dschulze@274 4382 elements
dschulze@274 4383
dschulze@274 4384 <td>no
dschulze@274 4385
dschulze@274 4386 <td>N/A
dschulze@274 4387
dschulze@274 4388 <td>visual
dschulze@274 4389
dschulze@274 4390 <tr>
dschulze@276 4391 <th><a class=property href="#mask-origin">mask-origin</a>
dschulze@276 4392
dschulze@280 4393 <td>&lt;box&gt;#
dschulze@276 4394
dschulze@276 4395 <td>padding-box
dschulze@276 4396
dschulze@277 4397 <td>All elements. In SVG, it applies to container elements and graphics
dschulze@277 4398 elements
dschulze@276 4399
dschulze@276 4400 <td>no
dschulze@276 4401
dschulze@276 4402 <td>N/A
dschulze@276 4403
dschulze@276 4404 <td>visual
dschulze@276 4405
dschulze@276 4406 <tr>
dschulze@274 4407 <th><a class=property href="#mask-position">mask-position</a>
dschulze@274 4408
dschulze@280 4409 <td>&lt;position&gt;#
dschulze@274 4410
dschulze@274 4411 <td>0% 0%
dschulze@274 4412
dschulze@274 4413 <td>All elements. In SVG, it applies to container elements and graphics
dschulze@274 4414 elements
dschulze@274 4415
dschulze@274 4416 <td>no
dschulze@274 4417
dschulze@274 4418 <td>refer to size of mask painting area minus size of mask image; see
dschulze@274 4419 text
dschulze@274 4420
dschulze@274 4421 <td>visual
dschulze@274 4422
dschulze@274 4423 <tr>
dschulze@274 4424 <th><a class=property href="#mask-repeat">mask-repeat</a>
dschulze@274 4425
dschulze@280 4426 <td>&lt;repeat-style&gt;#
dschulze@274 4427
dschulze@274 4428 <td>repeat
dschulze@274 4429
dschulze@274 4430 <td>All elements. In SVG, it applies to container elements and graphics
dschulze@274 4431 elements
dschulze@274 4432
dschulze@274 4433 <td>no
dschulze@274 4434
dschulze@274 4435 <td>N/A
dschulze@274 4436
dschulze@274 4437 <td>visual
dschulze@274 4438
dschulze@274 4439 <tr>
dschulze@277 4440 <th><a class=property href="#mask-size">mask-size</a>
dschulze@277 4441
dschulze@280 4442 <td>&lt;mask-size&gt;#
dschulze@277 4443
dschulze@277 4444 <td>auto
dschulze@273 4445
dschulze@273 4446 <td>All elements. In SVG, it applies to container elements and graphics
dschulze@273 4447 elements
dschulze@273 4448
dschulze@273 4449 <td>no
dschulze@273 4450
dschulze@277 4451 <td>see text
dschulze@273 4452
dschulze@273 4453 <td>visual
dschulze@273 4454
dschulze@273 4455 <tr>
dschulze@551 4456 <th><a class=property href="#mask-source-type">mask-source-type</a>
dschulze@551 4457
dschulze@551 4458 <td>&lt;source-type&gt;#
dschulze@551 4459
dschulze@551 4460 <td>auto
dschulze@551 4461
dschulze@551 4462 <td>All elements. In SVG, it applies to container elements and graphics
dschulze@551 4463 elements
dschulze@551 4464
dschulze@551 4465 <td>no
dschulze@551 4466
dschulze@551 4467 <td>N/A
dschulze@551 4468
dschulze@551 4469 <td>visual
dschulze@551 4470
dschulze@551 4471 <tr>
dschulze@277 4472 <th><a class=property href="#mask-type">mask-type</a>
dschulze@277 4473
dschulze@552 4474 <td>luminance | alpha
dschulze@277 4475
dschulze@432 4476 <td>luminance
dschulze@432 4477
dschulze@551 4478 <td>‘mask’ elements
dschulze@277 4479
dschulze@277 4480 <td>no
dschulze@277 4481
dschulze@277 4482 <td>N/A
dschulze@277 4483
dschulze@277 4484 <td>visual
dschulze@273 4485 </table>
dschulze@273 4486 <!--end-properties-->
dschulze@273 4487 </html>
dschulze@470 4488 <!-- Keep this comment at the end of the file
dschulze@470 4489 Local variables:
dschulze@470 4490 mode: sgml
dschulze@470 4491 sgml-declaration:"~/SGML/HTML4.decl"
dschulze@470 4492 sgml-default-doctype-name:"html"
dschulze@470 4493 sgml-minimize-attributes:t
dschulze@470 4494 sgml-nofill-elements:("pre" "style" "br")
dschulze@470 4495 sgml-live-element-indicator:t
dschulze@470 4496 sgml-omittag:nil
dschulze@470 4497 sgml-shorttag:nil
dschulze@470 4498 sgml-namecase-general:t
dschulze@470 4499 sgml-general-insert-case:lower
dschulze@470 4500 sgml-always-quote-attributes:t
dschulze@470 4501 sgml-indent-step:nil
dschulze@470 4502 sgml-indent-data:t
dschulze@470 4503 sgml-parent-document:nil
dschulze@470 4504 sgml-exposed-tags:nil
dschulze@470 4505 sgml-local-catalogs:nil
dschulze@470 4506 sgml-local-ecat-files:nil
dschulze@470 4507 End:
dschulze@273 4508 -->

mercurial