Sun, 10 Mar 2013 19:35:27 -0700
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><mask-reference></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><mask-reference></dfn></var> = <a |
dschulze@607 | 704 | href="#ltmask-imagegt"><var><mask-image></var></a># | <a |
dschulze@607 | 705 | href="#ltmask-elementgt"><var><mask-element></var></a></pre> |
dschulze@536 | 706 | |
dschulze@536 | 707 | <pre class=prod><var><dfn |
dschulze@536 | 708 | id=ltmask-imagegt><mask-image></dfn></var> = <a |
dschulze@536 | 709 | href="#ltimagegt"><var><image></var></a> | none </pre> |
dschulze@536 | 710 | |
dschulze@536 | 711 | <pre class=prod><var><dfn |
dschulze@607 | 712 | id=ltmask-elementgt><mask-element></dfn></var> = <a |
birtles@697 | 713 | href="#lturlgt"><var><url></var></a> | <var>child</var> | <a |
birtles@697 | 714 | href="#ltchild-selectorgt"><var><child-selector></var></a></pre> |
dschulze@536 | 715 | |
dschulze@536 | 716 | <pre class=prod><dfn |
dschulze@536 | 717 | id=ltchild-selectorgt><child-selector></dfn> = select(<a |
dschulze@536 | 718 | href="#ltcompound-selectorgt"><var><compound-selector></var></a>#)</pre> |
dschulze@536 | 719 | |
dschulze@536 | 720 | <p class=note>A <a |
dschulze@607 | 721 | href="#ltmask-elementgt"><var><mask-element></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><mask-reference></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><url></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><image></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><child-selector></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><compound-selector></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><image></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><mask-reference></var></a> is |
dschulze@615 | 781 | treated as <a |
dschulze@615 | 782 | href="#ltmask-elementgt"><var><mask-element></var></a>, otherwise as |
dschulze@615 | 783 | <a href="#ltmask-imagegt"><var><mask-image></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><mask-element></var></a> value |
dschulze@615 | 821 | that is either used together with another <a |
dschulze@615 | 822 | href="#ltmask-elementgt"><var><mask-element></var></a> value or an |
dschulze@615 | 823 | <a href="#ltmask-imagegt"><var><mask-image></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><source-type></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><mask-reference></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><source-type></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><mask-reference></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><mask-image></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><mask-reference></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><mask-element></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 | <mask id="SVGMask" mask-type="alpha" maskContentUnits="objectBoundingBox"> |
dschulze@536 | 947 | <radialGradient id="radialFill"> |
dschulze@536 | 948 | <stop stop-color="white" offset="0"/> |
dschulze@536 | 949 | <stop stop-color="black" offset="1"/> |
dschulze@536 | 950 | </radialGradient> |
dschulze@536 | 951 | <circle fill="url(#radialFill)" cx="0.5" cy="0.5" r="0.5"/> |
dschulze@536 | 952 | </mask> |
dschulze@536 | 953 | |
dschulze@552 | 954 | <style> |
dschulze@552 | 955 | rect { |
dschulze@552 | 956 | mask-image: url(#SVGMask); |
dschulze@552 | 957 | mask-source-type: luminance; |
dschulze@552 | 958 | } |
dschulze@552 | 959 | </style> |
dschulze@552 | 960 | |
dschulze@552 | 961 | <rect width="200" height="200" fill="green"/> |
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><repeat-style></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><repeat-style></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><position></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 <length>), 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><position></var></dfn> = [ |
dschulze@470 | 1131 | [ left | center | right | top | bottom | <var><percentage></var> | <var><length></var> ] |
dschulze@470 | 1132 | | |
dschulze@470 | 1133 | [ left | center | right | <var><percentage></var> | <var><length></var> ] |
dschulze@470 | 1134 | [ top | center | bottom | <var><percentage></var> | <var><length></var> ] |
dschulze@470 | 1135 | | |
dschulze@470 | 1136 | [ center | [ left | right ] [ <var><percentage></var> | <var><length></var> ]? ] && |
dschulze@470 | 1137 | [ center | [ top | bottom ] [ <var><percentage></var> | <var><length></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><clip-box></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><clip-box></var></dfn> = <a |
dschulze@615 | 1234 | href="#ltboxgt"><var><box></var></a> | no-clip</pre> |
dschulze@615 | 1235 | |
dschulze@274 | 1236 | <pre class=prod><dfn |
dschulze@615 | 1237 | id=ltboxgt><var><box></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><box></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><mask-size></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><mask-size></var></dfn> = [ <var><length></var> | <var><percentage></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><mask-layer></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><mask-layer></dfn> = <a |
dschulze@551 | 1521 | href="#ltmask-referencegt"><var><mask-reference></var></a> <a |
dschulze@551 | 1522 | href="#ltsource-typegt"><var><source-type></var></a>? || <a |
dschulze@536 | 1523 | href="#ltpositiongt"><var><position></var></a> [ / <a |
dschulze@536 | 1524 | href="#ltmask-sizegt"><var><mask-size></var></a> ]? || <a |
dschulze@536 | 1525 | href="#ltrepeat-stylegt"><var><repeat-style></var></a> || <a |
dschulze@615 | 1526 | href="#ltboxgt"><var><box></var></a> || <a |
dschulze@615 | 1527 | href="#ltclip-boxgt"><var><clip-box></var></a></pre> |
dschulze@615 | 1528 | |
dschulze@615 | 1529 | <p> If one <a href="#ltboxgt"><var><box></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><box></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><length></var> | <var><percentage></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><length></var> | <var><percentage></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><length></var> | <var><percentage></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><length></var> | <var><percentage></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><mask-image></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><number></var> | <var><percentage></var>]{1,4} |
dschulze@299 | 2269 | && 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><length></var> | <var><percentage></var> | |
dschulze@299 | 2339 | <var><number></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><length></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><length></var> | <var><number></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><length></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 <number> |
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><‘<a href="#mask-box-image-source"><code |
dschulze@299 | 2559 | class=property>mask-box-image-source</code></a>’></var> || |
dschulze@299 | 2560 | <var><‘<a href="#mask-box-image-slice"><code |
dschulze@299 | 2561 | class=property>mask-box-image-slice</code></a>’></var> [ / |
dschulze@299 | 2562 | <var><‘<a href="#mask-box-image-width"><code |
dschulze@299 | 2563 | class=property>mask-box-image-width</code></a>’></var> | / |
dschulze@299 | 2564 | <var><‘<a href="#mask-box-image-width"><code |
dschulze@299 | 2565 | class=property>mask-box-image-width</code></a>’></var>? / |
dschulze@299 | 2566 | <var><‘<a href="#mask-box-image-outset"><code |
dschulze@299 | 2567 | class=property>mask-box-image-outset</code></a>’></var> ]? || |
dschulze@299 | 2568 | <var><‘<a href="#mask-box-image-repeat"><code |
dschulze@299 | 2569 | class=property>mask-box-image-repeat</code></a>’></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><shape></var></a> | <a |
dschulze@338 | 2668 | href="#ltclip-sourcegt"><var><clip-source></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><url></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><clip-source></dfn> = <a |
birtles@697 | 2718 | href="#lturlgt"><var><url></var></a> | <var>child</var> | <a |
birtles@697 | 2719 | href="#ltchild-selectorgt"><var><child-selector></var></a> |
dschulze@453 | 2720 | </pre> |
dschulze@338 | 2721 | |
dschulze@298 | 2722 | <dl> |
dschulze@338 | 2723 | <dt> <dfn id=ltshapegt>‘<code class=css><shape></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><child-selector></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 | <g clip-rule="nonzero"> |
dschulze@470 | 2842 | <clipPath id="MyClip"> |
dschulze@470 | 2843 | <path d="..." clip-rule="evenodd" /> |
dschulze@470 | 2844 | </clipPath> |
dschulze@470 | 2845 | <rect clip-path="url(#MyClip)" ... /> |
dschulze@470 | 2846 | </g> |
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 | <g clip-rule="nonzero"> |
dschulze@470 | 2857 | <clipPath id="MyClip"> |
dschulze@470 | 2858 | <path d="..." /> |
dschulze@470 | 2859 | </clipPath> |
dschulze@470 | 2860 | <rect clip-path="url(#MyClip)" clip-rule="evenodd" ... /> |
dschulze@470 | 2861 | </g> |
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><shape></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><shape></var></a> |
dschulze@451 | 2947 | |
dschulze@451 | 2948 | <dd> |
dschulze@451 | 2949 | <p> In CSS 2.1, the only valid <shape> value is: rect(<a |
dschulze@451 | 2950 | href="#lttopgt"><var><top></var></a>, <a |
dschulze@451 | 2951 | href="#ltrightgt"><var><right></var></a>, <a |
dschulze@451 | 2952 | href="#ltbottomgt"><var><bottom></var></a>, <a |
dschulze@451 | 2953 | href="#ltleftgt"><var><left></var></a>) where <a |
dschulze@451 | 2954 | href="#lttopgt"><var><top></var></a> and <a |
dschulze@451 | 2955 | href="#ltbottomgt"><var><bottom></var></a> specify offsets from |
dschulze@451 | 2956 | the top border edge of the box, and <a |
dschulze@451 | 2957 | href="#ltrightgt"><var><right></var></a>, and <a |
dschulze@451 | 2958 | href="#ltleftgt"><var><left></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><top></dfn>, <dfn |
dschulze@451 | 2965 | id=ltrightgt><right></dfn>, <dfn |
dschulze@451 | 2966 | id=ltbottomgt><bottom></dfn>, and <dfn |
dschulze@451 | 2967 | id=ltleftgt><left></dfn> may either have a |
dschulze@551 | 2968 | <var><length></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><top></var></a> |
dschulze@451 | 2975 | and <a href="#ltleftgt"><var><left></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><bottom></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><right></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><left></var></a> and <a |
dschulze@451 | 2987 | href="#ltrightgt"><var><right></var></a> have the same value (or |
dschulze@451 | 2988 | <a href="#lttopgt"><var><top></var></a> and <a |
dschulze@451 | 2989 | href="#ltbottomgt"><var><bottom></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 <use> |
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><bottom>, <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><box></var></a>, <a href="#ltboxgt" |
dschulze@551 | 3944 | title="section 6.5."><strong>6.5.</strong></a> |
dschulze@274 | 3945 | |
birtles@288 | 3946 | <li><child-selector>, <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><clip-box></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><clip-source>, <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><compound-selector></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><image>, <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><left>, <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><mask-element>, <a href="#ltmask-elementgt" |
dschulze@607 | 4027 | title="section 6.1."><strong>6.1.</strong></a> |
dschulze@607 | 4028 | |
birtles@287 | 4029 | <li><mask-image>, <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><mask-layer>, <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><mask-reference>, <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><mask-size></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><position></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><repeat-style></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><right>, <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><shape></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><source-type></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><top>, <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><url></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><shape> | 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><shape> | <clip-source> | 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><mask-layer># |
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><‘mask-box-image-source’> || |
dschulze@299 | 4257 | <‘mask-box-image-slice’> [ / |
dschulze@299 | 4258 | <‘mask-box-image-width’> | / |
dschulze@299 | 4259 | <‘mask-box-image-width’>? / |
dschulze@299 | 4260 | <‘mask-box-image-outset’> ]? || |
dschulze@299 | 4261 | <‘mask-box-image-repeat’> |
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>[ <length> | <number> ]{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>[<number> | <percentage>]{1,4} && 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><mask-image> |
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>[ <length> | <percentage> | <number> | 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><clip-box># |
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><mask-reference> |
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><box># |
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><position># |
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><repeat-style># |
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><mask-size># |
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><source-type># |
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 | --> |