drafts: masking/index.html@f0bee7474714 (annotated)

masking/index.html@f0bee7474714 (annotated)

masking/index.html

Wed, 13 Mar 2013 13:16:38 -0700

author: Dirk Schulze <dschulze@adobe.com>
date: Wed, 13 Mar 2013 13:16:38 -0700
changeset 746: f0bee7474714
parent 741: cd0593275768
child 805: f984d3d17e42
permissions: -rw-r--r--

http://lists.w3.org/Archives/Public/www-style/2013Mar/0228.html

 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
 "http://www.w3.org/TR/html4/strict.dtd">
 <html lang=en>
  <head profile="http://dublincore.org/documents/2008/08/04/dc-html/ ">
   <meta content="text/html; charset=utf-8" http-equiv=Content-Type>
   <title>CSS Masking</title>
   <link href="http://purl.org/dc/terms/" rel=schema.dcterms>
   <link href="http://www.w3.org/Consortium/Legal/ipr-notice#Copyright"
    rel=dcterms.rights>
   <meta content="CSS Masking" name=dcterms.title>
   <meta content=text name=dcterms.type>
   <meta content=2013-03-13 name=dcterms.issued>
   <meta
    content="http://dvcs.w3.org/hg/FXTF/raw-file/default/masking/index.html"
    name=dcterms.creator>
   <meta content=W3C name=dcterms.publisher>
   <meta content="http://dev.w3.org/csswg/css-masking/"
    name=dcterms.identifier>
   <link href="#contents" rel=contents>
   <link href="#index" rel=index>
   <link href=default.css rel=stylesheet type="text/css">
   <link href="http://www.w3.org/StyleSheets/TR/W3C-ED.css" rel=stylesheet
    type="text/css">
   <script defer=defer
    src="http://test.csswg.org/harness/annotate.js#CSS-MASKING_DEV"
    type="text/javascript"></script>
  <body>
   <div class=head> <!--begin-logo-->
    <p><a href="http://www.w3.org/"><img alt=W3C height=48
     src="http://www.w3.org/Icons/w3c_home" width=72></a> <!--end-logo-->
    <h1>CSS Masking</h1>
    <h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 13 March 2013</h2>
    <dl>
     <dt>This version:
     <dd><a
      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>
      <!--http://www.w3.org/TR/2013/WD-css-masking-20130313/-->
     <dt>Latest version:
     <dd><a
      href="http://www.w3.org/TR/css-masking/">http://www.w3.org/TR/css-masking/</a>
     <dt>Editor's draft:
     <dd><a
      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>
     <dt>Editors:
     <dd class=vcard> <span class=fn>Dirk Schulze</span>, <span
      class=org>Adobe Systems</span>, <span
      class=email>dschulze@adobe.com</span>
     <dd class=vcard> <span class=fn>Brian Birtles</span>, <span
      class=org>Mozilla Japan</span>, <span
      class=email>bbirtles@mozilla.com</span>
     <dd class=vcard> <span class=fn><a
      href="http://www.xanthir.com/contact/">Tab Atkins Jr.</a></span>, <span
      class=org>Google, Inc.</span>
    </dl>
    <!--begin-copyright-->
    <p class=copyright><a
     href="http://www.w3.org/Consortium/Legal/ipr-notice#Copyright"
     rel=license>Copyright</a> © 2013 <a href="http://www.w3.org/"><abbr
     title="World Wide Web Consortium">W3C</abbr></a><sup>®</sup> (<a
     href="http://www.csail.mit.edu/"><abbr
     title="Massachusetts Institute of Technology">MIT</abbr></a>, <a
     href="http://www.ercim.eu/"><abbr
     title="European Research Consortium for Informatics and Mathematics">ERCIM</abbr></a>,
     <a href="http://www.keio.ac.jp/">Keio</a>, <a
     href="http://ev.buaa.edu.cn/">Beihang</a>), All Rights Reserved. W3C <a
     href="http://www.w3.org/Consortium/Legal/ipr-notice#Legal_Disclaimer">liability</a>,
     <a
     href="http://www.w3.org/Consortium/Legal/ipr-notice#W3C_Trademarks">trademark</a>
     and <a
     href="http://www.w3.org/Consortium/Legal/copyright-documents">document
     use</a> rules apply.</p>
    <!--end-copyright-->
    <hr title="Separator for header">
   </div>
   <h2 class="no-num no-toc" id=abstract>Abstract</h2>
   <p> CSS Masking provides two means for partially or fully hiding portions
    of visual elements: masking and clipping.
   <p> Masking describes how to use another graphical element or image as a
    luminance or alpha mask. Typically, rendering an element via CSS or SVG
    can conceptually described as if the element, including its children, are
    drawn into a buffer and then that buffer is composited into the element's
    parent. Luminance and alpha masks influence the transparency of this
    buffer before the compositing stage.
   <p> Clipping describes the visible region of visual elements. The region
    can be described by using certain SVG graphics elements or basic shapes.
    Anything outside of this region is not rendered.
   <h2 class="no-num no-toc" id=status>Status of this document</h2>
   <!--begin-status-->
   <p>This is a public copy of the editors' draft. It is provided for
    discussion only and may change at any moment. Its publication here does
    not imply endorsement of its contents by W3C. Don't cite this document
    other than as work in progress.
   <p>The (<a
    href="http://lists.w3.org/Archives/Public/public-fx/">archived</a>) public
    mailing list <a href="mailto:public-fx@w3.org">public-fx@w3.org</a> (see
    <a href="http://www.w3.org/Mail/Request">instructions</a>) is preferred
    for discussion of this specification. When sending e-mail, please put the
    text “css-masking” in the subject, preferably like this:
    “[<!---->css-masking<!---->] <em>…summary of comment…</em>”
   <p>This document was produced by the <a
    href="http://www.w3.org/Style/CSS/members">CSS Working Group</a> (part of
    the <a href="http://www.w3.org/Style/">Style Activity</a>) and the <a
    href="http://www.w3.org/Graphics/SVG/">SVG Working Group</a> (part of the
    <a href="http://www.w3.org/Graphics/">Graphics Activity</a>).
   <p>This document was produced by groups operating under the <a
    href="http://www.w3.org/Consortium/Patent-Policy-20040205/">5 February
 W3C Patent Policy</a>. W3C maintains a <a
    href="http://www.w3.org/2004/01/pp-impl/32061/status"
    rel=disclosure>public list of any patent disclosures (CSS)</a> and a <a
    href="http://www.w3.org/2004/01/pp-impl/19480/status"
    rel=disclosure>public list of any patent disclosures (SVG)</a> made in
    connection with the deliverables of each group; these pages also include
    instructions for disclosing a patent. An individual who has actual
    knowledge of a patent which the individual believes contains <a
    href="http://www.w3.org/Consortium/Patent-Policy-20040205/#def-essential">Essential
    Claim(s)</a> must disclose the information in accordance with <a
    href="http://www.w3.org/Consortium/Patent-Policy-20040205/#sec-Disclosure">section
 of the W3C Patent Policy</a>.</p>
   <!--end-status-->
   <h2 class="no-num no-toc" id=contents> Table of contents</h2>
   <!--begin-toc-->
   <ul class=toc>
    <li><a href="#intro"><span class=secno>1. </span> Introduction </a>
    <li><a href="#placement"><span class=secno>2. </span>Module
     interactions</a>
    <li><a href="#values"><span class=secno>3. </span>Values</a>
    <li><a href="#terminology"><span class=secno>4. </span>Terminology</a>
    <li><a href="#the-mask-rendering-model"><span class=secno>5. </span>The
     Mask Rendering Model</a>
     <ul class=toc>
      <li><a href="#layering"><span class=secno>5.1. </span>Layering Multiple
       Mask Images</a>
      <li><a href="#MaskValues"><span class=secno>5.2. </span>Calculating mask
       values</a>
     </ul>
    <li><a href="#masking"><span class=secno>6. </span>Mask</a>
     <ul class=toc>
      <li><a href="#the-mask-image"><span class=secno>6.1. </span>The ‘<code
       class=property>mask-image</code>’ property</a>
      <li><a href="#the-mask-source-type"><span class=secno>6.2. </span>The
       ‘<code class=property>mask-source-type</code>’ property</a>
      <li><a href="#the-mask-repeat"><span class=secno>6.3. </span>The
       ‘<code class=property>mask-repeat</code>’ property</a>
      <li><a href="#the-mask-position"><span class=secno>6.4. </span>The
       ‘<code class=property>mask-position</code>’ property</a>
      <li><a href="#the-mask-clip"><span class=secno>6.5. </span>The ‘<code
       class=property>mask-clip</code>’ property</a>
      <li><a href="#the-mask-origin"><span class=secno>6.6. </span>The
       ‘<code class=property>mask-origin</code>’ property</a>
      <li><a href="#the-mask-size"><span class=secno>6.7. </span>The ‘<code
       class=property>mask-size</code>’ property</a>
      <li><a href="#mask-property"><span class=secno>6.8. </span>The ‘<code
       class=property>mask</code>’ property</a>
      <li><a href="#the-mask-type"><span class=secno>6.9. </span>The ‘<code
       class=property>mask-type</code>’ property</a>
      <li><a href="#MaskElement"><span class=secno>6.10. </span>The <span
       class=element-name>‘<code class=property>mask</code>’</span>
       element</a>
     </ul>
    <li><a href="#mask-box-image"><span class=secno>7. </span>Mask Box
     Image</a>
     <ul class=toc>
      <li><a href="#the-mask-box-image-source"><span class=secno>7.1.
       </span>The ‘<code class=property>mask-box-image-source</code>’
       property</a>
      <li><a href="#the-mask-box-image-slice"><span class=secno>7.2.
       </span>The ‘<code class=property>mask-box-image-slice</code>’
       property</a>
      <li><a href="#the-mask-box-image-width"><span class=secno>7.3.
       </span>The ‘<code class=property>mask-box-image-width</code>’
       property</a>
      <li><a href="#the-mask-box-image-outset"><span class=secno>7.4.
       </span>The ‘<code class=property>mask-box-image-outset</code>’
       property</a>
      <li><a href="#the-mask-box-image-repeat"><span class=secno>7.5.
       </span>The ‘<code class=property>mask-box-image-repeat</code>’
       property</a>
      <li><a href="#the-mask-box-image"><span class=secno>7.6. </span>The
       ‘<code class=property>mask-box-image</code>’ property</a>
      <li><a href="#masking-with-the-mask-box-image"><span class=secno>7.7.
       </span>Masking with the mask-box-image</a>
     </ul>
    <li><a href="#clipping-paths"><span class=secno>8. </span>Clipping
     paths</a>
     <ul class=toc>
      <li><a href="#the-clip-path"><span class=secno>8.1. </span>The ‘<code
       class=property>clip-path</code>’ property</a>
      <li><a href="#the-clip-rule"><span class=secno>8.2. </span>The ‘<code
       class=property>clip-rule</code>’ property</a>
      <li><a href="#clip-property"><span class=secno>8.3. </span>The ‘<code
       class=property>clip</code>’ property</a>
      <li><a href="#ClipPathElement"><span class=secno>8.4. </span>The
       ‘<code class=property>clipPath</code>’ element</a>
      <li><a href="#clipPath-geometry"><span class=secno>8.5. </span>Clipping
       paths, geometry, and pointer events</a>
     </ul>
    <li><a href="#security"><span class=secno>9. </span>Security</a>
     <ul class=toc>
      <li><a href="#origin-restrictions"><span class=secno>9.1. </span>Origin
       Restrictions</a>
     </ul>
    <li><a href="#DOMInterfaces"><span class=secno>10. </span>DOM
     interfaces</a>
     <ul class=toc>
      <li><a href="#InterfaceSVGClipPathElement"><span class=secno>10.1.
       </span>Interface SVGClipPathElement</a>
      <li><a href="#InterfaceSVGMaskElement"><span class=secno>10.2.
       </span>Interface SVGMaskElement</a>
     </ul>
    <li><a href="#conformance"><span class=secno>11. </span>Conformance</a>
     <ul class=toc>
      <li class=no-ref><a
       href="#conformance-to-css-background-and-border"><span
       class=secno>11.1. </span>Conformance to CSS Background and Borders</a>
     </ul>
    <li class=no-num><a href="#references"> References</a>
     <ul class=toc>
      <li class=no-num><a href="#normative-references"> Normative
       references</a>
      <li class=no-num><a href="#other-references"> Other references</a>
     </ul>
    <li class=no-num><a href="#index"> Index</a>
    <li class=no-num><a href="#property-index"> Property index</a>
   </ul>
   <!--end-toc-->
   <h2 id=intro><span class=secno>1. </span> Introduction</h2>
   <p> With CSS Masking it is possible to specify another graphics element,
    shape or file to be used as clipping region or an luminance or alpha mask
    for compositing the current object into the background.
   <p> A mask is applied using the ‘<a href="#mask"><code
    class=property>mask</code></a>’, ‘<a href="#mask-image"><code
    class=property>mask-image</code></a>’ or ‘<a
    href="#mask-box-image0"><code class=property>mask-box-image</code></a>’
    properties. The mask source may be defined using a <a class=element-name
    href="#MaskElement">‘<code class=property>mask</code>’</a> element
    referenced by the ‘<a href="#mask"><code
    class=property>mask</code></a>’ property. Alternatively, for many simple
    uses, the ‘<a href="#mask-image"><code
    class=property>mask-image</code></a>’ property may refer directly to
    graphical elements or images to be used as mask forgoing the need for an
    explicit <a class=element-name href="#MaskElement">‘<code
    class=property>mask</code>’</a> element. The ‘<a href="#mask"><code
    class=property>mask</code></a>’ property is also a shorthand for other
    masking properties. ‘<a href="#mask-box-image0"><code
    class=property>mask-box-image</code></a>’ splits a mask image into 9
    pieces. The pieces may be sliced, scaled and stretched in various ways to
    fit the size of the mask image area.
   <p> The effect of applying a mask is as if the mask images or mask source
    elements are rendered into an off-screen image which has been initialized
    to transparent black. The graphical object to which the mask is applied
    will be painted onto the background through the mask, thus completely or
    partially masking out parts of the graphical object.
   <p> Clipping defines a visible region of a visual element. The region can
    be specified with SVG <a
    href="http://www.w3.org/TR/2011/REC-SVG11-20110816/intro.html#TermGraphicsElement">graphics
    element</a> or basic shapes. Everything outside of a region does not get
    rendered.
   <div class=example>
    <div class=figure> <img alt="Example Mask" height=260px
     src="images/luminance-mask.svg" width=655px>
     <p class=caption> A luminance mask (middle) is applied on a shape filled
      with a gradient (left). This results in a masked shape (right).
    </div>
   </div>
   <h2 id=placement><span class=secno>2. </span>Module interactions</h2>
   <p>This specification defines a set of CSS properties that affect the
    visual rendering of elements to which those properties are applied; these
    effects are applied after elements have been sized and positioned
    according to the <a href="http://www.w3.org/TR/CSS2/visuren.html"
    title="Visual formatting model">Visual formatting model</a> from <a
    href="#CSS21" rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>. Some values of
    these properties result in the creation of a <a
    href="http://www.w3.org/TR/CSS2/visuren.html#containing-block"
    title="Visual formatting model">containing block</a>, and/or the creation
    of a <a href="http://www.w3.org/TR/CSS2/visuren.html#z-index"
    title="Visual formatting model">stacking context</a>.
   <h2 id=values><span class=secno>3. </span>Values</h2>
   <p> This specification follows the <a
    href="http://www.w3.org/TR/CSS21/about.html#property-defs">CSS property
    definition conventions</a> from <a href="#CSS21"
    rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>. Value types not defined in
    this specification are defined in CSS Values and Units Module Level 3 <a
    href="#CSS3VAL" rel=biblioentry>[CSS3VAL]<!--{{!CSS3VAL}}--></a>.
   <p> In addition to the property-specific values listed in their
    definitions, all properties defined in this specification also accept the
    <a
    href="http://www.w3.org/TR/CSS21/cascade.html#value-def-inherit">inherit</a>
    keyword as their property value. For readability it has not been repeated
    explicitly.
   <h2 id=terminology><span class=secno>4. </span>Terminology</h2>
   <p> When used in this specification, terms have the meanings assigned in
    this section.
   <dl>
    <dt id=TermClientBoundingRect><dfn id=bounding-client-rect>bounding client
     rect</dfn>
    <dd>
     <p> The union of all border boxes for the element that has an associated
      CSS layout box and is not in the <code>http://www.w3.org/2000/svg</code>
      namespace and its descendant elements. Or the object bounding box <a
      href="#SVG11" rel=biblioentry>[SVG11]<!--{{!SVG11}}--></a>, if the
      element does not have an associated CSS layout box and is in the
      <code>http://www.w3.org/2000/svg</code> namespace (See <a
      href="http://www.w3.org/TR/cssom-view/#dom-element-getboundingclientrect">getBoundingClientRect</a>
      <a href="#CSSOM-VIEW"
      rel=biblioentry>[CSSOM-VIEW]<!--{{CSSOM-VIEW}}--></a>).
    <dt id=TermLocalCoordinateSystem><dfn id=local-coordinate-system>local
     coordinate system</dfn>
    <dt id=TermUserCoordinateSystem><dfn id=user-coordinate-system>user
     coordinate system</dfn>
    <dd>
     <p> In general, a coordinate system defines locations and distances on
      the current canvas. The current local coordinate system (also user
      coordinate system) is the coordinate system that is currently active and
      which is used to define how coordinates and lengths are located and
      computed, respectively, on the current canvas <a href="#CSS3-TRANSFORMS"
      rel=biblioentry>[CSS3-TRANSFORMS]<!--{{CSS3-TRANSFORMS}}--></a>.
     <p> For elements that have an associated CSS layout box, the current user
      coordinate system has its origin at the top-left corner of the <a
      class=term href="#bounding-client-rect">bounding client rect</a> and one
      unit equals one CSS pixel. The viewport for resolving percentage values
      is defined by the width and height of the <a class=term
      href="#bounding-client-rect">bounding client rect</a>.
     <p> If the element does not have an associated CSS layout box and is in
      the <code>http://www.w3.org/2000/svg</code> namespace, the current local
      coordinate system has its origin at the top-left corner of the element's
      nearest viewport.
    <dt id=TermObjectBoundingBoxUnits><dfn id=object-bounding-box-units>object
     bounding box units</dfn>
    <dd> The <a class=term href="#bounding-client-rect">bounding client
     rect</a> defines the coordinate system in which to resolve values, as
     defined in <a
     href="http://www.w3.org/TR/2011/REC-SVG11-20110816/coords.html#ObjectBoundingBoxUnits">object
     bounding box units</a> <a href="#SVG11"
     rel=biblioentry>[SVG11]<!--{{!SVG11}}--></a>.
    <dt id=TermMask><dfn id=mask0>mask</dfn>
    <dd> An off-screen image which has been initialized to transparent black.
     The graphical object to which the mask is applied will be painted onto
     the background through the mask, thus completely or partially masking out
     parts of the graphical object.
    <dt id=TermMaskSource><dfn id=mask-source>mask source</dfn>
    <dd> A mask defined by a <a class=element-name
     href="#MaskElement">‘<code class=property>mask</code>’</a> element.
    <dt id=TermClippingPath>clipping path
    <dd> A combination of the SVG elements <a class=element-name
     href="http://www.w3.org/TR/2011/REC-SVG11-20110816/paths.html#PathElement">‘<code
     class=property>path</code>’</a>, <a class=element-name
     href="http://www.w3.org/TR/2011/REC-SVG11-20110816/text.html#TextElement">‘<code
     class=property>text</code>’</a> and <a
     href="http://www.w3.org/TR/2011/REC-SVG11-20110816/intro.html#TermBasicShapeElement">basic
     shapes</a> which serve as the outline of a (in the absence of
     anti-aliasing) 1-bit <a href="#TermMask">mask</a>, where everything on
     the "inside" of the outline is allowed to show through but everything on
     the outside is masked out. See ‘<a href="#clip-path"><code
     class=property>clip-path</code></a>’.
   </dl>
   <p> Definitions of CSS properties and values in this specification are
    analogous to definitions in CSS Backgrounds and Borders <a href="#CSS3BG"
    rel=biblioentry>[CSS3BG]<!--{{!CSS3BG}}--></a>. To avoid redundancy, this
    specification relies on descriptions and definitions of CSS Backgrounds
    and Borders. The following terms in CSS Backgrounds and Borders have the
    following meaning in this specification:
   <table class=data id=term-matching>
    <thead>
     <tr>
      <th>Term in <a href="#CSS3BG"
       rel=biblioentry>[CSS3BG]<!--{{!CSS3BG}}--></a>
      <th>Term in CSS Masking
    <tbody>
     <tr>
      <th>background images
      <td>mask images
     <tr>
      <th>background painting area
      <td>mask painting area
     <tr>
      <th>background-size
      <td>mask-size
     <tr>
      <th>background-position
      <td>mask-position
     <tr>
      <th>background positioning area
      <td>mask positioning area
     <tr>
      <th>border image area
      <td>mask box image area
   </table>
   <h2 id=the-mask-rendering-model><span class=secno>5. </span>The Mask
    Rendering Model</h2>
   <p> The application of the ‘<a href="#clip-path"><code
    class=property>clip-path</code></a>’, ‘<a href="#mask"><code
    class=property>mask</code></a>’ or ‘<a href="#mask-image"><code
    class=property>mask-image</code></a>’ properties to an element formatted
    with the CSS box model establishes a stacking context in the same way that
    CSS ‘<code class=property>opacity</code>’ does, and all the element's
    descendants are rendered together as a group with the masking applied to
    the group as a whole.
   <p> The ‘<a href="#mask"><code class=property>mask</code></a>’ and
    ‘<a href="#mask-image"><code class=property>mask-image</code></a>’
    properties have no effect on the geometry of any element's CSS boxes.
   <p> The compositing model follows the SVG compositing model <a
    href="#SVG11" rel=biblioentry>[SVG11]<!--{{!SVG11}}--></a>: first any
    filter effect is applied, then any clipping, masking and opacity. These
    effects all apply after any other CSS effects such as ‘<code
    class=property>border</code>’. As per SVG, the application of ‘<a
    href="#mask"><code class=property>mask</code></a>’ or ‘<a
    href="#mask-image"><code class=property>mask-image</code></a>’ has no
    effect on hit-testing.
   <h3 id=layering><span class=secno>5.1. </span>Layering Multiple Mask Images</h3>
   <p>The mask of a box can have multiple <span class=index
    id=layers>layers</span>. The number of layers is determined by the number
    of comma-separated values in the ‘<a href="#mask-image"><code
    class=property>mask-image</code></a>’ property. Note that a value of
    ‘<a href="#none"><code class=property>none</code></a>’ still creates a
    layer. See <a
    href="http://www.w3.org/TR/css3-background/#layering">Layering Multiple
    Background Images</a> <a href="#CSS3BG"
    rel=biblioentry>[CSS3BG]<!--{{!CSS3BG}}--></a>.
   <p>The first layer is the layer closest to the user, the next one is
    painted behind the first, and so on. All mask images are transformed to
    alpha masks (if necessary) and combined by compositing on the <a
    href="#TermMask">mask</a>.
   <h3 id=MaskValues><span class=secno>5.2. </span>Calculating mask values</h3>
   <p> A mask may be interpreted using one of two different methods with
    regards to calculating the mask values that will be multiplied with the
    target alpha values.
   <p> The first and simplest method of calculating the mask values is to use
    the alpha channel of the mask source. In this case the mask value at a
    given point is simply the value of the alpha channel at that point. The
    color channels do not contribute to the mask value.
   <p> The second method of calculating the mask values is to use the
    luminance of the mask source. In this case the mask value at a given point
    is computed from the color channel values and alpha channel value using
    the following procedure.
   <ol>
    <li>Compute a luminance value from the color channel values.
     <ul>
      <li> If the computed value of ‘<code
       class=property>color-interpolation</code>’ on the <a
       class=element-name href="#MaskElement">‘<code
       class=property>mask</code>’</a> element is ‘<code
       class=property>linearRGB</code>’, convert the original image color
       values (potentially in the sRGB color space) to the linear RGB color
       space.
      <li>Then, using non-premultiplied RGB color values, apply the
       luminance-to-alpha coefficients (as defined in the <a
       class=element-name
       href="http://www.w3.org/TR/2011/REC-SVG11-20110816/filters.html#feColorMatrixElement">‘<code
       class=property>feColorMatrix</code>’</a> filter primitive <a
       href="#SVG11" rel=biblioentry>[SVG11]<!--{{!SVG11}}--></a>) to convert
       the RGB color values to luminance values.
     </ul>
    <li>Multiply the computed luminance value by the corresponding alpha value
     to produce the mask value.
   </ol>
   <p>Regardless of the method used, the procedure for calculating mask values
    assumes the content of the mask is a four-channel RGBA graphics object.
    For other types of graphics objects, special handling is required as
    follows.
   <p>For a three-channel RGB graphics object that is used in a mask (e.g.,
    when referencing a three-channel image file), the effect is as if the
    object were converted into a four-channel RGBA image with the alpha
    channel uniformly set to 1.
   <p>For a single-channel image that is used in a mask (e.g., when
    referencing a single-channel grayscale image file), the effect is as if
    the object were converted into a four-channel RGBA image, where the single
    channel from the referenced object is used to compute the three color
    channels and the alpha channel is uniformly set to 1.
   <p class=note>Note that when referencing a grayscale image file, the
    transfer curve relating the encoded grayscale values to linear light
    values must be taken into account when computing the color channels.
   <p class=note>Note that SVG <a
    href="http://www.w3.org/TR/2011/REC-SVG11-20110816/intro.html#TermGraphicsElement">graphics
    elements</a> (e.g., <a class=element-name
    href="http://www.w3.org/TR/2011/REC-SVG11-20110816/shapes.html#CircleElement">‘<code
    class=property>circle</code>’</a> or <a class=element-name
    href="http://www.w3.org/TR/2011/REC-SVG11-20110816/text.html#TextElement">‘<code
    class=property>text</code>’</a>) are all treated as four-channel RGBA
    images for the purposes of masking operations.
   <p>The effect of a mask is identical to what would have happened if there
    were no mask but instead the alpha channel of the given object were
    multiplied with the mask's resulting mask values.
   <h2 id=masking><span class=secno>6. </span>Mask</h2>
   <h3 id=the-mask-image><span class=secno>6.1. </span>The ‘<a
    href="#mask-image"><code class=property>mask-image</code></a>’ property</h3>
   <table class=propdef>
    <tbody>
     <tr>
      <th>Name:
      <td><dfn id=mask-image>mask-image</dfn>
     <tr>
      <th><a href="#values">Value</a>:
      <td><a href="#ltmask-referencegt"><var>&lt;mask-reference&gt;</var></a>
     <tr>
      <th>Initial:
      <td>none
     <tr>
      <th>Applies to:
      <td>All elements. In SVG, it applies to <a
       href="http://www.w3.org/TR/2011/REC-SVG11-20110816/intro.html#TermContainerElement">container
       elements</a> and <a
       href="http://www.w3.org/TR/2011/REC-SVG11-20110816/intro.html#TermGraphicsElement">graphics
       elements</a>
     <tr>
      <th>Inherited:
      <td>no
     <tr>
      <th>Percentages:
      <td>N/A
     <tr>
      <th>Media:
      <td>visual
     <tr>
      <th>Computed value:
      <td>as specified, but with URIs made absolute
     <tr>
      <th>Animatable:
      <td>no
   </table>
   <p>This property sets the mask image(s) or the mask source of an element.
    Images are drawn with the first specified one on top (closest to the user)
    and each subsequent image behind the previous one. Where:
   <pre class=prod><var><dfn
    id=ltmask-referencegt>&lt;mask-reference&gt;</dfn></var> = <a
    href="#ltmask-imagegt"><var>&lt;mask-image&gt;</var></a># | <a
    href="#ltmask-elementgt"><var>&lt;mask-element&gt;</var></a></pre>
   <pre class=prod><var><dfn
    id=ltmask-imagegt>&lt;mask-image&gt;</dfn></var> = <a
    href="#ltimagegt"><var>&lt;image&gt;</var></a> | none </pre>
   <pre class=prod><var><dfn
    id=ltmask-elementgt>&lt;mask-element&gt;</dfn></var> = <a
    href="#lturlgt"><var>&lt;url&gt;</var></a> | <var>child</var> | <a
    href="#ltchild-selectorgt"><var>&lt;child-selector&gt;</var></a></pre>
   <pre class=prod><dfn
    id=ltchild-selectorgt>&lt;child-selector&gt;</dfn> = select(<a
    href="#ltcompound-selectorgt"><var>&lt;compound-selector&gt;</var></a>#)</pre>
   <p class=note>A <a
    href="#ltmask-elementgt"><var>&lt;mask-element&gt;</var></a> can just be
    specified as a single value and can not contibute to a list of <a
    href="#ltmask-referencegt"><var>&lt;mask-reference&gt;</var></a> values.
    Otherwise the specified value of the property is invalid. (See examples
    below.)
   <dl>
    <dt> <dfn id=lturlgt>‘<code class=css>&lt;url&gt;</code>’</dfn>
    <dd> A URL reference to a <a class=element-name
     href="#MaskElement">‘<code class=property>mask</code>’</a> element
     (for example ‘<code class=css>url(commonmasks.svg#mask)</code>’) or
     an <a href="#ltimagegt"><var>&lt;image&gt;</var></a>.
    <dt>‘<code class=css>child</code>’
    <dd> A keyword to indicate that the last direct sibling <a
     class=element-name href="#MaskElement">‘<code
     class=property>mask</code>’</a> element of the element the ‘<a
     href="#mask-image"><code class=property>mask-image</code></a>’ property
     is applied should be used as the mask source. It is equivalent to
     ‘<code class=css>select(mask:last-of-type)</code>’.
    <dt>‘<a href="#ltchild-selectorgt"><code
     class=css>&lt;child-selector&gt;</code></a>’
    <dd> A comma-separated list of <a
     href="http://dev.w3.org/csswg/selectors4/#compound">compound
     selector</a>s scoped at the element to which the ‘<a
     href="#mask-image"><code class=property>mask-image</code></a>’ property
     is applied. The first matching element in <a
     href="http://www.w3.org/TR/2012/WD-dom-20120405/#concept-tree-order">tree
     order</a> (as defined in <a href="#DOM"
     rel=biblioentry>[DOM]<!--{{!DOM}}--></a>) as a result of evaluating the
     list of selectors is taken as the mask source. If there are no matching
     elements the mask source is invalid.
    <dt><dfn id=ltcompound-selectorgt>‘<code
     class=css>&lt;compound-selector&gt;</code>’</dfn>
    <dd> A <a href="http://dev.w3.org/csswg/selectors4/#compound">compound
     selector</a> as defined in <a href="#SELECTORS4"
     rel=biblioentry>[SELECTORS4]<!--{{!SELECTORS4}}--></a>.
    <dd>
    <dt><dfn id=ltimagegt>&lt;image&gt;</dfn>
    <dd> A 2D image. (See <a href="#CSS3-IMAGES"
     rel=biblioentry>[CSS3-IMAGES]<!--{{!CSS3-IMAGES}}--></a>.)
    <dt><dfn id=none>‘<code class=css>none</code>’</dfn>
    <dd> A value of ‘<a href="#none"><code class=css>none</code></a>’
     counts as an image layer but does not mask the element.
   </dl>
   <p class=note>If the URI in the ‘<code class=css>url()</code>’ function
    has a fragment identifier, the <a
    href="#ltmask-referencegt"><var>&lt;mask-reference&gt;</var></a> is
    treated as <a
    href="#ltmask-elementgt"><var>&lt;mask-element&gt;</var></a>, otherwise as
    <a href="#ltmask-imagegt"><var>&lt;mask-image&gt;</var></a>.
   <p>An invalid or non-existent mask source is ignored and no masking is
    applied.
   <p>A mask image that is empty (zero width or zero height), that fails to
    download, is non-existent, or that cannot be displayed (e.g. because it is
    not in a supported image format) is ignored. No masking is applied.
   <p>See the section <a href="#layering">“Layering multiple mask
    images”</a> for how ‘<a href="#mask-image"><code
    class=property>mask-image</code></a>’ interacts with other
    comma-separated mask properties to form each mask image layer.
   <div class=example>
    <p>Some examples specifying mask images:
    <pre>
 body { mask-image: linear-gradient(black 0%, transparent 100%) }
 p { mask-image: none }
 div { mask-image: url(tl.png), url(tr.png) }
 </pre>
    <p>Some examples of a specified mask source:
    <pre>
 img { mask-image: url(#mask) }
 span { mask-image: url(resources.svg#mask2) }
 </pre>
    <p>Examples of <i>invalid</i> mask source usages:
    <pre>
 p { mask-image: url(#mask), url(tl.png) }
 img { mask-image: url(#mask), url(resources.svg#mask2) }
 </pre>
    <p>A <a href="#ltmask-elementgt"><var>&lt;mask-element&gt;</var></a> value
     that is either used together with another <a
     href="#ltmask-elementgt"><var>&lt;mask-element&gt;</var></a> value or an
     <a href="#ltmask-imagegt"><var>&lt;mask-image&gt;</var></a> value makes
     the whole specified ‘<a href="#mask-image"><code
     class=property>mask-image</code></a>’ value list invalid.
   </div>
   <h3 id=the-mask-source-type><span class=secno>6.2. </span>The ‘<a
    href="#mask-source-type"><code
    class=property>mask-source-type</code></a>’ property</h3>
   <table class=propdef>
    <tbody>
     <tr>
      <th>Name:
      <td><dfn id=mask-source-type>mask-source-type</dfn>
     <tr>
      <th><a href="#values">Value</a>:
      <td><a href="#ltsource-typegt"><var>&lt;source-type&gt;</var></a>#
     <tr>
      <th>Initial:
      <td>auto
     <tr>
      <th>Applies to:
      <td>All elements. In SVG, it applies to <a
       href="http://www.w3.org/TR/2011/REC-SVG11-20110816/intro.html#TermContainerElement">container
       elements</a> and <a
       href="http://www.w3.org/TR/2011/REC-SVG11-20110816/intro.html#TermGraphicsElement">graphics
       elements</a>
     <tr>
      <th>Inherited:
      <td>no
     <tr>
      <th>Percentages:
      <td>N/A
     <tr>
      <th>Media:
      <td>visual
     <tr>
      <th>Computed value:
      <td>as specified
     <tr>
      <th>Animatable:
      <td>no
   </table>
   <p>The ‘<a href="#mask-source-type"><code
    class=property>mask-source-type</code></a>’ property indicates whether
    the <a href="#ltmask-referencegt"><var>&lt;mask-reference&gt;</var></a> is
    treated as luminance mask or alpha mask. (See <a
    href="#MaskValues">Calculating mask values</a>.)
   <pre class=prod><dfn
    id=ltsource-typegt><var>&lt;source-type&gt;</var></dfn> = alpha | luminance | auto</pre>
   <p>Values have the following meanings:
   <dl>
    <dt><dfn id=alpha>‘<code class=css>alpha</code>’</dfn>
    <dd> A value of ‘<a href="#alpha"><code class=css>alpha</code></a>’
     indicates that the alpha values of the mask image should be used as the
     mask values. See <a href="#MaskValues">Calculating mask values</a>.
    <dt><dfn id=luminance>‘<code class=css>luminance</code>’</dfn>
    <dd> A value of ‘<a href="#luminance"><code
     class=css>luminance</code></a>’ indicates that the luminance values of
     the mask image should be used as the mask values. See <a
     href="#MaskValues">Calculating mask values</a>.
    <dt><dfn id=auto>‘<code class=css>auto</code>’</dfn>
    <dd>
     <p> If the <a
      href="#ltmask-referencegt"><var>&lt;mask-reference&gt;</var></a> of the
      ‘<a href="#mask-image"><code class=property>mask-image</code></a>’
      property is of type <a
      href="#ltmask-imagegt"><var>&lt;mask-image&gt;</var></a> the luminance
      values of the mask image should be used as the mask values.
     <p> If the <a
      href="#ltmask-referencegt"><var>&lt;mask-reference&gt;</var></a> of the
      ‘<a href="#mask-image"><code class=property>mask-image</code></a>’
      property is of type <a
      href="#ltmask-elementgt"><var>&lt;mask-element&gt;</var></a> the alpha
      values of the mask image should be used as the mask values.
   </dl>
   <div class=example>
    <p> In the following example, the ‘<a href="#mask-type"><code
     class=property>mask-type</code></a>’ property sets the mask type value
     for the <a class=element-name href="#MaskElement">‘<code
     class=property>mask</code>’</a> element to ‘<a href="#alpha"><code
     class=css>alpha</code></a>’. The ‘<a href="#mask-image"><code
     class=property>mask-image</code></a>’ property has a reference to this
     <a class=element-name href="#MaskElement">‘<code
     class=property>mask</code>’</a> element and the ‘<a
     href="#mask-source-type"><code
     class=property>mask-source-type</code></a>’ property has a value of
     ‘<a href="#luminance"><code class=css>luminance</code></a>’. The
     ‘<a href="#mask-source-type"><code
     class=property>mask-source-type</code></a>’ property will override the
     definition of ‘<a href="#mask-type"><code
     class=property>mask-type</code></a>’ to ‘<a href="#luminance"><code
     class=css>luminance</code></a>’.
    <pre>
 &lt;mask id="SVGMask" mask-type="alpha" maskContentUnits="objectBoundingBox"&gt;
   &lt;radialGradient id="radialFill"&gt;
     &lt;stop stop-color="white" offset="0"/&gt;
     &lt;stop stop-color="black" offset="1"/&gt;
   &lt;/radialGradient&gt;
   &lt;circle fill="url(#radialFill)" cx="0.5" cy="0.5" r="0.5"/&gt;
 &lt;/mask&gt;
 &lt;style&gt;
   rect {
     mask-image: url(#SVGMask);
     mask-source-type: luminance;
   }
 &lt;/style&gt;
 &lt;rect width="200" height="200" fill="green"/&gt;
 </pre>
   </div>
   <h3 id=the-mask-repeat><span class=secno>6.3. </span>The ‘<a
    href="#mask-repeat"><code class=property>mask-repeat</code></a>’
    property</h3>
   <table class=propdef>
    <tbody>
     <tr>
      <th>Name:
      <td><dfn id=mask-repeat>mask-repeat</dfn>
     <tr>
      <th><a href="#values">Value</a>:
      <td><a href="#ltrepeat-stylegt"><var>&lt;repeat-style&gt;</var></a>#
     <tr>
      <th>Initial:
      <td>repeat
     <tr>
      <th>Applies to:
      <td>All elements. In SVG, it applies to <a
       href="http://www.w3.org/TR/2011/REC-SVG11-20110816/intro.html#TermContainerElement">container
       elements</a> and <a
       href="http://www.w3.org/TR/2011/REC-SVG11-20110816/intro.html#TermGraphicsElement">graphics
       elements</a>
     <tr>
      <th>Inherited:
      <td>no
     <tr>
      <th>Percentages:
      <td>N/A
     <tr>
      <th>Media:
      <td>visual
     <tr>
      <th>Computed value:
      <td>A list, each item consisting of: two keywords, one per dimension
     <tr>
      <th>Animatable:
      <td>no
   </table>
   <p>Specifies how mask images are tiled after they have been <a
    href="#the-mask-size">sized</a> and <a
    href="#the-mask-position">positioned</a>. Where
   <pre class=prod><dfn
    id=ltrepeat-stylegt><var>&lt;repeat-style&gt;</var></dfn> = repeat-x | repeat-y | [repeat | space | round | no-repeat]{1,2}</pre>
   <p>See <a
    href="http://www.w3.org/TR/css3-background/#the-background-repeat">Tiling
    Images: the ‘<code class=property>background-repeat</code>’
    property</a> <a href="#CSS3BG"
    rel=biblioentry>[CSS3BG]<!--{{!CSS3BG}}--></a> for the definitions of the
    property values.
   <div class=example>
    <p style="display:none">Example(s):
    <pre>
 body {
   background-color: blue;
   mask-image: url(dot-mask.png) luminance;
   mask-repeat: space;
 }
 </pre>
    <div class=figure>
     <p><img alt="Image of an element with a dotted mask."
      src="images/mask-repeat.svg" style="border: solid black 1px;" width=240>
     <p class=caption>The effect of ‘<code class=property>space</code>’:
      the mask image of a dot is tiled to cover the whole <a class=index
      href="#mask-painting-area" id=mask-painting-area0>mask painting area</a>
      and the mask images are equally spaced.
    </div>
   </div>
   <p>See the section <a href="#layering">“Layering multiple mask
    images”</a> for how ‘<a href="#mask-repeat"><code
    class=property>mask-repeat</code></a>’ interacts with other
    comma-separated mask properties to form each mask image layer.
   <h3 id=the-mask-position><span class=secno>6.4. </span>The ‘<a
    href="#mask-position"><code class=property>mask-position</code></a>’
    property</h3>
   <table class=propdef>
    <tbody>
     <tr>
      <th>Name:
      <td><dfn id=mask-position>mask-position</dfn>
     <tr>
      <th><a href="#values">Value</a>:
      <td><a href="#ltpositiongt"><var>&lt;position&gt;</var></a>#
     <tr>
      <th>Initial:
      <td>0% 0%
     <tr>
      <th>Applies to:
      <td>All elements. In SVG, it applies to <a
       href="http://www.w3.org/TR/2011/REC-SVG11-20110816/intro.html#TermContainerElement">container
       elements</a> and <a
       href="http://www.w3.org/TR/2011/REC-SVG11-20110816/intro.html#TermGraphicsElement">graphics
       elements</a>
     <tr>
      <th>Inherited:
      <td>no
     <tr>
      <th>Percentages:
      <td>refer to size of <a class=index href="#mask-painting-area"
       id=mask-painting-area1>mask painting area</a> <em>minus</em> size of
       mask image; see text
     <tr>
      <th>Media:
      <td>visual
     <tr>
      <th>Computed value:
      <td>A list, each item consisting of: two keywords representing the
       origin and two offsets from that origin, each given as an absolute
       length (if given a &lt;length&gt;), otherwise as a percentage.
     <tr>
      <th>Animatable:
      <td>as <a
       href="http://dev.w3.org/csswg/css3-transitions/#animtype-repeatable-list">repeatable
       list</a> of <a
       href="http://dev.w3.org/csswg/css3-transitions/#animtype-simple-list">simple
       list</a> of <a
       href="http://dev.w3.org/csswg/css3-transitions/#animtype-lpcalc">length,
       percentage, or calc</a>
   </table>
   <p>Where
   <pre class=prod><dfn id=ltpositiongt><var>&lt;position&gt;</var></dfn> = [
   [ left | center | right | top | bottom | <var>&lt;percentage&gt;</var> | <var>&lt;length&gt;</var> ]
 |
   [ left | center | right | <var>&lt;percentage&gt;</var> | <var>&lt;length&gt;</var> ]
   [ top | center | bottom | <var>&lt;percentage&gt;</var> | <var>&lt;length&gt;</var> ]
 |
   [ center | [ left | right ] [ <var>&lt;percentage&gt;</var> | <var>&lt;length&gt;</var> ]? ] &amp;&amp;
   [ center | [ top | bottom ] [ <var>&lt;percentage&gt;</var> | <var>&lt;length&gt;</var> ]? ]
 ]</pre>
   <p>See <a
    href="http://www.w3.org/TR/css3-background/#the-background-position">Positioning
    Images: the ‘<code class=property>background-position</code>’
    property</a> <a href="#CSS3BG"
    rel=biblioentry>[CSS3BG]<!--{{!CSS3BG}}--></a> for the definitions of the
    property values.
   <div class=example>
    <p>In the example below, the (single) image is placed in the lower-right
     corner of the viewport.
    <pre>
 body {
   mask-image: url("logo.png");
   mask-position: 100% 100%;
   mask-repeat: no-repeat;
 }
 </pre>
   </div>
   <div class=example>
    <p>Mask positions can also be relative to other corners than the top left.
     E.g., the following puts the background image 10px from the bottom and
 em from the right:
    <pre>mask-position: right 3em bottom 10px</pre>
   </div>
   <p>See the section <a href="#layering">“Layering multiple mask
    images”</a> for how ‘<a href="#mask-position"><code
    class=property>mask-position</code></a>’ interacts with other
    comma-separated mask properties to form each mask image layer.
   <h3 id=the-mask-clip><span class=secno>6.5. </span>The ‘<a
    href="#mask-clip"><code class=property>mask-clip</code></a>’ property</h3>
   <table class=propdef>
    <tbody>
     <tr>
      <th>Name:
      <td><dfn id=mask-clip>mask-clip</dfn>
     <tr>
      <th><a href="#values">Value</a>:
      <td><a href="#ltclip-boxgt"><var>&lt;clip-box&gt;</var></a>#
     <tr>
      <th>Initial:
      <td>border-box
     <tr>
      <th>Applies to:
      <td>All elements. In SVG, it applies to <a
       href="http://www.w3.org/TR/2011/REC-SVG11-20110816/intro.html#TermContainerElement">container
       elements</a> and <a
       href="http://www.w3.org/TR/2011/REC-SVG11-20110816/intro.html#TermGraphicsElement">graphics
       elements</a>
     <tr>
      <th>Inherited:
      <td>no
     <tr>
      <th>Percentages:
      <td>N/A
     <tr>
      <th>Media:
      <td>visual
     <tr>
      <th>Computed value:
      <td>as specified
     <tr>
      <th>Animatable:
      <td>no
   </table>
   <p>Determines the <dfn id=mask-painting-area>mask painting area</dfn>,
    which determines the area that is affected by the mask. The painted
    content of an element may be resricted to this area. The syntax of the
    property is given with
   <pre class=prod><dfn id=ltclip-boxgt><var>&lt;clip-box&gt;</var></dfn> = <a
    href="#ltboxgt"><var>&lt;box&gt;</var></a> | no-clip</pre>
   <pre class=prod><dfn
    id=ltboxgt><var>&lt;box&gt;</var></dfn> = border-box | padding-box | content-box</pre>
   <p>Values have the following meanings:
   <dl>
    <dt><dfn id=border-box title="''border-box''!!'mask-clip' value"> ‘<code
     class=css>border-box</code>’</dfn>
    <dd>The painted content is rectricted to (clipped to) the <span>border
     box</span> respectively <span>painting box</span> for objects without
     associated layout box.
    <dt><dfn id=padding-box title="''padding-box''!!'mask-clip' value">
     ‘<code class=css>padding-box</code>’</dfn>
    <dd>The painted content is rectricted to (clipped to) the <span>padding
     box.</span>
    <dt><dfn id=content-box title="''content-box''!!'mask-clip' value">
     ‘<code class=css>content-box</code>’</dfn>
    <dd>The painted content is rectricted to (clipped to) the <span>content
     box</span> respectively <span>object bounding box</span> <a href="#SVG11"
     rel=biblioentry>[SVG11]<!--{{!SVG11}}--></a> for objects without
     associated layout box.
    <dt><dfn id=no-clip title="''no-clip''!!'mask-clip' value"> ‘<code
     class=css>no-clip</code>’</dfn>
    <dd>The painted content is not restricted (not clipped). The <a
     href="#mask-painting-area">mask painting area</a> is set to the <a
     href="#bounding-client-rect">bounding client rect</a>.
   </dl>
   <p class=note>Note that there is no corresponding box for ‘<code
    class=css>padding-box</code>’ on objects without associated layout box
    and ‘<a href="#content-box0"><code class=css>content-box</code></a>’
    is choosen instead.
   <p>See the section <a href="#layering">“Layering multiple mask
    images”</a> for how ‘<a href="#mask-clip"><code
    class=property>mask-clip</code></a>’ interacts with other
    comma-separated mask properties to form each mask image layer.
   <h3 id=the-mask-origin><span class=secno>6.6. </span>The ‘<a
    href="#mask-origin"><code class=property>mask-origin</code></a>’
    property</h3>
   <table class=propdef>
    <tbody>
     <tr>
      <th>Name:
      <td><dfn id=mask-origin>mask-origin</dfn>
     <tr>
      <th><a href="#values">Value</a>:
      <td><a href="#ltboxgt"><var>&lt;box&gt;</var></a>#
     <tr>
      <th>Initial:
      <td>padding-box
     <tr>
      <th>Applies to:
      <td>All elements. In SVG, it applies to <a
       href="http://www.w3.org/TR/2011/REC-SVG11-20110816/intro.html#TermContainerElement">container
       elements</a> and <a
       href="http://www.w3.org/TR/2011/REC-SVG11-20110816/intro.html#TermGraphicsElement">graphics
       elements</a>
     <tr>
      <th>Inherited:
      <td>no
     <tr>
      <th>Percentages:
      <td>N/A
     <tr>
      <th>Media:
      <td>visual
     <tr>
      <th>Computed value:
      <td>as specified
     <tr>
      <th>Animatable:
      <td>no
   </table>
   <p>For elements rendered as a single box, specifies the <dfn
    id=mask-positioning-area>mask positioning area</dfn>. For elements
    rendered as multiple boxes (e.g., inline boxes on several lines, boxes on
    several pages) specifies which boxes ‘<code
    class=property>box-decoration-break</code>’ operates on to determine the
    mask positioning area(s).
   <dl>
    <dt><dfn id=padding-box0 title="''padding-box''!!'mask-origin' value">
     ‘<code class=css>padding-box</code>’</dfn>
    <dd>The position is relative to the padding box. (For single boxes
     ‘<code class=css>0 0</code>’ is the upper left corner of the padding
     edge, ‘<code class=css>100% 100%</code>’ is the lower right corner.)
    <dt><dfn id=border-box0 title="''border-box''!!'mask-origin' value">
     ‘<code class=css>border-box</code>’</dfn>
    <dd>The position is relative to the border box respectively <span>painting
     box</span> for objects without associated layout box.
    <dt><dfn id=content-box0>‘<code class=css>content-box</code>’</dfn>
    <dd>The position is relative to the content box respectively object
     bounding box <a href="#SVG11"
     rel=biblioentry>[SVG11]<!--{{!SVG11}}--></a> for objects without
     associated layout box.
   </dl>
   <p class=note>Note that there is no corresponding box for ‘<code
    class=css>padding-box</code>’ on objects without associated layout box
    and ‘<a href="#content-box0"><code class=css>content-box</code></a>’
    is choosen instead.
   <p class=note>Note that if ‘<a href="#mask-clip"><code
    class=property>mask-clip</code></a>’ is ‘<code
    class=css>padding-box</code>’, ‘<a href="#mask-origin"><code
    class=property>mask-origin</code></a>’ is ‘<code
    class=css>border-box</code>’, ‘<a href="#mask-position"><code
    class=property>mask-position</code></a>’ is ‘<code class=css>top
    left</code>’ (the initial value), and the element has a non-zero border,
    then the top and left of the mask image will be clipped.
   <p>See the section <a href="#layering">“Layering multiple mask
    images”</a> for how ‘<a href="#mask-origin"><code
    class=property>mask-origin</code></a>’ interacts with other
    comma-separated mask properties to form each mask image layer.
   <h3 id=the-mask-size><span class=secno>6.7. </span>The ‘<a
    href="#mask-size"><code class=property>mask-size</code></a>’ property</h3>
   <table class=propdef>
    <tbody>
     <tr>
      <th>Name:
      <td><dfn id=mask-size>mask-size</dfn>
     <tr>
      <th><a href="#values">Value</a>:
      <td><a href="#ltmask-sizegt"><var>&lt;mask-size&gt;</var></a>#
     <tr>
      <th>Initial:
      <td>auto
     <tr>
      <th>Applies to:
      <td>All elements. In SVG, it applies to <a
       href="http://www.w3.org/TR/2011/REC-SVG11-20110816/intro.html#TermContainerElement">container
       elements</a> and <a
       href="http://www.w3.org/TR/2011/REC-SVG11-20110816/intro.html#TermGraphicsElement">graphics
       elements</a>
     <tr>
      <th>Inherited:
      <td>no
     <tr>
      <th>Percentages:
      <td>see text
     <tr>
      <th>Media:
      <td>visual
     <tr>
      <th>Computed value:
      <td>as specified, but with lengths made absolute
     <tr>
      <th>Animatable:
      <td>as <a
       href="http://dev.w3.org/csswg/css3-transitions/#animtype-repeatable-list">repeatable
       list</a> of <a
       href="http://dev.w3.org/csswg/css3-transitions/#animtype-simple-list">simple
       list</a> of <a
       href="http://dev.w3.org/csswg/css3-transitions/#animtype-lpcalc">length,
       percentage, or calc</a> (<span class=note>This means keyword values are
       not animatable.</span>)
   </table>
   <p>Specifies the size of the mask images. Where
   <pre class=prod><dfn
    id=ltmask-sizegt><var>&lt;mask-size&gt;</var></dfn> = [ <var>&lt;length&gt;</var> | <var>&lt;percentage&gt;</var> | auto ]{1,2} | cover | contain</pre>
   <p>See <a
    href="http://www.w3.org/TR/css3-background/#the-background-size">Sizing
    Images: the ‘background-size’ property</a> <a href="#CSS3BG"
    rel=biblioentry>[CSS3BG]<!--{{!CSS3BG}}--></a> for the definitions of the
    property values.
   <p>See the section <a href="#layering">“Layering multiple mask
    images”</a> for how ‘<a href="#mask-size"><code
    class=property>mask-size</code></a>’ interacts with other
    comma-separated mask properties to form each mask image layer.
   <h3 id=mask-property><span class=secno>6.8. </span>The ‘<a
    href="#mask"><code class=property>mask</code></a>’ property</h3>
   <table class=propdef>
    <tbody>
     <tr>
      <th>Name:
      <td><dfn id=MaskProperty>mask</dfn>
     <tr>
      <th>Value:
      <td><a href="#ltmask-layergt"><var>&lt;mask-layer&gt;</var></a>#
     <tr>
      <th>Initial:
      <td>see individual properties
     <tr>
      <th>Applies to:
      <td>All elements. In SVG, it applies to <a
       href="http://www.w3.org/TR/2011/REC-SVG11-20110816/intro.html#TermContainerElement">container
       elements</a> and <a
       href="http://www.w3.org/TR/2011/REC-SVG11-20110816/intro.html#TermGraphicsElement">graphics
       elements</a>
     <tr>
      <th>Inherited:
      <td>no
     <tr>
      <th>Percentages:
      <td>see individual properties
     <tr>
      <th>Media:
      <td>visual
     <tr>
      <th>Computed value:
      <td>see individual properties
     <tr>
      <th>Animatable:
      <td>see individual properties
   </table>
   <p>Where
   <pre class=prod><dfn id=ltmask-layergt>&lt;mask-layer&gt;</dfn> = <a
    href="#ltmask-referencegt"><var>&lt;mask-reference&gt;</var></a> <a
    href="#ltsource-typegt"><var>&lt;source-type&gt;</var></a>? || <a
    href="#ltpositiongt"><var>&lt;position&gt;</var></a> [ / <a
    href="#ltmask-sizegt"><var>&lt;mask-size&gt;</var></a> ]? || <a
    href="#ltrepeat-stylegt"><var>&lt;repeat-style&gt;</var></a> || <a
    href="#ltboxgt"><var>&lt;box&gt;</var></a> || <a
    href="#ltclip-boxgt"><var>&lt;clip-box&gt;</var></a></pre>
   <p> If one <a href="#ltboxgt"><var>&lt;box&gt;</var></a> value is present
    then it sets both ‘<a href="#mask-origin"><code
    class=property>mask-origin</code></a>’ and ‘<a href="#mask-clip"><code
    class=property>mask-clip</code></a>’ to that value. If two <a
    href="#ltboxgt"><var>&lt;box&gt;</var></a> values are present, then the
    first sets ‘<a href="#mask-origin"><code
    class=property>mask-origin</code></a>’ and the second ‘<a
    href="#mask-clip"><code class=property>mask-clip</code></a>’.
   <p class=note> Note that the properties ‘<a href="#mask-image"><code
    class=property>mask-image</code></a>’, ‘<a href="#mask-repeat"><code
    class=property>mask-repeat</code></a>’, ‘<a
    href="#mask-position"><code class=property>mask-position</code></a>’,
    ‘<a href="#mask-clip"><code class=property>mask-clip</code></a>’,
    ‘<a href="#mask-origin"><code class=property>mask-origin</code></a>’
    and ‘<a href="#mask-size"><code class=property>mask-size</code></a>’
    have no affect on <a class=element-name href="#MaskElement">‘<code
    class=property>mask</code>’</a> elements.
   <h3 id=the-mask-type><span class=secno>6.9. </span>The ‘<a
    href="#mask-type"><code class=property>mask-type</code></a>’ property</h3>
   <table class=propdef>
    <tbody>
     <tr>
      <th>Name:
      <td><dfn id=mask-type>mask-type</dfn>
     <tr>
      <th><a href="#values">Value</a>:
      <td>luminance | alpha
     <tr>
      <th>Initial:
      <td>luminance
     <tr>
      <th>Applies to:
      <td><a class=element-name href="#MaskElement">‘<code
       class=property>mask</code>’</a> elements
     <tr>
      <th>Inherited:
      <td>no
     <tr>
      <th>Percentages:
      <td>N/A
     <tr>
      <th>Media:
      <td>visual
     <tr>
      <th>Computed value:
      <td>as specified
     <tr>
      <th>Animatable:
      <td>no
   </table>
   <p>The ‘<a href="#mask-type"><code class=property>mask-type</code></a>’
    property defines whether the content of the <a class=element-name
    href="#MaskElement">‘<code class=property>mask</code>’</a> is treated
    as as luminance mask or alpha mask, as described in <a
    href="#MaskValues">Calculating mask values</a>.
   <p>Values have the following meanings:
   <dl>
    <dt>‘<a href="#luminance"><code class=css>luminance</code></a>’
    <dd>Indicates that the luminance values of the mask should be used.
    <dt>‘<a href="#alpha"><code class=css>alpha</code></a>’
    <dd>Indicates that the alpha values of the mask should be used.
   </dl>
   <p>The ‘<a href="#mask-type"><code class=property>mask-type</code></a>’
    property is a presentation attribute for SVG elements.
   <h3 id=MaskElement><span class=secno>6.10. </span>The <a class=element-name
    href="#mask">‘<code class=property>mask</code>’</a> element</h3>
   <table class=propdef summary="mask element">
    <tbody>
     <tr>
      <th>Name:
      <td><dfn id=mask>mask</dfn>
     <tr>
      <th>Categories:
      <td><a
       href="http://www.w3.org/TR/2011/REC-SVG11-20110816/intro.html#TermContainerElement">Container
       element</a>
     <tr>
      <th>Content model:
      <td>Any number of the following elements, in any order:
       <ul class=no-bullets>
        <li><a
         href="http://www.w3.org/TR/2011/REC-SVG11-20110816/intro.html#TermAnimationElement">animation</a>
         <span class=expanding> — <a
         href="http://www.w3.org/TR/2011/REC-SVG11-20110816/animate.html#AnimateElement"><span
         class=element-name>‘animate’</span></a>, <a
         href="http://www.w3.org/TR/2011/REC-SVG11-20110816/animate.html#AnimateColorElement"><span
         class=element-name>‘animateColor’</span></a>, <a
         href="http://www.w3.org/TR/2011/REC-SVG11-20110816/animate.html#AnimateMotionElement"><span
         class=element-name>‘animateMotion’</span></a>, <a
         href="http://www.w3.org/TR/2011/REC-SVG11-20110816/animate.html#AnimateTransformElement"><span
         class=element-name>‘animateTransform’</span></a>, <a
         href="http://www.w3.org/TR/2011/REC-SVG11-20110816/animate.html#SetElement"><span
         class=element-name>‘set’</span></a></span>
        <li><a
         href="http://www.w3.org/TR/2011/REC-SVG11-20110816/intro.html#TermDescriptiveElement">descriptive</a>
         <span class=expanding> — <a
         href="http://www.w3.org/TR/2011/REC-SVG11-20110816/struct.html#DescElement"><span
         class=element-name>‘desc’</span></a>, <a
         href="http://www.w3.org/TR/2011/REC-SVG11-20110816/struct.html#TitleElement"><span
         class=element-name>‘title’</span></a>, <a
         href="http://www.w3.org/TR/2011/REC-SVG11-20110816/metadata.html#MetadataElement"><span
         class=element-name>‘metadata’</span></a></span>
        <li><a
         href="http://www.w3.org/TR/2011/REC-SVG11-20110816/intro.html#TermShapeElement">shape</a>
         <span class=expanding> — <a
         href="http://www.w3.org/TR/2011/REC-SVG11-20110816/shapes.html#CircleElement"><span
         class=element-name>‘circle’</span></a>, <a
         href="http://www.w3.org/TR/2011/REC-SVG11-20110816/shapes.html#EllipseElement"><span
         class=element-name>‘ellipse’</span></a>, <a
         href="http://www.w3.org/TR/2011/REC-SVG11-20110816/shapes.html#LineElement"><span
         class=element-name>‘line’</span></a>, <a
         href="http://www.w3.org/TR/2011/REC-SVG11-20110816/paths.html#PathElement"><span
         class=element-name>‘path’</span></a>, <a
         href="http://www.w3.org/TR/2011/REC-SVG11-20110816/shapes.html#PolygonElement"><span
         class=element-name>‘polygon’</span></a>, <a
         href="http://www.w3.org/TR/2011/REC-SVG11-20110816/shapes.html#PolylineElement"><span
         class=element-name>‘polyline’</span></a>, <a
         href="http://www.w3.org/TR/2011/REC-SVG11-20110816/shapes.html#RectElement"><span
         class=element-name>‘rect’</span></a></span>
        <li><a
         href="http://www.w3.org/TR/2011/REC-SVG11-20110816/intro.html#TermStructuralElement">structural</a>
         <span class=expanding> — <a
         href="http://www.w3.org/TR/2011/REC-SVG11-20110816/struct.html#DefsElement"><span
         class=element-name>‘defs’</span></a>, <a
         href="http://www.w3.org/TR/2011/REC-SVG11-20110816/struct.html#GElement"><span
         class=element-name>‘g’</span></a>, <a
         href="http://www.w3.org/TR/2011/REC-SVG11-20110816/struct.html#SVGElement"><span
         class=element-name>‘svg’</span></a>, <a
         href="http://www.w3.org/TR/2011/REC-SVG11-20110816/struct.html#SymbolElement"><span
         class=element-name>‘symbol’</span></a>, <a
         href="http://www.w3.org/TR/2011/REC-SVG11-20110816/struct.html#UseElement"><span
         class=element-name>‘use’</span></a></span>
        <li><a
         href="http://www.w3.org/TR/2011/REC-SVG11-20110816/intro.html#TermGradientElement">gradient</a>
         <span class=expanding> — <a
         href="http://www.w3.org/TR/2011/REC-SVG11-20110816/pservers.html#LinearGradientElement"><span
         class=element-name>‘linearGradient’</span></a>, <a
         href="http://www.w3.org/TR/2011/REC-SVG11-20110816/pservers.html#RadialGradientElement"><span
         class=element-name>‘radialGradient’</span></a></span>
        <li><a
         href="http://www.w3.org/TR/2011/REC-SVG11-20110816/linking.html#AElement"><span
         class=element-name>‘a’</span></a>
        <li><a href="#ClipPathElement"><span
         class=element-name>‘clipPath’</span></a>
        <li><a
         href="http://www.w3.org/TR/2011/REC-SVG11-20110816/color.html#ColorProfileElement"><span
         class=element-name>‘color-profile’</span></a>
        <li><a
         href="http://www.w3.org/TR/2011/REC-SVG11-20110816/interact.html#CursorElement"><span
         class=element-name>‘cursor’</span></a>
        <li><a
         href="http://www.w3.org/TR/2011/REC-SVG11-20110816/filters.html#FilterElement"><span
         class=element-name>‘filter’</span></a>
        <li><a
         href="http://www.w3.org/TR/2011/REC-SVG11-20110816/fonts.html#FontElement"><span
         class=element-name>‘font’</span></a>
        <li><a
         href="http://www.w3.org/TR/2011/REC-SVG11-20110816/fonts.html#FontFaceElement"><span
         class=element-name>‘font-face’</span></a>
        <li><a
         href="http://www.w3.org/TR/2011/REC-SVG11-20110816/extend.html#ForeignObjectElement"><span
         class=element-name>‘foreignObject’</span></a>
        <li><a
         href="http://www.w3.org/TR/2011/REC-SVG11-20110816/struct.html#ImageElement"><span
         class=element-name>‘image’</span></a>
        <li><a
         href="http://www.w3.org/TR/2011/REC-SVG11-20110816/painting.html#MarkerElement"><span
         class=element-name>‘marker’</span></a>
        <li><a href="#MaskElement"><span
         class=element-name>‘mask’</span></a>
        <li><a
         href="http://www.w3.org/TR/2011/REC-SVG11-20110816/pservers.html#PatternElement"><span
         class=element-name>‘pattern’</span></a>
        <li><a
         href="http://www.w3.org/TR/2011/REC-SVG11-20110816/script.html#ScriptElement"><span
         class=element-name>‘script’</span></a>
        <li><a
         href="http://www.w3.org/TR/2011/REC-SVG11-20110816/styling.html#StyleElement"><span
         class=element-name>‘style’</span></a>
        <li><a
         href="http://www.w3.org/TR/2011/REC-SVG11-20110816/struct.html#SwitchElement"><span
         class=element-name>‘switch’</span></a>
        <li><a
         href="http://www.w3.org/TR/2011/REC-SVG11-20110816/linking.html#ViewElement"><span
         class=element-name>‘view’</span></a>
        <li><a
         href="http://www.w3.org/TR/2011/REC-SVG11-20110816/text.html#TextElement"><span
         class=element-name>‘text’</span></a>
        <li><a
         href="http://www.w3.org/TR/2011/REC-SVG11-20110816/text.html#AltGlyphDefElement"><span
         class=element-name>‘altGlyphDef’</span></a>
       </ul>
     <tr>
      <th>Attributes:
      <td>
       <ul class=no-bullets>
        <li><a
         href="http://www.w3.org/TR/2011/REC-SVG11-20110816/intro.html#TermConditionalProcessingAttribute">conditional
         processing attributes</a><span class=expanding> — <a
         href="http://www.w3.org/TR/2011/REC-SVG11-20110816/struct.html#RequiredFeaturesAttribute"><span
         class=attr-name>‘requiredFeatures’</span></a>, <a
         href="http://www.w3.org/TR/2011/REC-SVG11-20110816/struct.html#RequiredExtensionsAttribute"><span
         class=attr-name>‘requiredExtensions’</span></a>, <a
         href="http://www.w3.org/TR/2011/REC-SVG11-20110816/struct.html#SystemLanguageAttribute"><span
         class=attr-name>‘systemLanguage’</span></a></span>
        <li><a
         href="http://www.w3.org/TR/2011/REC-SVG11-20110816/intro.html#TermCoreAttributes">core
         attributes</a><span class=expanding> — <a
         href="http://www.w3.org/TR/2011/REC-SVG11-20110816/struct.html#IDAttribute"><span
         class=attr-name>‘id’</span></a>, <a
         href="http://www.w3.org/TR/2011/REC-SVG11-20110816/struct.html#XMLBaseAttribute"><span
         class=attr-name>‘xml:base’</span></a>, <a
         href="http://www.w3.org/TR/2011/REC-SVG11-20110816/struct.html#XMLLangAttribute"><span
         class=attr-name>‘xml:lang’</span></a>, <a
         href="http://www.w3.org/TR/2011/REC-SVG11-20110816/struct.html#XMLSpaceAttribute"><span
         class=attr-name>‘xml:space’</span></a></span>
        <li><a
         href="http://www.w3.org/TR/2011/REC-SVG11-20110816/intro.html#TermPresentationAttribute">presentation
         attributes</a><span class=expanding> — <a
         href="http://www.w3.org/TR/2011/REC-SVG11-20110816/text.html#AlignmentBaselineProperty"><span
         class=attr-name>‘alignment-baseline’</span></a>, <a
         href="http://www.w3.org/TR/2011/REC-SVG11-20110816/text.html#BaselineShiftProperty"><span
         class=attr-name>‘baseline-shift’</span></a>, <a
         href="http://www.w3.org/TR/2011/REC-SVG11-20110816/masking.html#ClipProperty"><span
         class=attr-name>‘clip’</span></a>, <a
         href="http://www.w3.org/TR/2011/REC-SVG11-20110816/masking.html#ClipPathProperty"><span
         class=attr-name>‘clip-path’</span></a>, <a
         href="http://www.w3.org/TR/2011/REC-SVG11-20110816/masking.html#ClipRuleProperty"><span
         class=attr-name>‘clip-rule’</span></a>, <a
         href="http://www.w3.org/TR/2011/REC-SVG11-20110816/color.html#ColorProperty"><span
         class=attr-name>‘color’</span></a>, <a
         href="http://www.w3.org/TR/2011/REC-SVG11-20110816/painting.html#ColorInterpolationProperty"><span
         class=attr-name>‘color-interpolation’</span></a>, <a
         href="http://www.w3.org/TR/2011/REC-SVG11-20110816/painting.html#ColorInterpolationFiltersProperty"><span
         class=attr-name>‘color-interpolation-filters’</span></a>, <a
         href="http://www.w3.org/TR/2011/REC-SVG11-20110816/color.html#ColorProfileProperty"><span
         class=attr-name>‘color-profile’</span></a>, <a
         href="http://www.w3.org/TR/2011/REC-SVG11-20110816/painting.html#ColorRenderingProperty"><span
         class=attr-name>‘color-rendering’</span></a>, <a
         href="http://www.w3.org/TR/2011/REC-SVG11-20110816/interact.html#CursorProperty"><span
         class=attr-name>‘cursor’</span></a>, <a
         href="http://www.w3.org/TR/2011/REC-SVG11-20110816/text.html#DirectionProperty"><span
         class=attr-name>‘direction’</span></a>, <a
         href="http://www.w3.org/TR/2011/REC-SVG11-20110816/painting.html#DisplayProperty"><span
         class=attr-name>‘display’</span></a>, <a
         href="http://www.w3.org/TR/2011/REC-SVG11-20110816/text.html#DominantBaselineProperty"><span
         class=attr-name>‘dominant-baseline’</span></a>, <a
         href="http://www.w3.org/TR/2011/REC-SVG11-20110816/filters.html#EnableBackgroundProperty"><span
         class=attr-name>‘enable-background’</span></a>, <a
         href="http://www.w3.org/TR/2011/REC-SVG11-20110816/painting.html#FillProperty"><span
         class=attr-name>‘fill’</span></a>, <a
         href="http://www.w3.org/TR/2011/REC-SVG11-20110816/painting.html#FillOpacityProperty"><span
         class=attr-name>‘fill-opacity’</span></a>, <a
         href="http://www.w3.org/TR/2011/REC-SVG11-20110816/painting.html#FillRuleProperty"><span
         class=attr-name>‘fill-rule’</span></a>, <a
         href="http://www.w3.org/TR/2011/REC-SVG11-20110816/filters.html#FilterProperty"><span
         class=attr-name>‘filter’</span></a>, <a
         href="http://www.w3.org/TR/2011/REC-SVG11-20110816/filters.html#FloodColorProperty"><span
         class=attr-name>‘flood-color’</span></a>, <a
         href="http://www.w3.org/TR/2011/REC-SVG11-20110816/filters.html#FloodOpacityProperty"><span
         class=attr-name>‘flood-opacity’</span></a>, <a
         href="http://www.w3.org/TR/2011/REC-SVG11-20110816/text.html#FontProperty"><span
         class=attr-name>‘font’</span></a>, <a
         href="http://www.w3.org/TR/2011/REC-SVG11-20110816/text.html#FontFamilyProperty"><span
         class=attr-name>‘font-family’</span></a>, <a
         href="http://www.w3.org/TR/2011/REC-SVG11-20110816/text.html#FontSizeProperty"><span
         class=attr-name>‘font-size’</span></a>, <a
         href="http://www.w3.org/TR/2011/REC-SVG11-20110816/text.html#FontSizeAdjustProperty"><span
         class=attr-name>‘font-size-adjust’</span></a>, <a
         href="http://www.w3.org/TR/2011/REC-SVG11-20110816/text.html#FontStretchProperty"><span
         class=attr-name>‘font-stretch’</span></a>, <a
         href="http://www.w3.org/TR/2011/REC-SVG11-20110816/text.html#FontStyleProperty"><span
         class=attr-name>‘font-style’</span></a>, <a
         href="http://www.w3.org/TR/2011/REC-SVG11-20110816/text.html#FontVariantProperty"><span
         class=attr-name>‘font-variant’</span></a>, <a
         href="http://www.w3.org/TR/2011/REC-SVG11-20110816/text.html#FontWeightProperty"><span
         class=attr-name>‘font-weight’</span></a>, <a
         href="http://www.w3.org/TR/2011/REC-SVG11-20110816/text.html#GlyphOrientationHorizontalProperty"><span
         class=attr-name>‘glyph-orientation-horizontal’</span></a>, <a
         href="http://www.w3.org/TR/2011/REC-SVG11-20110816/text.html#GlyphOrientationVerticalProperty"><span
         class=attr-name>‘glyph-orientation-vertical’</span></a>, <a
         href="http://www.w3.org/TR/2011/REC-SVG11-20110816/painting.html#ImageRenderingProperty"><span
         class=attr-name>‘image-rendering’</span></a>, <a
         href="http://www.w3.org/TR/2011/REC-SVG11-20110816/text.html#KerningProperty"><span
         class=attr-name>‘kerning’</span></a>, <a
         href="http://www.w3.org/TR/2011/REC-SVG11-20110816/text.html#LetterSpacingProperty"><span
         class=attr-name>‘letter-spacing’</span></a>, <a
         href="http://www.w3.org/TR/2011/REC-SVG11-20110816/filters.html#LightingColorProperty"><span
         class=attr-name>‘lighting-color’</span></a>, <a
         href="http://www.w3.org/TR/2011/REC-SVG11-20110816/painting.html#MarkerProperty"><span
         class=attr-name>‘marker’</span></a>, <a
         href="http://www.w3.org/TR/2011/REC-SVG11-20110816/painting.html#MarkerEndProperty"><span
         class=attr-name>‘marker-end’</span></a>, <a
         href="http://www.w3.org/TR/2011/REC-SVG11-20110816/painting.html#MarkerMidProperty"><span
         class=attr-name>‘marker-mid’</span></a>, <a
         href="http://www.w3.org/TR/2011/REC-SVG11-20110816/painting.html#MarkerStartProperty"><span
         class=attr-name>‘marker-start’</span></a>, <a
         href="#MaskProperty"><span class=attr-name>‘mask’</span></a>, <a
         href="http://www.w3.org/TR/2011/REC-SVG11-20110816/masking.html#OpacityProperty"><span
         class=attr-name>‘opacity’</span></a>, <a
         href="http://www.w3.org/TR/2011/REC-SVG11-20110816/masking.html#OverflowProperty"><span
         class=attr-name>‘overflow’</span></a>, <a
         href="http://www.w3.org/TR/2011/REC-SVG11-20110816/interact.html#PointerEventsProperty"><span
         class=attr-name>‘pointer-events’</span></a>, <a
         href="http://www.w3.org/TR/2011/REC-SVG11-20110816/painting.html#ShapeRenderingProperty"><span
         class=attr-name>‘shape-rendering’</span></a>, <a
         href="http://www.w3.org/TR/2011/REC-SVG11-20110816/pservers.html#StopColorProperty"><span
         class=attr-name>‘stop-color’</span></a>, <a
         href="http://www.w3.org/TR/2011/REC-SVG11-20110816/pservers.html#StopOpacityProperty"><span
         class=attr-name>‘stop-opacity’</span></a>, <a
         href="http://www.w3.org/TR/2011/REC-SVG11-20110816/painting.html#StrokeProperty"><span
         class=attr-name>‘stroke’</span></a>, <a
         href="http://www.w3.org/TR/2011/REC-SVG11-20110816/painting.html#StrokeDasharrayProperty"><span
         class=attr-name>‘stroke-dasharray’</span></a>, <a
         href="http://www.w3.org/TR/2011/REC-SVG11-20110816/painting.html#StrokeDashoffsetProperty"><span
         class=attr-name>‘stroke-dashoffset’</span></a>, <a
         href="http://www.w3.org/TR/2011/REC-SVG11-20110816/painting.html#StrokeLinecapProperty"><span
         class=attr-name>‘stroke-linecap’</span></a>, <a
         href="http://www.w3.org/TR/2011/REC-SVG11-20110816/painting.html#StrokeLinejoinProperty"><span
         class=attr-name>‘stroke-linejoin’</span></a>, <a
         href="http://www.w3.org/TR/2011/REC-SVG11-20110816/painting.html#StrokeMiterlimitProperty"><span
         class=attr-name>‘stroke-miterlimit’</span></a>, <a
         href="http://www.w3.org/TR/2011/REC-SVG11-20110816/painting.html#StrokeOpacityProperty"><span
         class=attr-name>‘stroke-opacity’</span></a>, <a
         href="http://www.w3.org/TR/2011/REC-SVG11-20110816/painting.html#StrokeWidthProperty"><span
         class=attr-name>‘stroke-width’</span></a>, <a
         href="http://www.w3.org/TR/2011/REC-SVG11-20110816/text.html#TextAnchorProperty"><span
         class=attr-name>‘text-anchor’</span></a>, <a
         href="http://www.w3.org/TR/2011/REC-SVG11-20110816/text.html#TextDecorationProperty"><span
         class=attr-name>‘text-decoration’</span></a>, <a
         href="http://www.w3.org/TR/2011/REC-SVG11-20110816/painting.html#TextRenderingProperty"><span
         class=attr-name>‘text-rendering’</span></a>, <a
         href="http://www.w3.org/TR/2011/REC-SVG11-20110816/text.html#UnicodeBidiProperty"><span
         class=attr-name>‘unicode-bidi’</span></a>, <a
         href="http://www.w3.org/TR/2011/REC-SVG11-20110816/painting.html#VisibilityProperty"><span
         class=attr-name>‘visibility’</span></a>, <a
         href="http://www.w3.org/TR/2011/REC-SVG11-20110816/text.html#WordSpacingProperty"><span
         class=attr-name>‘word-spacing’</span></a>, <a
         href="http://www.w3.org/TR/2011/REC-SVG11-20110816/text.html#WritingModeProperty"><span
         class=attr-name>‘writing-mode’</span></a></span>
        <li><a
         href="http://www.w3.org/TR/2011/REC-SVG11-20110816/styling.html#ClassAttribute"><span
         class=attr-name>‘class’</span></a>
        <li><a
         href="http://www.w3.org/TR/2011/REC-SVG11-20110816/styling.html#StyleAttribute"><span
         class=attr-name>‘style’</span></a>
        <li><a href="#MaskElementXAttribute"><span
         class=attr-name>‘x’</span></a>
        <li><a href="#MaskElementYAttribute"><span
         class=attr-name>‘y’</span></a>
        <li><a href="#MaskElementWidthAttribute"><span
         class=attr-name>‘width’</span></a>
        <li><a href="#MaskElementHeightAttribute"><span
         class=attr-name>‘height’</span></a>
        <li><a href="#MaskElementMaskUnitsAttribute"><span
         class=attr-name>‘maskUnits’</span></a>
        <li><a href="#MaskElementMaskContentUnitsAttribute"><span
         class=attr-name>‘maskContentUnits’</span></a>
       </ul>
     <tr>
      <th>DOM Interfaces:
      <td><a class=idlinterface
       href="#InterfaceSVGMaskElement">SVGMaskElement</a>
   </table>
   <div class=adef-list>
    <p><em>Attribute definitions:</em>
    <dl>
     <dt id=MaskElementMaskUnitsAttribute><span class=adef>maskUnits</span> =
      "<em>userSpaceOnUse</em> | <em>objectBoundingBox</em>"
     <dd>Defines the coordinate system for attributes <a class=attr-name
      href="#MaskElementXAttribute">‘<code class=property>x</code>’</a>,
      <a class=attr-name href="#MaskElementYAttribute">‘<code
      class=property>y</code>’</a>, <a class=attr-name
      href="#MaskElementWidthAttribute">‘<code
      class=property>width</code>’</a> and <a class=attr-name
      href="#MaskElementHeightAttribute">‘<code
      class=property>height</code>’</a>.<br>
      If <span class=attr-value>maskUnits="userSpaceOnUse"</span>, <a
      class=attr-name href="#MaskElementXAttribute">‘<code
      class=property>x</code>’</a>, <a class=attr-name
      href="#MaskElementYAttribute">‘<code class=property>y</code>’</a>,
      <a class=attr-name href="#MaskElementWidthAttribute">‘<code
      class=property>width</code>’</a> and <a class=attr-name
      href="#MaskElementHeightAttribute">‘<code
      class=property>height</code>’</a> represent values in the current user
      coordinate system in place at the time when the <a class=element-name
      href="#MaskElement">‘<code class=property>mask</code>’</a> element
      is referenced (i.e., the user coordinate system for the element
      referencing the <a class=element-name href="#MaskElement">‘<code
      class=property>mask</code>’</a> element via the ‘<a
      href="#mask"><code class=property>mask</code></a>’ property).<br>
      If <span class=attr-value>maskUnits="objectBoundingBox"</span>, <a
      class=attr-name href="#MaskElementXAttribute">‘<code
      class=property>x</code>’</a>, <a class=attr-name
      href="#MaskElementYAttribute">‘<code class=property>y</code>’</a>,
      <a class=attr-name href="#MaskElementWidthAttribute">‘<code
      class=property>width</code>’</a> and <a class=attr-name
      href="#MaskElementHeightAttribute">‘<code
      class=property>height</code>’</a> represent fractions or percentages
      of the bounding box of the element to which the mask is applied. (See <a
      class=term href="#object-bounding-box-units">object bounding box
      units</a>.)<br>
      If attribute <a class=attr-name
      href="#MaskElementMaskUnitsAttribute">‘<code
      class=property>maskUnits</code>’</a> is not specified, then the effect
      is as if a value of <span class=attr-value>‘<code
      class=property>objectBoundingBox</code>’</span> were specified.<br>
      <span class=anim-target>Animatable: yes.</span>
     <dt id=MaskElementMaskContentUnitsAttribute><span
      class=adef>maskContentUnits</span> = "<em>userSpaceOnUse</em> |
      <em>objectBoundingBox</em>"
     <dd>Defines the coordinate system for the contents of the <a
      class=element-name href="#MaskElement">‘<code
      class=property>mask</code>’</a>.<br>
      If <span class=attr-value>maskContentUnits="userSpaceOnUse"</span>, the
      user coordinate system for the contents of the <a class=element-name
      href="#MaskElement">‘<code class=property>mask</code>’</a> element
      is the current user coordinate system in place at the time when the <a
      class=element-name href="#MaskElement">‘<code
      class=property>mask</code>’</a> element is referenced (i.e., the user
      coordinate system for the element referencing the <a class=element-name
      href="#MaskElement">‘<code class=property>mask</code>’</a> element
      via the ‘<a href="#mask"><code class=property>mask</code></a>’
      property).<br>
      If <span class=attr-value>maskContentUnits="objectBoundingBox"</span>,
      the user coordinate system for the contents of the <a class=element-name
      href="#MaskElement">‘<code class=property>mask</code>’</a> is
      established using the bounding box of the element to which the mask is
      applied. (See <a class=term href="#object-bounding-box-units">object
      bounding box units</a>.)<br>
      If attribute <a class=attr-name
      href="#MaskElementMaskContentUnitsAttribute">‘<code
      class=property>maskContentUnits</code>’</a> is not specified, then the
      effect is as if a value of <span class=attr-value>‘<code
      class=property>userSpaceOnUse</code>’</span> were specified.<br>
      <span class=anim-target>Animatable: yes.</span>
     <dt id=MaskElementXAttribute><span class=adef>x</span> =
      "<var>&lt;length&gt;</var> | <var>&lt;percentage&gt;</var>"
     <dd>The x-axis coordinate of one corner of the rectangle for the largest
      possible offscreen buffer. If the attribute is not specified but at
      least one of the attributes <a class=attr-name
      href="#MaskElementYAttribute">‘<code class=property>y</code>’</a>,
      <a class=attr-name href="#MaskElementWidthAttribute">‘<code
      class=property>width</code>’</a> or <a class=attr-name
      href="#MaskElementHeightAttribute">‘<code
      class=property>height</code>’</a> are specified, the effect is as if a
      value of <span class=attr-value>‘<code class=css>-10%</code>’</span>
      were specified.<br>
      <span class=anim-target>Animatable: yes.</span>
     <dt id=MaskElementYAttribute><span class=adef>y</span> =
      "<var>&lt;length&gt;</var> | <var>&lt;percentage&gt;</var>"
     <dd>The y-axis coordinate of one corner of the rectangle for the largest
      possible offscreen buffer.<br>
      If the attribute is not specified but at least one of the attributes <a
      class=attr-name href="#MaskElementXAttribute">‘<code
      class=property>x</code>’</a>, <a class=attr-name
      href="#MaskElementWidthAttribute">‘<code
      class=property>width</code>’</a> or <a class=attr-name
      href="#MaskElementHeightAttribute">‘<code
      class=property>height</code>’</a> are specified, the effect is as if a
      value of <span class=attr-value>‘<code class=css>-10%</code>’</span>
      were specified.<br>
      <span class=anim-target>Animatable: yes.</span>
     <dt id=MaskElementWidthAttribute><span class=adef>width</span> =
      "<var>&lt;length&gt;</var> | <var>&lt;percentage&gt;</var>"
     <dd>The width of the largest possible offscreen buffer. A negative value
      or a value of zero disables rendering of the element.<br>
      If the attribute is not specified but at least one of the attributes <a
      class=attr-name href="#MaskElementXAttribute">‘<code
      class=property>x</code>’</a>, <a class=attr-name
      href="#MaskElementYAttribute">‘<code class=property>y</code>’</a> or
      <a class=attr-name href="#MaskElementHeightAttribute">‘<code
      class=property>height</code>’</a> are specified, the effect is as if a
      value of <span class=attr-value>‘<code class=css>120%</code>’</span>
      were specified.<br>
      <span class=anim-target>Animatable: yes.</span>
     <dt id=MaskElementHeightAttribute><span class=adef>height</span> =
      "<var>&lt;length&gt;</var> | <var>&lt;percentage&gt;</var>"
     <dd>The height of the largest possible offscreen buffer.<br>
      A negative value or a value of zero disables rendering of the
      element.<br>
      If the attribute is not specified but at least one of the attributes <a
      class=attr-name href="#MaskElementXAttribute">‘<code
      class=property>x</code>’</a>, <a class=attr-name
      href="#MaskElementYAttribute">‘<code class=property>y</code>’</a> or
      <a class=attr-name href="#MaskElementWidthAttribute">‘<code
      class=property>width</code>’</a> are specified, the effect is as if a
      value of <span class=attr-value>‘<code class=css>120%</code>’</span>
      were specified.<br>
      <span class=anim-target>Animatable: yes.</span>
    </dl>
   </div>
   <p>If at least one of the attributes <a class=attr-name
    href="#MaskElementXAttribute">‘<code class=property>x</code>’</a>, <a
    class=attr-name href="#MaskElementYAttribute">‘<code
    class=property>y</code>’</a>, <a class=attr-name
    href="#MaskElementWidthAttribute">‘<code
    class=property>width</code>’</a> or <a class=attr-name
    href="#MaskElementHeightAttribute">‘<code
    class=property>height</code>’</a> are specified, the given object and
    the rectangle defined by <a class=attr-name
    href="#MaskElementXAttribute">‘<code class=property>x</code>’</a>, <a
    class=attr-name href="#MaskElementYAttribute">‘<code
    class=property>y</code>’</a>, <a class=attr-name
    href="#MaskElementWidthAttribute">‘<code
    class=property>width</code>’</a> and <a class=attr-name
    href="#MaskElementHeightAttribute">‘<code
    class=property>height</code>’</a> establish a current clipping path. The
    rendered content of the mask must be clipped by this current clipping
    path.
   <p>
   <p>CSS properties inherit into the <a class=element-name
    href="#MaskElement">‘<code class=property>mask</code>’</a> element
    from its ancestors; properties do <em>not</em> inherit from the element
    referencing the <a class=element-name href="#MaskElement">‘<code
    class=property>mask</code>’</a> element.
   <p><a class=element-name href="#MaskElement">‘<code
    class=property>mask</code>’</a> elements are never rendered directly;
    their only usage is as something that can be referenced using the ‘<a
    href="#mask"><code class=property>mask</code></a>’ property. The
    ‘<code class=property>opacity</code>’, ‘<code
    class=property>filter</code>’ and ‘<code
    class=property>display</code>’ properties do not apply to the <a
    class=element-name href="#MaskElement">‘<code
    class=property>mask</code>’</a> element; thus, <a class=element-name
    href="#MaskElement">‘<code class=property>mask</code>’</a> elements
    are not directly rendered even if the ‘<code
    class=property>display</code>’ property is set to a value other than
    ‘<a href="#none"><code class=property>none</code></a>’, and <a
    class=element-name href="#MaskElement">‘<code
    class=property>mask</code>’</a> elements are available for referencing
    even when the ‘<code class=property>display</code>’ property on the <a
    class=element-name href="#MaskElement">‘<code
    class=property>mask</code>’</a> element or any of its ancestors is set
    to <a class=prop-value href="#none">none</a>.
   <h2 id=mask-box-image><span class=secno>7. </span>Mask Box Image</h2>
   <p> With ‘<a href="#mask-box-image0"><code
    class=property>mask-box-image</code></a>’ a mask can be split into nine
    pieces: four corners, four edges and the middle piece as demonstrated in
    the figure below.
   <div class=figure> <img alt="pieces of a mask box image"
    src="images/mask-box-image-mask.svg" width=240>
    <p class=caption> Pieces of a mask box image.
   </div>
   <p> These pieces may be sliced, scaled and stretched in various ways to fit
    the size of the <span class=index id=mask-image-area>mask image
    area</span>. The usage of ‘<a href="#mask-box-image0"><code
    class=property>mask-box-image</code></a>’ corresponds to the ‘<code
    class=property>border-image</code>’ property of CSS Background and
    Borders <a href="#CSS3BG" rel=biblioentry>[CSS3BG]<!--{{!CSS3BG}}--></a>.
   <div class=example>
    <p> The mask image in the following example is split into four corners
     with dimensions of 75 pixels, four edges and the middle piece that is
     stretched and scaled.
    <div class=figure> <img alt="Example for 'mask-box-image'" height=240
     src="images/mask-box-image.svg" width=720>
     <p class=caption> Example for ‘<a href="#mask-box-image0"><code
      class=property>mask-box-image</code></a>’. The object on the left is
      the object to mask. The second image is the alpha mask and the last
      image the masked object.
    </div>
    <pre>
 div {
   background: linear-gradient(bottom, #F27BAA 0%, #FCC8AD 100%);
   mask-box-image-slice: 25 fill;
   mask-box-image-repeat: stretch;
   mask-box-image-source: url(mask.png);
 }</pre>
   </div>
   <h3 id=the-mask-box-image-source><span class=secno>7.1. </span>The ‘<a
    href="#mask-box-image-source"><code
    class=property>mask-box-image-source</code></a>’ property</h3>
   <table class=propdef>
    <tbody>
     <tr>
      <th>Name:
      <td><dfn id=mask-box-image-source>mask-box-image-source</dfn>
     <tr>
      <th><a href="#values">Value</a>:
      <td><a href="#ltmask-imagegt"><var>&lt;mask-image&gt;</var></a>
     <tr>
      <th>Initial:
      <td>none
     <tr>
      <th>Applies to:
      <td>All elements. In SVG, it applies to <a
       href="http://www.w3.org/TR/2011/REC-SVG11-20110816/intro.html#TermContainerElement">container
       elements</a> and <a
       href="http://www.w3.org/TR/2011/REC-SVG11-20110816/intro.html#TermGraphicsElement">graphics
       elements</a>.
     <tr>
      <th>Inherited:
      <td>no
     <tr>
      <th>Percentages:
      <td>N/A
     <tr>
      <th>Media:
      <td>visual
     <tr>
      <th>Computed value:
      <td>‘<a href="#none"><code class=css>none</code></a>’ or the image
       with its URI made absolute
     <tr>
      <th>Animatable:
      <td>no
   </table>
   <p>Specifies an image to be used as mask. If the value is ‘<a
    href="#none"><code class=css>none</code></a>’ or if the image cannot be
    displayed (or the property doesn't apply), the content won't get masked.
   <h3 id=the-mask-box-image-slice><span class=secno>7.2. </span>The ‘<a
    href="#mask-box-image-slice"><code
    class=property>mask-box-image-slice</code></a>’ property</h3>
   <table class=propdef>
    <tbody>
     <tr>
      <th>Name:
      <td><dfn id=mask-box-image-slice>mask-box-image-slice</dfn>
     <tr>
      <th><a href="#values">Value</a>:
      <td>[<var>&lt;number&gt;</var> | <var>&lt;percentage&gt;</var>]{1,4}
       &amp;&amp; fill?
     <tr>
      <th>Initial:
      <td>0 fill
     <tr>
      <th>Applies to:
      <td>All elements. In SVG, it applies to <a
       href="http://www.w3.org/TR/2011/REC-SVG11-20110816/intro.html#TermContainerElement">container
       elements</a> and <a
       href="http://www.w3.org/TR/2011/REC-SVG11-20110816/intro.html#TermGraphicsElement">graphics
       elements</a>.
     <tr>
      <th>Inherited:
      <td>no
     <tr>
      <th>Percentages:
      <td>refer to size of the mask image
     <tr>
      <th>Media:
      <td>visual
     <tr>
      <th>Computed value:
      <td>as specified
     <tr>
      <th>Animatable:
      <td>no
   </table>
   <p>This property specifies inward offsets from the top, right, bottom, and
    left edges of the mask image, dividing it into nine regions: four corners,
    four edges and a middle. The middle image part is discarded (treated as
    fully transparent black) unless the ‘<code class=css>fill</code>’
    keyword is present.
   <p>See <a
    href="http://www.w3.org/TR/css3-background/#the-border-image-slice">Image
    Slicing: the ‘<code class=property>border-image-slice</code>’
    property</a> <a href="#CSS3BG"
    rel=biblioentry>[CSS3BG]<!--{{!CSS3BG}}--></a> for the definitions of the
    property values.
   <h3 id=the-mask-box-image-width><span class=secno>7.3. </span>The ‘<a
    href="#mask-box-image-width"><code
    class=property>mask-box-image-width</code></a>’ property</h3>
   <table class=propdef>
    <tbody>
     <tr>
      <th>Name:
      <td><dfn id=mask-box-image-width>mask-box-image-width</dfn>
     <tr>
      <th><a href="#values">Value</a>:
      <td>[ <var>&lt;length&gt;</var> | <var>&lt;percentage&gt;</var> |
       <var>&lt;number&gt;</var> | auto ]{1,4}
     <tr>
      <th>Initial:
      <td>auto
     <tr>
      <th>Applies to:
      <td>All elements. In SVG, it applies to <a
       href="http://www.w3.org/TR/2011/REC-SVG11-20110816/intro.html#TermContainerElement">container
       elements</a> and <a
       href="http://www.w3.org/TR/2011/REC-SVG11-20110816/intro.html#TermGraphicsElement">graphics
       elements</a>.
     <tr>
      <th>Inherited:
      <td>no
     <tr>
      <th>Percentages:
      <td>relative to width/height of the <a
       href="#mask-box-image-area"><em>mask box image area</em></a>
     <tr>
      <th>Media:
      <td>visual
     <tr>
      <th>Computed value:
      <td>all <var>&lt;length&gt;</var>s made absolute, otherwise as specified
     <tr>
      <th>Animatable:
      <td>no
   </table>
   <p>The mask image is drawn inside an area called the <a
    href="#mask-box-image-area"><em>mask box image area</em></a>. This is an
    area whose boundaries by default correspond to the mask box, see ‘<a
    href="#mask-box-image-outset"><code
    class=property>mask-box-image-outset</code></a>’.
   <p>See <a
    href="http://www.w3.org/TR/css3-background/#the-border-image-width">Drawing
    Areas: the ‘border-image-width’ property</a> <a href="#CSS3BG"
    rel=biblioentry>[CSS3BG]<!--{{!CSS3BG}}--></a> for the definitions of the
    property values.
   <p class=note> Note that for SVG elements without an associated layout box
    the ‘<code class=property>border-width</code>’ is considered to be
    ‘<code class=css>0</code>’.
   <h3 id=the-mask-box-image-outset><span class=secno>7.4. </span>The ‘<a
    href="#mask-box-image-outset"><code
    class=property>mask-box-image-outset</code></a>’ property</h3>
   <table class=propdef>
    <tbody>
     <tr>
      <th>Name:
      <td><dfn id=mask-box-image-outset>mask-box-image-outset</dfn>
     <tr>
      <th><a href="#values">Value</a>:
      <td>[ <var>&lt;length&gt;</var> | <var>&lt;number&gt;</var> ]{1,4}
     <tr>
      <th>Initial:
      <td>0
     <tr>
      <th>Applies to:
      <td>All elements. In SVG, it applies to <a
       href="http://www.w3.org/TR/2011/REC-SVG11-20110816/intro.html#TermContainerElement">container
       elements</a> and <a
       href="http://www.w3.org/TR/2011/REC-SVG11-20110816/intro.html#TermGraphicsElement">graphics
       elements</a>.
     <tr>
      <th>Inherited:
      <td>no
     <tr>
      <th>Percentages:
      <td>N/A
     <tr>
      <th>Media:
      <td>visual
     <tr>
      <th>Computed value:
      <td>all <var>&lt;length&gt;</var>s made absolute, otherwise as specified
     <tr>
      <th>Animatable:
      <td>no
   </table>
   <p>The values specify the amount by which the <dfn
    id=mask-box-image-area>mask box image area</dfn> extends beyond the border
    box. If it has four values, they set the outsets on the top, right, bottom
    and left sides in that order. If the left is missing, it is the same as
    the right; if the bottom is missing, it is the same as the top; if the
    right is missing, it is the same as the top.
   <p>As with ‘<a href="#mask-box-image-width"><code
    class=property>mask-box-image-width</code></a>’, a &lt;number&gt;
    represents a multiple of the corresponding ‘<code
    class=property>border-width</code>’. Negative values are not allowed for
    any of the ‘<a href="#mask-box-image-outset"><code
    class=property>mask-box-image-outset</code></a>’ values.
   <p class=note>Note that for SVG elements without associated layout box the
    ‘<code class=property>border-width</code>’ is considered to be
    ‘<code class=css>0</code>’.
   <h3 id=the-mask-box-image-repeat><span class=secno>7.5. </span>The ‘<a
    href="#mask-box-image-repeat"><code
    class=property>mask-box-image-repeat</code></a>’ property</h3>
   <table class=propdef>
    <tbody>
     <tr>
      <th>Name:
      <td><dfn id=mask-box-image-repeat>mask-box-image-repeat</dfn>
     <tr>
      <th><a href="#values">Value</a>:
      <td>[ stretch | repeat | round | space ]{1,2}
     <tr>
      <th>Initial:
      <td>stretch
     <tr>
      <th>Applies to:
      <td>All elements. In SVG, it applies to <a
       href="http://www.w3.org/TR/2011/REC-SVG11-20110816/intro.html#TermContainerElement">container
       elements</a> and <a
       href="http://www.w3.org/TR/2011/REC-SVG11-20110816/intro.html#TermGraphicsElement">graphics
       elements</a>.
     <tr>
      <th>Inherited:
      <td>no
     <tr>
      <th>Percentages:
      <td>N/A
     <tr>
      <th>Media:
      <td>visual
     <tr>
      <th>Computed value:
      <td>as specified
     <tr>
      <th>Animatable:
      <td>no
   </table>
   <p>This property specifies how the images for the sides and the middle part
    of the mask image are scaled and tiled. The first keyword applies to the
    horizontal sides, the second to the vertical ones. If the second keyword
    is absent, it is assumed to be the same as the first.
   <p>See <a
    href="http://www.w3.org/TR/css3-background/#the-border-image-repeat">Image
    Tiling: the ‘<code class=property>border-image-repeat</code>’
    property</a> <a href="#CSS3BG"
    rel=biblioentry>[CSS3BG]<!--{{!CSS3BG}}--></a> for the definitions of the
    property values.
   <p>The exact process for scaling and tiling the mask box image parts is
    given in the section <a href="#masking-with-the-mask-box-image">Masking
    with the mask-box-image</a>.
   <h3 id=the-mask-box-image><span class=secno>7.6. </span>The ‘<a
    href="#mask-box-image0"><code class=property>mask-box-image</code></a>’
    property</h3>
   <table class=propdef>
    <tbody>
     <tr>
      <th>Name:
      <td><dfn id=mask-box-image0>mask-box-image</dfn>
     <tr>
      <th><a href="#values">Value</a>:
      <td> <var>&lt;‘<a href="#mask-box-image-source"><code
       class=property>mask-box-image-source</code></a>’&gt;</var> ||
       <var>&lt;‘<a href="#mask-box-image-slice"><code
       class=property>mask-box-image-slice</code></a>’&gt;</var> [ /
       <var>&lt;‘<a href="#mask-box-image-width"><code
       class=property>mask-box-image-width</code></a>’&gt;</var> | /
       <var>&lt;‘<a href="#mask-box-image-width"><code
       class=property>mask-box-image-width</code></a>’&gt;</var>? /
       <var>&lt;‘<a href="#mask-box-image-outset"><code
       class=property>mask-box-image-outset</code></a>’&gt;</var> ]? ||
       <var>&lt;‘<a href="#mask-box-image-repeat"><code
       class=property>mask-box-image-repeat</code></a>’&gt;</var>
     <tr>
      <th>Initial:
      <td>See individual properties
     <tr>
      <th>Applies to:
      <td>See individual properties
     <tr>
      <th>Inherited:
      <td>no
     <tr>
      <th>Percentages:
      <td>N/A
     <tr>
      <th>Media:
      <td>visual
     <tr>
      <th>Computed value:
      <td>See individual properties
     <tr>
      <th>Animatable:
      <td>See individual properties
   </table>
   <p>This is a shorthand property for setting ‘<a
    href="#mask-box-image-source"><code
    class=property>mask-box-image-source</code></a>’, ‘<a
    href="#mask-box-image-slice"><code
    class=property>mask-box-image-slice</code></a>’, ‘<a
    href="#mask-box-image-width"><code
    class=property>mask-box-image-width</code></a>’, ‘<a
    href="#mask-box-image-outset"><code
    class=property>mask-box-image-outset</code></a>’ and ‘<a
    href="#mask-box-image-repeat"><code
    class=property>mask-box-image-repeat</code></a>’. Omitted values are set
    to their initial values.
   <h3 id=masking-with-the-mask-box-image><span class=secno>7.7.
    </span>Masking with the mask-box-image</h3>
   <p> After the mask-box-image given by ‘<a
    href="#mask-box-image-source"><code
    class=property>mask-box-image-source</code></a>’ is sliced by the ‘<a
    href="#mask-box-image-slice"><code
    class=property>mask-box-image-slice</code></a>’ values, the resulting
    nine images are scaled, positioned, and tiled into their corresponding
    mask image regions in four steps as described in the section <a
    href="http://www.w3.org/TR/css3-background/#border-image-process">Drawing
    the Border Image</a> <a href="#CSS3BG"
    rel=biblioentry>[CSS3BG]<!--{{!CSS3BG}}--></a>.
   <h2 id=clipping-paths><span class=secno>8. </span>Clipping paths</h2>
   <p> The clipping path restricts the region to which paint can be applied,
    the so-called clipping region. Conceptually, any parts of the drawing that
    lie outside of this region are not drawn. This includes any content,
    background, borders, text decoration, outline and visible scrolling
    mechanism of the element to which the clipping path is applied, and those
    of its descendants.
   <p> An element's ancestors may also clip portions of their content (e.g.,
    via their own ‘<a href="#ClipProperty"><code
    class=property>clip</code></a>’ or ‘<a href="#clip-path"><code
    class=property>clip-path</code></a>’ properties and/or if their ‘<code
    class=property>overflow</code>’ property is not ‘<code
    class=css>visible</code>’). What is rendered is the cumulative
    intersection.
   <p> If the clipping region exceeds the bounds of the UA's document window,
    content may be clipped to that window by the native operating environment.
   <h3 id=the-clip-path><span class=secno>8.1. </span>The ‘<a
    href="#clip-path"><code class=property>clip-path</code></a>’ property</h3>
   <table class=propdef>
    <tbody>
     <tr>
      <th>Name:
      <td><dfn id=clip-path>clip-path</dfn>
     <tr>
      <th>Value:
      <td><a href="#ltshapegt"><var>&lt;shape&gt;</var></a> | <a
       href="#ltclip-sourcegt"><var>&lt;clip-source&gt;</var></a> | none
     <tr>
      <th>Initial:
      <td>none
     <tr>
      <th>Applies to:
      <td>All elements. SVG <a
       href="http://www.w3.org/TR/2011/REC-SVG11-20110816/intro.html#TermContainerElement">container
       elements</a>, <a
       href="http://www.w3.org/TR/2011/REC-SVG11-20110816/intro.html#TermGraphicsElement">graphics
       elements</a> and <a class=element-name href="#ClipPathElement">‘<code
       class=property>clipPath</code>’</a>
     <tr>
      <th>Inherited:
      <td>no
     <tr>
      <th>Percentages:
      <td>as specified
     <tr>
      <th>Media:
      <td>visual
     <tr>
      <th>Computed value:
      <td>as specified, but with <a href="#lturlgt"><var>&lt;url&gt;</var></a>
       values made absolute
     <tr>
      <th>Animatable:
      <td>See <a
       href="http://dev.w3.org/csswg/css3-exclusions/#shape-inside">‘<code
       class=property>shape-inside</code>’</a> and <a
       href="http://dev.w3.org/csswg/css3-exclusions/#shape-outside">‘<code
       class=property>shape-outside</code>’</a> <a href="#CSS3-EXCLUSIONS"
       rel=biblioentry>[CSS3-EXCLUSIONS]<!--{{!CSS3-EXCLUSIONS}}--></a>
   </table>
   <pre class=prod><dfn id=ltclip-sourcegt>&lt;clip-source&gt;</dfn> = <a
    href="#lturlgt"><var>&lt;url&gt;</var></a> | <var>child</var> | <a
    href="#ltchild-selectorgt"><var>&lt;child-selector&gt;</var></a>
 </pre>
   <dl>
    <dt> <dfn id=ltshapegt>‘<code class=css>&lt;shape&gt;</code>’</dfn>
    <dd> A basic shape function as defined in CSS3 Exclusions. The origin of
     clipping shapes is on the top left of the <a class=index
     href="#bounding-client-rect" id=bounding-client-rect0>bounding client
     rect</a>. Percentage values are resolved against the <a class=index
     href="#bounding-client-rect" id=bounding-client-rect1>bounding client
     rect</a> width and height. (See <a href="#CSS3-EXCLUSIONS"
     rel=biblioentry>[CSS3-EXCLUSIONS]<!--{{!CSS3-EXCLUSIONS}}--></a>.)
    <dt>‘<code class=css>child</code>’
    <dd> A keyword to indicate that the last direct sibling <a
     class=element-name href="#ClipPathElement">‘<code
     class=property>clipPath</code>’</a> element of the element the ‘<a
     href="#clip-path"><code class=property>clip-path</code></a>’ property
     is applied should be used as the clip source. It is equivalent to
     ‘<code class=css>select(clipPath:last-of-type)</code>’.
    <dt>‘<a href="#ltchild-selectorgt"><code
     class=css>&lt;child-selector&gt;</code></a>’
    <dd> A comma-separated list of <a
     href="http://dev.w3.org/csswg/selectors4/#compound">compound
     selector</a>s scoped at the element to which the ‘<a
     href="#clip-path"><code class=property>clip-path</code></a>’ property
     is applied. The first matching element in <a
     href="http://www.w3.org/TR/2012/WD-dom-20120405/#concept-tree-order">tree
     order</a> (as defined in <a href="#DOM"
     rel=biblioentry>[DOM]<!--{{!DOM}}--></a>) as a result of evaluating the
     list of selectors is taken as the clip source. If there are no matching
     elements the clip source is invalid.
   </dl>
   <h3 id=the-clip-rule><span class=secno>8.2. </span>The ‘<a
    href="#clip-rule"><code class=property>clip-rule</code></a>’ property</h3>
   <table class=propdef>
    <tbody>
     <tr>
      <th>Name:
      <td><dfn id=clip-rule>clip-rule</dfn>
     <tr>
      <th>Value:
      <td>nonzero | evenodd
     <tr>
      <th>Initial:
      <td>nonzero
     <tr>
      <th>Applies to:
      <td><a
       href="http://www.w3.org/TR/2011/REC-SVG11-20110816/intro.html#TermGraphicsElement">graphics
       elements</a> within a <a class=element-name
       href="#ClipPathElement">‘<code class=property>clipPath</code>’</a>
       element
     <tr>
      <th>Inherited:
      <td>yes
     <tr>
      <th>Percentages:
      <td>N/A
     <tr>
      <th>Media:
      <td>visual
     <tr>
      <th>Computed value:
      <td>as specified
     <tr>
      <th>Animatable:
      <td>no
   </table>
   <dl>
    <dt><dfn id=nonzero>‘<code class=css>nonzero</code>’</dfn>
    <dd>See description of <a class=property
     href="http://www.w3.org/TR/2011/REC-SVG11-20110816/painting.html#FillRuleProperty">‘<code
     class=property>fill-rule</code>’</a> property <a href="#SVG11"
     rel=biblioentry>[SVG11]<!--{{SVG11}}--></a>.
    <dt><dfn id=evenodd>‘<code class=css>evenodd</code>’</dfn>
    <dd>See description of <a class=property
     href="http://www.w3.org/TR/2011/REC-SVG11-20110816/painting.html#FillRuleProperty">‘<code
     class=property>fill-rule</code>’</a> property <a href="#SVG11"
     rel=biblioentry>[SVG11]<!--{{SVG11}}--></a>.
   </dl>
   <p>The ‘<a href="#clip-rule"><code class=property>clip-rule</code></a>’
    property only applies to graphics elements that are contained within a <a
    class=element-name href="#ClipPathElement">‘<code
    class=property>clipPath</code>’</a> element.
   <div class=example> The following fragment of code will cause an evenodd
    clipping rule to be applied to the clipping path because ‘<a
    href="#clip-rule"><code class=property>clip-rule</code></a>’ is
    specified on the <a class=element-name
    href="http://www.w3.org/TR/2011/REC-SVG11-20110816/paths.html#PathElement">‘<code
    class=property>path</code>’</a> element that defines the clipping shape:
    <pre>
 &lt;g clip-rule="nonzero"&gt;
   &lt;clipPath id="MyClip"&gt;
     &lt;path d="..." clip-rule="evenodd" /&gt;
   &lt;/clipPath&gt;
   &lt;rect clip-path="url(#MyClip)" ... /&gt;
 &lt;/g&gt;
 </pre>
    <p>whereas the following fragment of code will <em>not</em> cause an
     evenodd clipping rule to be applied because the ‘<a
     href="#clip-rule"><code class=property>clip-rule</code></a>’ is
     specified on the referencing element, not on the object defining the
     clipping shape:
    <pre>
 &lt;g clip-rule="nonzero"&gt;
   &lt;clipPath id="MyClip"&gt;
     &lt;path d="..." /&gt;
   &lt;/clipPath&gt;
   &lt;rect clip-path="url(#MyClip)" clip-rule="evenodd" ... /&gt;
 &lt;/g&gt;
 </pre>
   </div>
   <h3 id=clip-property><span class=secno>8.3. </span>The ‘<a
    href="#ClipProperty"><code class=property>clip</code></a>’ property</h3>
   <table class=propdef>
    <tbody>
     <tr>
      <th>Name:
      <td><dfn id=ClipProperty>clip</dfn>
     <tr>
      <th>Value:
      <td><a href="#ltshapegt"><var>&lt;shape&gt;</var></a> | auto
     <tr>
      <th>Initial:
      <td>see individual properties
     <tr>
      <th>Applies to:
      <td>Absolutely positioned elements. In SVG, it applies to <a
       href="http://www.w3.org/TR/SVG2/coords.html#EstablishingANewViewport">elements
       which establish a new viewport</a>, <a class=element-name
       href="http://www.w3.org/TR/2011/REC-SVG11-20110816/pservers.html#PatternElement">‘<code
       class=property>pattern</code>’</a> elements and <a class=element-name
       href="http://www.w3.org/TR/2011/REC-SVG11-20110816/painting.html#MarkerElement">‘<code
       class=property>marker</code>’</a> elements.
     <tr>
      <th>Inherited:
      <td>no
     <tr>
      <th>Percentages:
      <td>N/A
     <tr>
      <th>Media:
      <td>visual
     <tr>
      <th>Computed value:
      <td>as specified
     <tr>
      <th>Animatable:
      <td>as <a
       href="http://dev.w3.org/csswg/css3-transitions/#animtype-rect">rectangle</a>
   </table>
   <p class=note>With this specification the ‘<a href="#ClipProperty"><code
    class=property>clip</code></a>’ property is deprecated. Authors are
    encouraged to use the ‘<a href="#clip-path"><code
    class=property>clip-path</code></a>’ property instead. UAs must support
    the ‘<a href="#ClipProperty"><code class=property>clip</code></a>’
    property.
   <p> The ‘<a href="#ClipProperty"><code class=property>clip</code></a>’
    property applies only to absolutely positioned elements. In SVG, it
    applies to <a
    href="http://www.w3.org/TR/SVG2/coords.html#EstablishingANewViewport">elements
    which establish a new viewport</a>, <a class=element-name
    href="http://www.w3.org/TR/2011/REC-SVG11-20110816/pservers.html#PatternElement">‘<code
    class=property>pattern</code>’</a> elements and <a class=element-name
    href="http://www.w3.org/TR/2011/REC-SVG11-20110816/painting.html#MarkerElement">‘<code
    class=property>marker</code>’</a> elements. Values have the following
    meanings:
   <dl>
    <dt>‘<a href="#auto"><code class=css>auto</code></a>’
    <dd>The element does not clip.
    <dt><a href="#ltshapegt"><var>&lt;shape&gt;</var></a>
    <dd>
     <p> In CSS 2.1, the only valid &lt;shape&gt; value is: rect(<a
      href="#lttopgt"><var>&lt;top&gt;</var></a>, <a
      href="#ltrightgt"><var>&lt;right&gt;</var></a>, <a
      href="#ltbottomgt"><var>&lt;bottom&gt;</var></a>, <a
      href="#ltleftgt"><var>&lt;left&gt;</var></a>) where <a
      href="#lttopgt"><var>&lt;top&gt;</var></a> and <a
      href="#ltbottomgt"><var>&lt;bottom&gt;</var></a> specify offsets from
      the top border edge of the box, and <a
      href="#ltrightgt"><var>&lt;right&gt;</var></a>, and <a
      href="#ltleftgt"><var>&lt;left&gt;</var></a> specify offsets from the
      left border edge of the box. Authors should separate offset values with
      commas. User agents must support separation with commas, but may also
      support separation without commas (but not a combination), because a
      previous revision of this specification was ambiguous in this respect.
     <p><dfn id=lttopgt>&lt;top&gt;</dfn>, <dfn
      id=ltrightgt>&lt;right&gt;</dfn>, <dfn
      id=ltbottomgt>&lt;bottom&gt;</dfn>, and <dfn
      id=ltleftgt>&lt;left&gt;</dfn> may either have a
      <var>&lt;length&gt;</var> value or ‘<a href="#auto"><code
      class=css>auto</code></a>’. Negative lengths are permitted. The value
      ‘<a href="#auto"><code class=css>auto</code></a>’ means that a given
      edge of the clipping region will be the same as the edge of the
      element's generated border box (i.e., ‘<a href="#auto"><code
      class=css>auto</code></a>’ means the same as ‘<code
      class=css>0</code>’ for <a href="#lttopgt"><var>&lt;top&gt;</var></a>
      and <a href="#ltleftgt"><var>&lt;left&gt;</var></a>, the same as the
      used value of the height plus the sum of vertical padding and border
      widths for <a href="#ltbottomgt"><var>&lt;bottom&gt;</var></a>, and the
      same as the used value of the width plus the sum of the horizontal
      padding and border widths for <a
      href="#ltrightgt"><var>&lt;right&gt;</var></a>, such that four ‘<a
      href="#auto"><code class=property>auto</code></a>’ values result in
      the clipping region being the same as the element's border box).
     <p> When coordinates are rounded to pixel coordinates, care should be
      taken that no pixels remain visible when <a
      href="#ltleftgt"><var>&lt;left&gt;</var></a> and <a
      href="#ltrightgt"><var>&lt;right&gt;</var></a> have the same value (or
      <a href="#lttopgt"><var>&lt;top&gt;</var></a> and <a
      href="#ltbottomgt"><var>&lt;bottom&gt;</var></a> have the same value),
      and conversely that no pixels within the element's border box remain
      hidden when these values are ‘<a href="#auto"><code
      class=css>auto</code></a>’.
   </dl>
   <div class=example>
    <p> Example: The following two rules:
    <pre><code>
 p#one { clip: rect(5px, 40px, 45px, 5px); }
 p#two { clip: rect(5px, 55px, 45px, 5px); }</code></pre>
    <p> and assuming both Ps are 50 by 55 pixel, will create, respectively,
     the rectangular clipping regions delimited by the dashed lines in the
     following illustrations:
    <div class=figure> <img alt="Values for rect shape" height=577
     src="images/clip.png" width=292>
     <p class=caption>This diagram illustrates two block boxes, one above the
      other, with rectangular clipping regions of different dimensions. (See
      <a href="http://www.w3.org/TR/CSS2/images/longdesc/clip-desc.html">long
      description</a>.)
    </div>
   </div>
   <h3 id=ClipPathElement><span class=secno>8.4. </span>The <a
    class=element-name href="#ClipPathElement">‘<code
    class=property>clipPath</code>’</a> element</h3>
   <table class=propdef summary="clipPath element">
    <tbody>
     <tr>
      <th>Name:
      <td><dfn id=clippath>clipPath</dfn>
     <tr>
      <th>Categories:
      <td>None.
     <tr>
      <th>Content model:
      <td>Any number of the following elements, in any order:
       <ul class=no-bullets>
        <li><a
         href="http://www.w3.org/TR/2011/REC-SVG11-20110816/intro.html#TermDescriptiveElement">descriptive</a>
         <span class=expanding> — <a
         href="http://www.w3.org/TR/2011/REC-SVG11-20110816/struct.html#DescElement"><span
         class=element-name>‘desc’</span></a>, <a
         href="http://www.w3.org/TR/2011/REC-SVG11-20110816/struct.html#TitleElement"><span
         class=element-name>‘title’</span></a>, <a
         href="http://www.w3.org/TR/2011/REC-SVG11-20110816/metadata.html#MetadataElement"><span
         class=element-name>‘metadata’</span></a></span>
        <li><a
         href="http://www.w3.org/TR/2011/REC-SVG11-20110816/intro.html#TermAnimationElement">animation</a>
         <span class=expanding> — <a
         href="http://www.w3.org/TR/2011/REC-SVG11-20110816/animate.html#AnimateElement"><span
         class=element-name>‘animate’</span></a>, <a
         href="http://www.w3.org/TR/2011/REC-SVG11-20110816/animate.html#AnimateColorElement"><span
         class=element-name>‘animateColor’</span></a>, <a
         href="http://www.w3.org/TR/2011/REC-SVG11-20110816/animate.html#AnimateMotionElement"><span
         class=element-name>‘animateMotion’</span></a>, <a
         href="http://www.w3.org/TR/2011/REC-SVG11-20110816/animate.html#AnimateTransformElement"><span
         class=element-name>‘animateTransform’</span></a>, <a
         href="http://www.w3.org/TR/2011/REC-SVG11-20110816/animate.html#SetElement"><span
         class=element-name>‘set’</span></a></span>
        <li><a
         href="http://www.w3.org/TR/2011/REC-SVG11-20110816/intro.html#TermShapeElement">shape</a>
         <span class=expanding> — <a
         href="http://www.w3.org/TR/2011/REC-SVG11-20110816/shapes.html#CircleElement"><span
         class=element-name>‘circle’</span></a>, <a
         href="http://www.w3.org/TR/2011/REC-SVG11-20110816/shapes.html#EllipseElement"><span
         class=element-name>‘ellipse’</span></a>, <a
         href="http://www.w3.org/TR/2011/REC-SVG11-20110816/shapes.html#LineElement"><span
         class=element-name>‘line’</span></a>, <a
         href="http://www.w3.org/TR/2011/REC-SVG11-20110816/paths.html#PathElement"><span
         class=element-name>‘path’</span></a>, <a
         href="http://www.w3.org/TR/2011/REC-SVG11-20110816/shapes.html#PolygonElement"><span
         class=element-name>‘polygon’</span></a>, <a
         href="http://www.w3.org/TR/2011/REC-SVG11-20110816/shapes.html#PolylineElement"><span
         class=element-name>‘polyline’</span></a>, <a
         href="http://www.w3.org/TR/2011/REC-SVG11-20110816/shapes.html#RectElement"><span
         class=element-name>‘rect’</span></a></span>
        <li><a
         href="http://www.w3.org/TR/2011/REC-SVG11-20110816/text.html#TextElement"><span
         class=element-name>‘text’</span></a>
        <li><a
         href="http://www.w3.org/TR/2011/REC-SVG11-20110816/struct.html#UseElement"><span
         class=element-name>‘use’</span></a>
       </ul>
     <tr>
      <th>Attributes:
      <td>
       <ul class=no-bullets>
        <li><a
         href="http://www.w3.org/TR/2011/REC-SVG11-20110816/intro.html#TermConditionalProcessingAttribute">conditional
         processing attributes</a><span class=expanding> — <a
         href="http://www.w3.org/TR/2011/REC-SVG11-20110816/struct.html#RequiredFeaturesAttribute"><span
         class=attr-name>‘requiredFeatures’</span></a>, <a
         href="http://www.w3.org/TR/2011/REC-SVG11-20110816/struct.html#RequiredExtensionsAttribute"><span
         class=attr-name>‘requiredExtensions’</span></a>, <a
         href="http://www.w3.org/TR/2011/REC-SVG11-20110816/struct.html#SystemLanguageAttribute"><span
         class=attr-name>‘systemLanguage’</span></a></span>
        <li><a
         href="http://www.w3.org/TR/2011/REC-SVG11-20110816/intro.html#TermCoreAttributes">core
         attributes</a><span class=expanding> — <a
         href="http://www.w3.org/TR/2011/REC-SVG11-20110816/struct.html#IDAttribute"><span
         class=attr-name>‘id’</span></a>, <a
         href="http://www.w3.org/TR/2011/REC-SVG11-20110816/struct.html#XMLBaseAttribute"><span
         class=attr-name>‘xml:base’</span></a>, <a
         href="http://www.w3.org/TR/2011/REC-SVG11-20110816/struct.html#XMLLangAttribute"><span
         class=attr-name>‘xml:lang’</span></a>, <a
         href="http://www.w3.org/TR/2011/REC-SVG11-20110816/struct.html#XMLSpaceAttribute"><span
         class=attr-name>‘xml:space’</span></a></span>
        <li><a
         href="http://www.w3.org/TR/2011/REC-SVG11-20110816/intro.html#TermPresentationAttribute">presentation
         attributes</a><span class=expanding> — <a
         href="http://www.w3.org/TR/2011/REC-SVG11-20110816/text.html#AlignmentBaselineProperty"><span
         class=attr-name>‘alignment-baseline’</span></a>, <a
         href="http://www.w3.org/TR/2011/REC-SVG11-20110816/text.html#BaselineShiftProperty"><span
         class=attr-name>‘baseline-shift’</span></a>, <a
         href="http://www.w3.org/TR/2011/REC-SVG11-20110816/masking.html#ClipProperty"><span
         class=attr-name>‘clip’</span></a>, <a
         href="http://www.w3.org/TR/2011/REC-SVG11-20110816/masking.html#ClipPathProperty"><span
         class=attr-name>‘clip-path’</span></a>, <a
         href="http://www.w3.org/TR/2011/REC-SVG11-20110816/masking.html#ClipRuleProperty"><span
         class=attr-name>‘clip-rule’</span></a>, <a
         href="http://www.w3.org/TR/2011/REC-SVG11-20110816/color.html#ColorProperty"><span
         class=attr-name>‘color’</span></a>, <a
         href="http://www.w3.org/TR/2011/REC-SVG11-20110816/painting.html#ColorInterpolationProperty"><span
         class=attr-name>‘color-interpolation’</span></a>, <a
         href="http://www.w3.org/TR/2011/REC-SVG11-20110816/painting.html#ColorInterpolationFiltersProperty"><span
         class=attr-name>‘color-interpolation-filters’</span></a>, <a
         href="http://www.w3.org/TR/2011/REC-SVG11-20110816/color.html#ColorProfileProperty"><span
         class=attr-name>‘color-profile’</span></a>, <a
         href="http://www.w3.org/TR/2011/REC-SVG11-20110816/painting.html#ColorRenderingProperty"><span
         class=attr-name>‘color-rendering’</span></a>, <a
         href="http://www.w3.org/TR/2011/REC-SVG11-20110816/interact.html#CursorProperty"><span
         class=attr-name>‘cursor’</span></a>, <a
         href="http://www.w3.org/TR/2011/REC-SVG11-20110816/text.html#DirectionProperty"><span
         class=attr-name>‘direction’</span></a>, <a
         href="http://www.w3.org/TR/2011/REC-SVG11-20110816/painting.html#DisplayProperty"><span
         class=attr-name>‘display’</span></a>, <a
         href="http://www.w3.org/TR/2011/REC-SVG11-20110816/text.html#DominantBaselineProperty"><span
         class=attr-name>‘dominant-baseline’</span></a>, <a
         href="http://www.w3.org/TR/2011/REC-SVG11-20110816/filters.html#EnableBackgroundProperty"><span
         class=attr-name>‘enable-background’</span></a>, <a
         href="http://www.w3.org/TR/2011/REC-SVG11-20110816/painting.html#FillProperty"><span
         class=attr-name>‘fill’</span></a>, <a
         href="http://www.w3.org/TR/2011/REC-SVG11-20110816/painting.html#FillOpacityProperty"><span
         class=attr-name>‘fill-opacity’</span></a>, <a
         href="http://www.w3.org/TR/2011/REC-SVG11-20110816/painting.html#FillRuleProperty"><span
         class=attr-name>‘fill-rule’</span></a>, <a
         href="http://www.w3.org/TR/2011/REC-SVG11-20110816/filters.html#FilterProperty"><span
         class=attr-name>‘filter’</span></a>, <a
         href="http://www.w3.org/TR/2011/REC-SVG11-20110816/filters.html#FloodColorProperty"><span
         class=attr-name>‘flood-color’</span></a>, <a
         href="http://www.w3.org/TR/2011/REC-SVG11-20110816/filters.html#FloodOpacityProperty"><span
         class=attr-name>‘flood-opacity’</span></a>, <a
         href="http://www.w3.org/TR/2011/REC-SVG11-20110816/text.html#FontProperty"><span
         class=attr-name>‘font’</span></a>, <a
         href="http://www.w3.org/TR/2011/REC-SVG11-20110816/text.html#FontFamilyProperty"><span
         class=attr-name>‘font-family’</span></a>, <a
         href="http://www.w3.org/TR/2011/REC-SVG11-20110816/text.html#FontSizeProperty"><span
         class=attr-name>‘font-size’</span></a>, <a
         href="http://www.w3.org/TR/2011/REC-SVG11-20110816/text.html#FontSizeAdjustProperty"><span
         class=attr-name>‘font-size-adjust’</span></a>, <a
         href="http://www.w3.org/TR/2011/REC-SVG11-20110816/text.html#FontStretchProperty"><span
         class=attr-name>‘font-stretch’</span></a>, <a
         href="http://www.w3.org/TR/2011/REC-SVG11-20110816/text.html#FontStyleProperty"><span
         class=attr-name>‘font-style’</span></a>, <a
         href="http://www.w3.org/TR/2011/REC-SVG11-20110816/text.html#FontVariantProperty"><span
         class=attr-name>‘font-variant’</span></a>, <a
         href="http://www.w3.org/TR/2011/REC-SVG11-20110816/text.html#FontWeightProperty"><span
         class=attr-name>‘font-weight’</span></a>, <a
         href="http://www.w3.org/TR/2011/REC-SVG11-20110816/text.html#GlyphOrientationHorizontalProperty"><span
         class=attr-name>‘glyph-orientation-horizontal’</span></a>, <a
         href="http://www.w3.org/TR/2011/REC-SVG11-20110816/text.html#GlyphOrientationVerticalProperty"><span
         class=attr-name>‘glyph-orientation-vertical’</span></a>, <a
         href="http://www.w3.org/TR/2011/REC-SVG11-20110816/painting.html#ImageRenderingProperty"><span
         class=attr-name>‘image-rendering’</span></a>, <a
         href="http://www.w3.org/TR/2011/REC-SVG11-20110816/text.html#KerningProperty"><span
         class=attr-name>‘kerning’</span></a>, <a
         href="http://www.w3.org/TR/2011/REC-SVG11-20110816/text.html#LetterSpacingProperty"><span
         class=attr-name>‘letter-spacing’</span></a>, <a
         href="http://www.w3.org/TR/2011/REC-SVG11-20110816/filters.html#LightingColorProperty"><span
         class=attr-name>‘lighting-color’</span></a>, <a
         href="http://www.w3.org/TR/2011/REC-SVG11-20110816/painting.html#MarkerProperty"><span
         class=attr-name>‘marker’</span></a>, <a
         href="http://www.w3.org/TR/2011/REC-SVG11-20110816/painting.html#MarkerEndProperty"><span
         class=attr-name>‘marker-end’</span></a>, <a
         href="http://www.w3.org/TR/2011/REC-SVG11-20110816/painting.html#MarkerMidProperty"><span
         class=attr-name>‘marker-mid’</span></a>, <a
         href="http://www.w3.org/TR/2011/REC-SVG11-20110816/painting.html#MarkerStartProperty"><span
         class=attr-name>‘marker-start’</span></a>, <a
         href="#MaskProperty"><span class=attr-name>‘mask’</span></a>, <a
         href="http://www.w3.org/TR/2011/REC-SVG11-20110816/masking.html#OpacityProperty"><span
         class=attr-name>‘opacity’</span></a>, <a
         href="http://www.w3.org/TR/2011/REC-SVG11-20110816/masking.html#OverflowProperty"><span
         class=attr-name>‘overflow’</span></a>, <a
         href="http://www.w3.org/TR/2011/REC-SVG11-20110816/interact.html#PointerEventsProperty"><span
         class=attr-name>‘pointer-events’</span></a>, <a
         href="http://www.w3.org/TR/2011/REC-SVG11-20110816/painting.html#ShapeRenderingProperty"><span
         class=attr-name>‘shape-rendering’</span></a>, <a
         href="http://www.w3.org/TR/2011/REC-SVG11-20110816/pservers.html#StopColorProperty"><span
         class=attr-name>‘stop-color’</span></a>, <a
         href="http://www.w3.org/TR/2011/REC-SVG11-20110816/pservers.html#StopOpacityProperty"><span
         class=attr-name>‘stop-opacity’</span></a>, <a
         href="http://www.w3.org/TR/2011/REC-SVG11-20110816/painting.html#StrokeProperty"><span
         class=attr-name>‘stroke’</span></a>, <a
         href="http://www.w3.org/TR/2011/REC-SVG11-20110816/painting.html#StrokeDasharrayProperty"><span
         class=attr-name>‘stroke-dasharray’</span></a>, <a
         href="http://www.w3.org/TR/2011/REC-SVG11-20110816/painting.html#StrokeDashoffsetProperty"><span
         class=attr-name>‘stroke-dashoffset’</span></a>, <a
         href="http://www.w3.org/TR/2011/REC-SVG11-20110816/painting.html#StrokeLinecapProperty"><span
         class=attr-name>‘stroke-linecap’</span></a>, <a
         href="http://www.w3.org/TR/2011/REC-SVG11-20110816/painting.html#StrokeLinejoinProperty"><span
         class=attr-name>‘stroke-linejoin’</span></a>, <a
         href="http://www.w3.org/TR/2011/REC-SVG11-20110816/painting.html#StrokeMiterlimitProperty"><span
         class=attr-name>‘stroke-miterlimit’</span></a>, <a
         href="http://www.w3.org/TR/2011/REC-SVG11-20110816/painting.html#StrokeOpacityProperty"><span
         class=attr-name>‘stroke-opacity’</span></a>, <a
         href="http://www.w3.org/TR/2011/REC-SVG11-20110816/painting.html#StrokeWidthProperty"><span
         class=attr-name>‘stroke-width’</span></a>, <a
         href="http://www.w3.org/TR/2011/REC-SVG11-20110816/text.html#TextAnchorProperty"><span
         class=attr-name>‘text-anchor’</span></a>, <a
         href="http://www.w3.org/TR/2011/REC-SVG11-20110816/text.html#TextDecorationProperty"><span
         class=attr-name>‘text-decoration’</span></a>, <a
         href="http://www.w3.org/TR/2011/REC-SVG11-20110816/painting.html#TextRenderingProperty"><span
         class=attr-name>‘text-rendering’</span></a>, <a
         href="http://www.w3.org/TR/2011/REC-SVG11-20110816/text.html#UnicodeBidiProperty"><span
         class=attr-name>‘unicode-bidi’</span></a>, <a
         href="http://www.w3.org/TR/2011/REC-SVG11-20110816/painting.html#VisibilityProperty"><span
         class=attr-name>‘visibility’</span></a>, <a
         href="http://www.w3.org/TR/2011/REC-SVG11-20110816/text.html#WordSpacingProperty"><span
         class=attr-name>‘word-spacing’</span></a>, <a
         href="http://www.w3.org/TR/2011/REC-SVG11-20110816/text.html#WritingModeProperty"><span
         class=attr-name>‘writing-mode’</span></a></span>
        <li><a
         href="http://www.w3.org/TR/2011/REC-SVG11-20110816/styling.html#ClassAttribute"><span
         class=attr-name>‘class’</span></a>
        <li><a
         href="http://www.w3.org/TR/2011/REC-SVG11-20110816/styling.html#StyleAttribute"><span
         class=attr-name>‘style’</span></a>
        <li><a
         href="http://www.w3.org/TR/2011/REC-SVG11-20110816/struct.html#ExternalResourcesRequiredAttribute"><span
         class=attr-name>‘externalResourcesRequired’</span></a>
        <li><a
         href="http://www.w3.org/TR/2011/REC-SVG11-20110816/coords.html#TransformAttribute"><span
         class=attr-name>‘transform’</span></a>
        <li><a href="#ClipPathElementClipPathUnitsAttribute"><span
         class=attr-name>‘clipPathUnits’</span></a>
       </ul>
     <tr>
      <th>DOM Interfaces:
      <td><a class=idlinterface
       href="#InterfaceSVGClipPathElement">SVGClipPathElement</a>
   </table>
   <div class=adef-list>
    <p><em>Attribute definitions:</em>
    <dl>
     <dt id=ClipPathElementClipPathUnitsAttribute><span
      class=adef>clipPathUnits</span> = "<em>userSpaceOnUse</em> |
      <em>objectBoundingBox</em>"
     <dd>Defines the coordinate system for the contents of the <a
      class=element-name href="#ClipPathElement">‘<code
      class=property>clipPath</code>’</a>.<br>
      If <span class=attr-value>clipPathUnits="userSpaceOnUse"</span>, the
      contents of the <a class=element-name href="#ClipPathElement">‘<code
      class=property>clipPath</code>’</a> represent values in the current
      user coordinate system in place at the time when the <a
      class=element-name href="#ClipPathElement">‘<code
      class=property>clipPath</code>’</a> element is referenced (i.e., the
      user coordinate system for the element referencing the <a
      class=element-name href="#ClipPathElement">‘<code
      class=property>clipPath</code>’</a> element via the <a class=property
      href="http://www.w3.org/TR/2011/REC-SVG11-20110816/masking.html#ClipPathProperty">‘<code
      class=property>clip-path</code>’</a> property).<br>
      If <span class=attr-value>clipPathUnits="objectBoundingBox"</span>, then
      the user coordinate system for the contents of the <a class=element-name
      href="#ClipPathElement">‘<code class=property>clipPath</code>’</a>
      element is established using the bounding box of the element to which
      the clipping path is applied (see <a class=index
      href="#object-bounding-box-units" id=object-bounding-box-units0>object
      bounding box units</a>).<br>
      If attribute <a class=attr-name
      href="#ClipPathElementClipPathUnitsAttribute">‘<code
      class=property>clipPathUnits</code>’</a> is not specified, then the
      effect is as if a value of <span class=attr-value>‘<code
      class=property>userSpaceOnUse</code>’</span> were specified.<br>
      <span class=anim-target>Animatable: yes.</span>
    </dl>
   </div>
   <p>CSS properties inherit into the <a class=element-name
    href="#ClipPathElement">‘<code class=property>clipPath</code>’</a>
    element from its ancestors; properties do <em>not</em> inherit from the
    element referencing the <a class=element-name
    href="#ClipPathElement">‘<code class=property>clipPath</code>’</a>
    element.
   <p><a class=element-name href="#ClipPathElement">‘<code
    class=property>clipPath</code>’</a> elements are never rendered
    directly; their only usage is as something that can be referenced using
    the <a class=property
    href="http://www.w3.org/TR/2011/REC-SVG11-20110816/masking.html#ClipPathProperty">‘<code
    class=property>clip-path</code>’</a> property. The <a class=property
    href="http://www.w3.org/TR/2011/REC-SVG11-20110816/painting.html#DisplayProperty">‘<code
    class=property>display</code>’</a> property does not apply to the <a
    class=element-name href="#ClipPathElement">‘<code
    class=property>clipPath</code>’</a> element; thus, <a class=element-name
    href="#ClipPathElement">‘<code class=property>clipPath</code>’</a>
    elements are not directly rendered even if the ‘<code
    class=property>display</code>’ property is set to a value other than <a
    class=prop-value href="#none">none</a>, and <a class=element-name
    href="#ClipPathElement">‘<code class=property>clipPath</code>’</a>
    elements are available for referencing even when the <a class=property
    href="http://www.w3.org/TR/2011/REC-SVG11-20110816/painting.html#DisplayProperty">‘<code
    class=property>display</code>’</a> property on the <a class=element-name
    href="#ClipPathElement">‘<code class=property>clipPath</code>’</a>
    element or any of its ancestors is set to <a class=prop-value
    href="#none">none</a>.
   <p>A <a class=element-name href="#ClipPathElement">‘<code
    class=property>clipPath</code>’</a> element can contain <a
    class=element-name
    href="http://www.w3.org/TR/2011/REC-SVG11-20110816/paths.html#PathElement">‘<code
    class=property>path</code>’</a> elements, <a class=element-name
    href="http://www.w3.org/TR/2011/REC-SVG11-20110816/text.html#TextElement">‘<code
    class=property>text</code>’</a> elements, <a
    href="http://www.w3.org/TR/2011/REC-SVG11-20110816/intro.html#TermBasicShapeElement">basic
    shapes</a> (such as <a class=element-name
    href="http://www.w3.org/TR/2011/REC-SVG11-20110816/shapes.html#CircleElement">‘<code
    class=property>circle</code>’</a>) or a <a class=element-name
    href="http://www.w3.org/TR/2011/REC-SVG11-20110816/struct.html#UseElement">‘<code
    class=property>use</code>’</a> element. If a <a class=element-name
    href="http://www.w3.org/TR/2011/REC-SVG11-20110816/struct.html#UseElement">‘<code
    class=property>use</code>’</a> element is a child of a <a
    class=element-name href="#ClipPathElement">‘<code
    class=property>clipPath</code>’</a> element, it must directly reference
    <a class=element-name
    href="http://www.w3.org/TR/2011/REC-SVG11-20110816/paths.html#PathElement">‘<code
    class=property>path</code>’</a>, <a class=element-name
    href="http://www.w3.org/TR/2011/REC-SVG11-20110816/text.html#TextElement">‘<code
    class=property>text</code>’</a> or <a
    href="http://www.w3.org/TR/2011/REC-SVG11-20110816/intro.html#TermBasicShapeElement">basic
    shapes</a> elements. Indirect references are an error and the <a
    class=element-name href="#ClipPathElement">‘<code
    class=property>clipPath</code>’</a> element must be ignored.
   <p>The raw geometry of each child element exclusive of rendering properties
    such as ‘<code class=property>fill</code>’, ‘<code
    class=property>stroke</code>’, ‘<code
    class=property>stroke-width</code>’ within a <a class=element-name
    href="#ClipPathElement">‘<code class=property>clipPath</code>’</a>
    conceptually defines a 1-bit mask (with the possible exception of
    anti-aliasing along the edge of the geometry) which represents the
    silhouette of the graphics associated with that element. Anything outside
    the outline of the object is masked out. If a child element is made
    invisible by ‘<code class=property>display</code>’ or ‘<code
    class=property>visibility</code>’ it does not contribute to the clipping
    path. When the <a class=element-name href="#ClipPathElement">‘<code
    class=property>clipPath</code>’</a> element contains multiple child
    elements, the silhouettes of the child elements are logically OR'd
    together to create a single silhouette which is then used to restrict the
    region onto which paint can be applied. Thus, a point is inside the
    clipping path if it is inside any of the children of the <a
    class=element-name href="#ClipPathElement">‘<code
    class=property>clipPath</code>’</a>.
   <p>For a given graphics element, the actual clipping path used will be the
    intersection of the clipping path specified by its ‘<a
    href="#clip-path"><code class=property>clip-path</code></a>’ property
    (if any) with any clipping paths on its ancestors, as specified by the
    ‘<a href="#clip-path"><code class=property>clip-path</code></a>’
    property on the elements which establish a new viewport. (See <a
    href="#SVG11" rel=biblioentry>[SVG11]<!--{{SVG11}}--></a>)
   <p>A couple of additions:
   <ul>
    <li>The <a class=element-name href="#ClipPathElement">‘<code
     class=property>clipPath</code>’</a> element itself and its child
     elements do <em>not</em> inherit clipping paths from the ancestors of the
     <a class=element-name href="#ClipPathElement">‘<code
     class=property>clipPath</code>’</a> element.
    <li>The <a class=element-name href="#ClipPathElement">‘<code
     class=property>clipPath</code>’</a> element or any of its children can
     specify property ‘<a href="#clip-path"><code
     class=property>clip-path</code></a>’.<br>
     If a valid ‘<a href="#clip-path"><code
     class=property>clip-path</code></a>’ reference is placed on a <a
     class=element-name href="#ClipPathElement">‘<code
     class=property>clipPath</code>’</a> element, the resulting clipping
     path is the intersection of the contents of the <a class=element-name
     href="#ClipPathElement">‘<code class=property>clipPath</code>’</a>
     element with the referenced clipping path.<br>
     If a valid ‘<a href="#clip-path"><code
     class=property>clip-path</code></a>’ reference is placed on one of the
     children of a <a class=element-name href="#ClipPathElement">‘<code
     class=property>clipPath</code>’</a> element, then the given child
     element is clipped by the referenced clipping path before OR'ing the
     silhouette of the child element with the silhouettes of the other child
     elements.
    <li>An empty clipping path will completely clip away the element that had
     the ‘<a href="#clip-path"><code class=property>clip-path</code></a>’
     property applied.
   </ul>
   <h3 id=clipPath-geometry><span class=secno>8.5. </span>Clipping paths,
    geometry, and pointer events</h3>
   <p>A clipping path is conceptually equivalent to a custom viewport for the
    referencing element. Thus, it affects the rendering of an element, but not
    the element's inherent geometry. The <a class=index
    href="#bounding-client-rect" id=bounding-client-rect2>bounding client
    rect</a> of a clipped element (that is, an element which references a <a
    class=element-name href="#ClipPathElement">‘<code
    class=property>clipPath</code>’</a> element via a ‘<a
    href="#clip-path"><code class=property>clip-path</code></a>’ property,
    or a child of the referencing element) must remain the same as if it were
    not clipped.
   <p>By default, <a
    href="http://www.w3.org/TR/2011/REC-SVG11-20110816/interact.html#PointerEventsProperty">pointer
    events</a> must not be dispatched on the clipped (non-visible) regions of
    a shape. For example, a circle with a radius of 10 which is clipped to a
    circle with a radius of 5 will not receive <span class=event-name>‘<code
    class=property>click</code>’</span> events outside the smaller radius.
    Later versions of this specification may define new properties to enable
    fine-grained control over the interactions between hit testing and
    clipping.
   <h2 id=security><span class=secno>9. </span>Security</h2>
   <h3 id=origin-restrictions><span class=secno>9.1. </span>Origin
    Restrictions</h3>
   <p> External references to resources like <a class=element-name
    href="#MaskElement">‘<code class=property>mask</code>’</a> or <a
    class=element-name href="#ClipPathElement">‘<code
    class=property>clipPath</code>’</a> must not violate the same origin
    restrictions <a href="#CORS" rel=biblioentry>[CORS]<!--{{!CORS}}--></a>.
   <p>This restriction includes:
   <ul>
    <li>Any images, either as content or via styling, that are not exposed
     with CORS
    <li>Any tainted canvas
    <li>Any cross-origin content referenced by ‘<code
     class=css>xlink:href</code>’ or &lt;use&gt;
   </ul>
   <p> If content falls under this restriction, the resource must be rejected.
    The element is drawn as if the resource was not specified (i.e. the ‘<a
    href="#clip-path"><code class=property>clip-path</code></a>’ or ‘<a
    href="#mask"><code class=property>mask</code></a>’ property were set to
    ‘<a href="#none"><code class=css>none</code></a>’).
   <h2 id=DOMInterfaces><span class=secno>10. </span>DOM interfaces</h2>
   <h3 id=InterfaceSVGClipPathElement><span class=secno>10.1. </span>Interface
    SVGClipPathElement</h3>
   <p>The <a href="#InterfaceSVGClipPathElement">SVGClipPathElement</a>
    interface corresponds to the <a class=element-name
    href="#ClipPathElement">‘<code class=property>clipPath</code>’</a>
    element.
   <pre class=idl>interface <b>SVGClipPathElement</b> : <a
    href="http://www.w3.org/TR/2011/REC-SVG11-20110816/types.html#InterfaceSVGElement">SVGElement</a> {
   readonly attribute <a
    href="http://www.w3.org/TR/2011/REC-SVG11-20110816/types.html#InterfaceSVGAnimatedEnumeration">SVGAnimatedEnumeration</a> <a
    href="#SVGClipPathElement__clipPathUnits">clipPathUnits</a>;
   readonly attribute <a
    href="http://www.w3.org/TR/2011/REC-SVG11-20110816/coords.html#InterfaceSVGAnimatedTransformList">SVGAnimatedTransformList</a> <a
    href="#SVGClipPathElement__transform">transform</a>;
 };
 <a
    href="#InterfaceSVGClipPathElement">SVGClipPathElement</a> implements <a
    href="http://www.w3.org/TR/2011/REC-SVG11-20110816/types.html#InterfaceSVGUnitTypes">SVGUnitTypes</a>;</pre>
   <dl class=interface>
    <dt class=attributes-header>Attributes:
    <dd>
     <dl class=attributes>
      <dt class="attribute first-child"
       id="SVGClipPathElement__clipPathUnits"><b>clipPathUnits</b><span
       class=idl-type-parenthetical> (readonly <a
       href="http://www.w3.org/TR/2011/REC-SVG11-20110816/types.html#InterfaceSVGAnimatedEnumeration">SVGAnimatedEnumeration</a>)</span>
      <dd class=attribute>
       <div> Corresponds to attribute <a class=attr-name
        href="#ClipPathElementClipPathUnitsAttribute">‘<code
        class=property>clipPathUnits</code>’</a> on the given <a
        class=element-name href="#ClipPathElement">‘<code
        class=property>clipPath</code>’</a> element. Takes one of the
        constants defined in <a
        href="http://www.w3.org/TR/2011/REC-SVG11-20110816/types.html#InterfaceSVGUnitTypes">SVGUnitTypes</a>.</div>
      <dt class="attribute first-child"
       id="SVGClipPathElement__transform"><b>transform</b><span
       class=idl-type-parenthetical> (readonly <a
       href="http://www.w3.org/TR/2011/REC-SVG11-20110816/coords.html#InterfaceSVGAnimatedTransformList">SVGAnimatedTransformList</a>)</span>
      <dd class=attribute>
       <div> Corresponds to attribute <a class=attr-name
        href="http://www.w3.org/TR/2011/REC-SVG11-20110816/coords.html#TransformAttribute">‘<code
        class=property>transform</code>’</a> on the given element.</div>
     </dl>
   </dl>
   <h3 id=InterfaceSVGMaskElement><span class=secno>10.2. </span>Interface
    SVGMaskElement</h3>
   <p>The <a href="#InterfaceSVGMaskElement">SVGMaskElement</a> interface
    corresponds to the <a class=element-name href="#MaskElement">‘<code
    class=property>mask</code>’</a> element.
   <pre class=idl>interface <b>SVGMaskElement</b> : <a
    href="http://www.w3.org/TR/2011/REC-SVG11-20110816/types.html#InterfaceSVGElement">SVGElement</a> {
   readonly attribute <a
    href="http://www.w3.org/TR/2011/REC-SVG11-20110816/types.html#InterfaceSVGAnimatedEnumeration">SVGAnimatedEnumeration</a> <a
    href="#SVGMaskElement__maskUnits">maskUnits</a>;
   readonly attribute <a
    href="http://www.w3.org/TR/2011/REC-SVG11-20110816/types.html#InterfaceSVGAnimatedEnumeration">SVGAnimatedEnumeration</a> <a
    href="#SVGMaskElement__maskContentUnits">maskContentUnits</a>;
   readonly attribute <a
    href="http://www.w3.org/TR/2011/REC-SVG11-20110816/types.html#InterfaceSVGAnimatedLength">SVGAnimatedLength</a> <a
    href="#SVGMaskElement__x">x</a>;
   readonly attribute <a
    href="http://www.w3.org/TR/2011/REC-SVG11-20110816/types.html#InterfaceSVGAnimatedLength">SVGAnimatedLength</a> <a
    href="#SVGMaskElement__y">y</a>;
   readonly attribute <a
    href="http://www.w3.org/TR/2011/REC-SVG11-20110816/types.html#InterfaceSVGAnimatedLength">SVGAnimatedLength</a> <a
    href="#SVGMaskElement__width">width</a>;
   readonly attribute <a
    href="http://www.w3.org/TR/2011/REC-SVG11-20110816/types.html#InterfaceSVGAnimatedLength">SVGAnimatedLength</a> <a
    href="#SVGMaskElement__height">height</a>;
 };
 <a
    href="#InterfaceSVGMaskElement">SVGMaskElement</a> implements <a
    href="http://www.w3.org/TR/2011/REC-SVG11-20110816/types.html#InterfaceSVGUnitTypes">SVGUnitTypes</a>;</pre>
   <dl class=interface>
    <dt class=attributes-header>Attributes:
    <dd>
     <dl class=attributes>
      <dt class="attribute first-child"
       id="SVGMaskElement__maskUnits"><b>maskUnits</b><span
       class=idl-type-parenthetical> (readonly <a
       href="http://www.w3.org/TR/2011/REC-SVG11-20110816/types.html#InterfaceSVGAnimatedEnumeration">SVGAnimatedEnumeration</a>)</span>
      <dd class=attribute>
       <div> Corresponds to attribute <a class=attr-name
        href="#MaskElementMaskUnitsAttribute">‘<code
        class=property>maskUnits</code>’</a> on the given <a
        class=element-name href="#MaskElement">‘<code
        class=property>mask</code>’</a> element. Takes one of the constants
        defined in <a
        href="http://www.w3.org/TR/2011/REC-SVG11-20110816/types.html#InterfaceSVGUnitTypes">SVGUnitTypes</a>.</div>
      <dt class=attribute
       id="SVGMaskElement__maskContentUnits"><b>maskContentUnits</b><span
       class=idl-type-parenthetical> (readonly <a
       href="http://www.w3.org/TR/2011/REC-SVG11-20110816/types.html#InterfaceSVGAnimatedEnumeration">SVGAnimatedEnumeration</a>)</span>
      <dd class=attribute>
       <div> Corresponds to attribute <a class=attr-name
        href="#MaskElementMaskContentUnitsAttribute">‘<code
        class=property>maskContentUnits</code>’</a> on the given <a
        class=element-name href="#MaskElement">‘<code
        class=property>mask</code>’</a> element. Takes one of the constants
        defined in <a
        href="http://www.w3.org/TR/2011/REC-SVG11-20110816/types.html#InterfaceSVGUnitTypes">SVGUnitTypes</a>.</div>
      <dt class=attribute id="SVGMaskElement__x"><b>x</b><span
       class=idl-type-parenthetical> (readonly <a
       href="http://www.w3.org/TR/2011/REC-SVG11-20110816/types.html#InterfaceSVGAnimatedLength">SVGAnimatedLength</a>)</span>
      <dd class=attribute>
       <div> Corresponds to attribute <a class=attr-name
        href="#MaskElementXAttribute">‘<code class=property>x</code>’</a>
        on the given <a class=element-name href="#MaskElement">‘<code
        class=property>mask</code>’</a> element.</div>
      <dt class=attribute id="SVGMaskElement__y"><b>y</b><span
       class=idl-type-parenthetical> (readonly <a
       href="http://www.w3.org/TR/2011/REC-SVG11-20110816/types.html#InterfaceSVGAnimatedLength">SVGAnimatedLength</a>)</span>
      <dd class=attribute>
       <div> Corresponds to attribute <a class=attr-name
        href="#MaskElementYAttribute">‘<code class=property>y</code>’</a>
        on the given <a class=element-name href="#MaskElement">‘<code
        class=property>mask</code>’</a> element.</div>
      <dt class=attribute id="SVGMaskElement__width"><b>width</b><span
       class=idl-type-parenthetical> (readonly <a
       href="http://www.w3.org/TR/2011/REC-SVG11-20110816/types.html#InterfaceSVGAnimatedLength">SVGAnimatedLength</a>)</span>
      <dd class=attribute>
       <div> Corresponds to attribute <a class=attr-name
        href="#MaskElementWidthAttribute">‘<code
        class=property>width</code>’</a> on the given <a class=element-name
        href="#MaskElement">‘<code class=property>mask</code>’</a>
        element.</div>
      <dt class=attribute id="SVGMaskElement__height"><b>height</b><span
       class=idl-type-parenthetical> (readonly <a
       href="http://www.w3.org/TR/2011/REC-SVG11-20110816/types.html#InterfaceSVGAnimatedLength">SVGAnimatedLength</a>)</span>
      <dd class=attribute>
       <div> Corresponds to attribute <a class=attr-name
        href="#MaskElementHeightAttribute">‘<code
        class=property>height</code>’</a> on the given <a class=element-name
        href="#MaskElement">‘<code class=property>mask</code>’</a>
        element.</div>
     </dl>
   </dl>
   <h2 id=conformance><span class=secno>11. </span>Conformance</h2>
   <h3 class=no-ref id=conformance-to-css-background-and-border><span
    class=secno>11.1. </span>Conformance to CSS Background and Borders</h3>
   <p> Some property and element definitions in this specification require an
    SVG 1.1 implementation <a href="#SVG11"
    rel=biblioentry>[SVG11]<!--{{!SVG11}}--></a>. UAs without support for SVG
    must not implement any of the following properties and elements: ‘<a
    href="#mask-type"><code class=property>mask-type</code></a>’, ‘<a
    href="#clip-rule"><code class=property>clip-rule</code></a>’, <a
    class=element-name href="#ClipPathElement">‘<code
    class=property>clipPath</code>’</a> element, <a class=element-name
    href="#MaskElement">‘<code class=property>mask</code>’</a> element.
    For UAs without support for SVG, the ‘<a href="#mask"><code
    class=property>mask</code></a>’ and ‘<a href="#clip-path"><code
    class=property>clip-path</code></a>’ properties must neither support
    references to <a class=element-name href="#MaskElement">‘<code
    class=property>mask</code>’</a> elements nor to <a class=element-name
    href="#ClipPathElement">‘<code class=property>clipPath</code>’</a>
    elements.</p>
   <!--begin-conformance-->
   <h3 class=no-ref id=conventions> Document conventions</h3>
   <p>Conformance requirements are expressed with a combination of descriptive
    assertions and RFC 2119 terminology. The key words “MUST”, “MUST
    NOT”, “REQUIRED”, “SHALL”, “SHALL NOT”, “SHOULD”,
    “SHOULD NOT”, “RECOMMENDED”, “MAY”, and “OPTIONAL” in the
    normative parts of this document are to be interpreted as described in RFC
 . However, for readability, these words do not appear in all uppercase
    letters in this specification.
   <p>All of the text of this specification is normative except sections
    explicitly marked as non-normative, examples, and notes. <a
    href="#RFC2119" rel=biblioentry>[RFC2119]<!--{{!RFC2119}}--></a>
   <p>Examples in this specification are introduced with the words “for
    example” or are set apart from the normative text with
    <code>class="example"</code>, like this:
   <div class=example>
    <p>This is an example of an informative example.
   </div>
   <p>Informative notes begin with the word “Note” and are set apart from
    the normative text with <code>class="note"</code>, like this:
   <p class=note>Note, this is an informative note.
   <h3 class=no-ref id=conformance-classes> Conformance classes</h3>
   <p>Conformance to this is defined for three conformance classes:
   <dl>
    <dt><dfn id=style-sheet title="style sheet!!as conformance class">style
     sheet</dfn>
    <dd>A <a href="http://www.w3.org/TR/CSS21/conform.html#style-sheet">CSS
     style sheet</a>.
    <dt><dfn id=renderer>renderer</dfn>
    <dd>A <a href="http://www.w3.org/TR/CSS21/conform.html#user-agent">UA</a>
     that interprets the semantics of a style sheet and renders documents that
     use them.
    <dt><dfn id=authoring-tool>authoring tool</dfn>
    <dd>A <a href="http://www.w3.org/TR/CSS21/conform.html#user-agent">UA</a>
     that writes a style sheet.
   </dl>
   <p>A style sheet is conformant to this specification if all of its
    statements that use syntax defined in this module are valid according to
    the generic CSS grammar and the individual grammars of each feature
    defined in this module.
   <p>A renderer is conformant to this specification if, in addition to
    interpreting the style sheet as defined by the appropriate specifications,
    it supports all the features defined by this specification by parsing them
    correctly and rendering the document accordingly. However, the inability
    of a UA to correctly render a document due to limitations of the device
    does not make the UA non-conformant. (For example, a UA is not required to
    render color on a monochrome monitor.)
   <p>An authoring tool is conformant to this specification if it writes style
    sheets that are syntactically correct according to the generic CSS grammar
    and the individual grammars of each feature in this module, and meet all
    other conformance requirements of style sheets as described in this
    module.
   <h3 class=no-ref id=partial> Partial implementations</h3>
   <p>So that authors can exploit the forward-compatible parsing rules to
    assign fallback values, CSS renderers <strong>must</strong> treat as
    invalid (and <a
    href="http://www.w3.org/TR/CSS21/conform.html#ignore">ignore as
    appropriate</a>) any at-rules, properties, property values, keywords, and
    other syntactic constructs for which they have no usable level of support.
    In particular, user agents <strong>must not</strong> selectively ignore
    unsupported component values and honor supported values in a single
    multi-value property declaration: if any value is considered invalid (as
    unsupported values must be), CSS requires that the entire declaration be
    ignored.
   <h3 class=no-ref id=experimental> Experimental implementations</h3>
   <p>To avoid clashes with future CSS features, the CSS 2.1 specification
    reserves a <a
    href="http://www.w3.org/TR/CSS21/syndata.html#vendor-keywords">prefixed
    syntax</a> for proprietary and experimental extensions to CSS.
   <p>Prior to a specification reaching the Candidate Recommendation stage in
    the W3C process, all implementations of a CSS feature are considered
    experimental. The CSS Working Group recommends that implementations use a
    vendor-prefixed syntax for such features, including those in W3C Working
    Drafts. This avoids incompatibilities with future changes in the draft.
   <h3 class=no-ref id=testing> Non-experimental implementations</h3>
   <p>Once a specification reaches the Candidate Recommendation stage,
    non-experimental implementations are possible, and implementors should
    release an unprefixed implementation of any CR-level feature they can
    demonstrate to be correctly implemented according to spec.
   <p>To establish and maintain the interoperability of CSS across
    implementations, the CSS Working Group requests that non-experimental CSS
    renderers submit an implementation report (and, if necessary, the
    testcases used for that implementation report) to the W3C before releasing
    an unprefixed implementation of any CSS features. Testcases submitted to
    W3C are subject to review and correction by the CSS Working Group.
   <p>Further information on submitting testcases and implementation reports
    can be found from on the CSS Working Group's website at <a
    href="http://www.w3.org/Style/CSS/Test/">http://www.w3.org/Style/CSS/Test/</a>.
    Questions should be directed to the <a
    href="http://lists.w3.org/Archives/Public/public-css-testsuite">public-css-testsuite@w3.org</a>
    mailing list. <!--end-conformance-->
   <h2 class=no-num id=references> References</h2>
   <h3 class=no-num id=normative-references> Normative references</h3>
   <!--begin-normative-->
   <!-- Sorted by label -->
   <dl class=bibliography>
    <dt style="display: none"><!-- keeps the doc valid if the DL is empty -->
     <!---->
    <dt id=CORS>[CORS]
    <dd>Anne van Kesteren. <a
     href="http://www.w3.org/TR/2013/CR-cors-20130129/"><cite>Cross-Origin
     Resource Sharing.</cite></a> 29 January 2013. W3C Candidate
     Recommendation. (Work in progress.) URL: <a
     href="http://www.w3.org/TR/2013/CR-cors-20130129/">http://www.w3.org/TR/2013/CR-cors-20130129/</a>
    </dd>
    <!---->
    <dt id=CSS21>[CSS21]
    <dd>Bert Bos; et al. <a
     href="http://www.w3.org/TR/2011/REC-CSS2-20110607/"><cite>Cascading Style
     Sheets Level 2 Revision 1 (CSS 2.1) Specification.</cite></a> 7 June
 . W3C Recommendation. URL: <a
     href="http://www.w3.org/TR/2011/REC-CSS2-20110607/">http://www.w3.org/TR/2011/REC-CSS2-20110607/</a>
    </dd>
    <!---->
    <dt id=CSS3-EXCLUSIONS>[CSS3-EXCLUSIONS]
    <dd>Vincent Hardy; Rossen Atanassov; Alan Stearns. <a
     href="http://www.w3.org/TR/2012/WD-css3-exclusions-20120503/"><cite>CSS
     Exclusions and Shapes Module Level 3.</cite></a> 3 May 2012. W3C Working
     Draft. (Work in progress.) URL: <a
     href="http://www.w3.org/TR/2012/WD-css3-exclusions-20120503/">http://www.w3.org/TR/2012/WD-css3-exclusions-20120503/</a>
    </dd>
    <!---->
    <dt id=CSS3-IMAGES>[CSS3-IMAGES]
    <dd>Elika J. Etemad; Tab Atkins Jr. <a
     href="http://www.w3.org/TR/2012/CR-css3-images-20120417/"><cite>CSS Image
     Values and Replaced Content Module Level 3.</cite></a> 17 April 2012. W3C
     Candidate Recommendation. (Work in progress.) URL: <a
     href="http://www.w3.org/TR/2012/CR-css3-images-20120417/">http://www.w3.org/TR/2012/CR-css3-images-20120417/</a>
    </dd>
    <!---->
    <dt id=CSS3BG>[CSS3BG]
    <dd>Bert Bos; Elika J. Etemad; Brad Kemper. <a
     href="http://www.w3.org/TR/2012/CR-css3-background-20120724/"><cite>CSS
     Backgrounds and Borders Module Level 3.</cite></a> 24 July 2012. W3C
     Candidate Recommendation. (Work in progress.) URL: <a
     href="http://www.w3.org/TR/2012/CR-css3-background-20120724/">http://www.w3.org/TR/2012/CR-css3-background-20120724/</a>
    </dd>
    <!---->
    <dt id=CSS3VAL>[CSS3VAL]
    <dd>Håkon Wium Lie; Tab Atkins; Elika J. Etemad. <a
     href="http://www.w3.org/TR/2012/CR-css3-values-20120828/"><cite>CSS
     Values and Units Module Level 3.</cite></a> 28 August 2012. W3C Candidate
     Recommendation. (Work in progress.) URL: <a
     href="http://www.w3.org/TR/2012/CR-css3-values-20120828/">http://www.w3.org/TR/2012/CR-css3-values-20120828/</a>
    </dd>
    <!---->
    <dt id=DOM>[DOM]
    <dd>Anne van Kesteren; et al. <a
     href="http://www.w3.org/TR/2012/WD-dom-20121206/"><cite>DOM4.</cite></a>
 December 2012. W3C Working Draft. (Work in progress.) URL: <a
     href="http://www.w3.org/TR/2012/WD-dom-20121206/">http://www.w3.org/TR/2012/WD-dom-20121206/</a>
    </dd>
    <!---->
    <dt id=RFC2119>[RFC2119]
    <dd>S. Bradner. <a href="http://www.ietf.org/rfc/rfc2119.txt"><cite>Key
     words for use in RFCs to Indicate Requirement Levels.</cite></a> Internet
     RFC 2119. URL: <a
     href="http://www.ietf.org/rfc/rfc2119.txt">http://www.ietf.org/rfc/rfc2119.txt</a>
    </dd>
    <!---->
    <dt id=SELECTORS4>[SELECTORS4]
    <dd>Elika J. Etemad. <a
     href="http://www.w3.org/TR/2012/WD-selectors4-20120823/"><cite>Selectors
     Level 4.</cite></a> 23 August 2012. W3C Working Draft. (Work in
     progress.) URL: <a
     href="http://www.w3.org/TR/2012/WD-selectors4-20120823/">http://www.w3.org/TR/2012/WD-selectors4-20120823/</a>
    </dd>
    <!---->
    <dt id=SVG11>[SVG11]
    <dd>Erik Dahlström; et al. <a
     href="http://www.w3.org/TR/2011/REC-SVG11-20110816/"><cite>Scalable
     Vector Graphics (SVG) 1.1 (Second Edition).</cite></a> 16 August 2011.
     W3C Recommendation. URL: <a
     href="http://www.w3.org/TR/2011/REC-SVG11-20110816/">http://www.w3.org/TR/2011/REC-SVG11-20110816/</a>
    </dd>
    <!---->
   </dl>
   <!--end-normative-->
   <dl>
    <dt id=ref-svg2><strong class=normref>[SVG2]</strong>
    <dd> Cameron McCormack; et al. <a
     href="http://www.w3.org/TR/2012/WD-SVG2-20120828/"><cite>Scalable Vector
     Graphics (SVG) 2</cite>.</a> 28 August 2012. W3C Working Draft. (Work in
     progress.) URL: <a
     href="http://www.w3.org/TR/2012/WD-SVG2-20120828/">http://www.w3.org/TR/2012/WD-SVG2-20120828/</a>
   </dl>
   <h3 class=no-num id=other-references> Other references</h3>
   <!--begin-informative-->
   <!-- Sorted by label -->
   <dl class=bibliography>
    <dt style="display: none"><!-- keeps the doc valid if the DL is empty -->
     <!---->
    <dt id=CSS3-TRANSFORMS>[CSS3-TRANSFORMS]
    <dd>Simon Fraser; et al. <a
     href="http://www.w3.org/TR/2012/WD-css3-transforms-20120911/"><cite>CSS
     Transforms.</cite></a> 11 September 2012. W3C Working Draft. (Work in
     progress.) URL: <a
     href="http://www.w3.org/TR/2012/WD-css3-transforms-20120911/">http://www.w3.org/TR/2012/WD-css3-transforms-20120911/</a>
    </dd>
    <!---->
    <dt id=CSSOM-VIEW>[CSSOM-VIEW]
    <dd>Anne van Kesteren. <a
     href="http://www.w3.org/TR/2011/WD-cssom-view-20110804/"><cite>CSSOM View
     Module.</cite></a> 4 August 2011. W3C Working Draft. (Work in progress.)
     URL: <a
     href="http://www.w3.org/TR/2011/WD-cssom-view-20110804/">http://www.w3.org/TR/2011/WD-cssom-view-20110804/</a>
    </dd>
    <!---->
   </dl>
   <!--end-informative-->
   <h2 class=no-num id=index> Index</h2>
   <!--begin-index-->
   <ul class=indexlist>
    <li>‘<a href="#alpha"><code class=css>alpha</code></a>’, <a
     href="#alpha" title="section 6.2."><strong>6.2.</strong></a>
    <li>authoring tool, <a href="#authoring-tool"
     title="section 11.1."><strong>11.1.</strong></a>
    <li>‘<a href="#auto"><code class=css>auto</code></a>’, <a href="#auto"
     title="section 6.2."><strong>6.2.</strong></a>
    <li>‘<code class=css>border-box</code>’
     <ul>
      <li>‘<a href="#mask-clip"><code class=property>mask-clip</code></a>’
       value, <a href="#border-box"
       title="section 6.5."><strong>6.5.</strong></a>
      <li>‘<a href="#mask-origin"><code
       class=property>mask-origin</code></a>’ value, <a href="#border-box0"
       title="section 6.6."><strong>6.6.</strong></a>
     </ul>
    <li>&lt;bottom&gt;, <a href="#ltbottomgt"
     title="section 8.3."><strong>8.3.</strong></a>
    <li>bounding client rect, <a href="#bounding-client-rect"
     title="section 4."><strong>4.</strong></a>, <a
     href="#bounding-client-rect0" title="section 8.1.">8.1.</a>, <a
     href="#bounding-client-rect1" title="section 8.1.">8.1.</a>, <a
     href="#bounding-client-rect2" title="section 8.5.">8.5.</a>
    <li><a href="#ltboxgt"><var>&lt;box&gt;</var></a>, <a href="#ltboxgt"
     title="section 6.5."><strong>6.5.</strong></a>
    <li>&lt;child-selector&gt;, <a href="#ltchild-selectorgt"
     title="section 6.1."><strong>6.1.</strong></a>
    <li>clip, <a href="#ClipProperty"
     title="section 8.3."><strong>8.3.</strong></a>
    <li><a href="#ltclip-boxgt"><var>&lt;clip-box&gt;</var></a>, <a
     href="#ltclip-boxgt" title="section 6.5."><strong>6.5.</strong></a>
    <li>clipPath, <a href="#clippath"
     title="section 8.4."><strong>8.4.</strong></a>
    <li>clip-path, <a href="#clip-path"
     title="section 8.1."><strong>8.1.</strong></a>
    <li>clip-rule, <a href="#clip-rule"
     title="section 8.2."><strong>8.2.</strong></a>
    <li>&lt;clip-source&gt;, <a href="#ltclip-sourcegt"
     title="section 8.1."><strong>8.1.</strong></a>
    <li>‘<a href="#ltcompound-selectorgt"><code
     class=css>&lt;compound-selector&gt;</code></a>’, <a
     href="#ltcompound-selectorgt"
     title="section 6.1."><strong>6.1.</strong></a>
    <li>‘<a href="#content-box0"><code class=css>content-box</code></a>’,
     <a href="#content-box0" title="section 6.6."><strong>6.6.</strong></a>
     <ul>
      <li>‘<a href="#mask-clip"><code class=property>mask-clip</code></a>’
       value, <a href="#content-box"
       title="section 6.5."><strong>6.5.</strong></a>
     </ul>
    <li>‘<a href="#evenodd"><code class=css>evenodd</code></a>’, <a
     href="#evenodd" title="section 8.2."><strong>8.2.</strong></a>
    <li>&lt;image&gt;, <a href="#ltimagegt"
     title="section 6.1."><strong>6.1.</strong></a>
    <li>layers, <a href="#layers" title="section 5.1.">5.1.</a>
    <li>&lt;left&gt;, <a href="#ltleftgt"
     title="section 8.3."><strong>8.3.</strong></a>
    <li>local coordinate system, <a href="#local-coordinate-system"
     title="section 4."><strong>4.</strong></a>
    <li>‘<a href="#luminance"><code class=css>luminance</code></a>’, <a
     href="#luminance" title="section 6.2."><strong>6.2.</strong></a>
    <li>mask, <a href="#MaskProperty"
     title="section 6.8."><strong>6.8.</strong></a>, <a href="#mask"
     title="section 6.10."><strong>6.10.</strong></a>, <a href="#mask0"
     title="section 4."><strong>4.</strong></a>
    <li>mask-box-image, <a href="#mask-box-image0"
     title="section 7.6."><strong>7.6.</strong></a>
    <li>mask box image area, <a href="#mask-box-image-area"
     title="section 7.4."><strong>7.4.</strong></a>
    <li>mask-box-image-outset, <a href="#mask-box-image-outset"
     title="section 7.4."><strong>7.4.</strong></a>
    <li>mask-box-image-repeat, <a href="#mask-box-image-repeat"
     title="section 7.5."><strong>7.5.</strong></a>
    <li>mask-box-image-slice, <a href="#mask-box-image-slice"
     title="section 7.2."><strong>7.2.</strong></a>
    <li>mask-box-image-source, <a href="#mask-box-image-source"
     title="section 7.1."><strong>7.1.</strong></a>
    <li>mask-box-image-width, <a href="#mask-box-image-width"
     title="section 7.3."><strong>7.3.</strong></a>
    <li>mask-clip, <a href="#mask-clip"
     title="section 6.5."><strong>6.5.</strong></a>
    <li>&lt;mask-element&gt;, <a href="#ltmask-elementgt"
     title="section 6.1."><strong>6.1.</strong></a>
    <li>&lt;mask-image&gt;, <a href="#ltmask-imagegt"
     title="section 6.1."><strong>6.1.</strong></a>
    <li>mask-image, <a href="#mask-image"
     title="section 6.1."><strong>6.1.</strong></a>
    <li>mask image area, <a href="#mask-image-area" title="section 7.">7.</a>
    <li>&lt;mask-layer&gt;, <a href="#ltmask-layergt"
     title="section 6.8."><strong>6.8.</strong></a>
    <li>mask-origin, <a href="#mask-origin"
     title="section 6.6."><strong>6.6.</strong></a>
    <li>mask painting area, <a href="#mask-painting-area"
     title="section 6.5."><strong>6.5.</strong></a>, <a
     href="#mask-painting-area0" title="section 6.3.">6.3.</a>, <a
     href="#mask-painting-area1" title="section 6.4.">6.4.</a>
    <li>mask-position, <a href="#mask-position"
     title="section 6.4."><strong>6.4.</strong></a>
    <li>mask positioning area, <a href="#mask-positioning-area"
     title="section 6.6."><strong>6.6.</strong></a>
    <li>&lt;mask-reference&gt;, <a href="#ltmask-referencegt"
     title="section 6.1."><strong>6.1.</strong></a>
    <li>mask-repeat, <a href="#mask-repeat"
     title="section 6.3."><strong>6.3.</strong></a>
    <li><a href="#ltmask-sizegt"><var>&lt;mask-size&gt;</var></a>, <a
     href="#ltmask-sizegt" title="section 6.7."><strong>6.7.</strong></a>
    <li>mask-size, <a href="#mask-size"
     title="section 6.7."><strong>6.7.</strong></a>
    <li>mask source, <a href="#mask-source"
     title="section 4."><strong>4.</strong></a>
    <li>mask-source-type, <a href="#mask-source-type"
     title="section 6.2."><strong>6.2.</strong></a>
    <li>mask-type, <a href="#mask-type"
     title="section 6.9."><strong>6.9.</strong></a>
    <li>‘<code class=css>no-clip</code>’
     <ul>
      <li>‘<a href="#mask-clip"><code class=property>mask-clip</code></a>’
       value, <a href="#no-clip"
       title="section 6.5."><strong>6.5.</strong></a>
     </ul>
    <li>‘<a href="#none"><code class=css>none</code></a>’, <a href="#none"
     title="section 6.1."><strong>6.1.</strong></a>
    <li>‘<a href="#nonzero"><code class=css>nonzero</code></a>’, <a
     href="#nonzero" title="section 8.2."><strong>8.2.</strong></a>
    <li>object bounding box units, <a href="#object-bounding-box-units"
     title="section 4."><strong>4.</strong></a>, <a
     href="#object-bounding-box-units0" title="section 8.4.">8.4.</a>
    <li>‘<code class=css>padding-box</code>’
     <ul>
      <li>‘<a href="#mask-clip"><code class=property>mask-clip</code></a>’
       value, <a href="#padding-box"
       title="section 6.5."><strong>6.5.</strong></a>
      <li>‘<a href="#mask-origin"><code
       class=property>mask-origin</code></a>’ value, <a href="#padding-box0"
       title="section 6.6."><strong>6.6.</strong></a>
     </ul>
    <li><a href="#ltpositiongt"><var>&lt;position&gt;</var></a>, <a
     href="#ltpositiongt" title="section 6.4."><strong>6.4.</strong></a>
    <li>renderer, <a href="#renderer"
     title="section 11.1."><strong>11.1.</strong></a>
    <li><a href="#ltrepeat-stylegt"><var>&lt;repeat-style&gt;</var></a>, <a
     href="#ltrepeat-stylegt" title="section 6.3."><strong>6.3.</strong></a>
    <li>&lt;right&gt;, <a href="#ltrightgt"
     title="section 8.3."><strong>8.3.</strong></a>
    <li>‘<a href="#ltshapegt"><code class=css>&lt;shape&gt;</code></a>’,
     <a href="#ltshapegt" title="section 8.1."><strong>8.1.</strong></a>
    <li><a href="#ltsource-typegt"><var>&lt;source-type&gt;</var></a>, <a
     href="#ltsource-typegt" title="section 6.2."><strong>6.2.</strong></a>
    <li>style sheet
     <ul>
      <li>as conformance class, <a href="#style-sheet"
       title="section 11.1."><strong>11.1.</strong></a>
     </ul>
    <li>&lt;top&gt;, <a href="#lttopgt"
     title="section 8.3."><strong>8.3.</strong></a>
    <li>‘<a href="#lturlgt"><code class=css>&lt;url&gt;</code></a>’, <a
     href="#lturlgt" title="section 6.1."><strong>6.1.</strong></a>
    <li>user coordinate system, <a href="#user-coordinate-system"
     title="section 4."><strong>4.</strong></a>
   </ul>
   <!--end-index-->
   <h2 class=no-num id=property-index> Property index</h2>
   <!--begin-properties-->
   <table class=proptable>
    <thead>
     <tr>
      <th>Property
      <th>Values
      <th>Initial
      <th>Applies to
      <th>Inh.
      <th>Percentages
      <th>Media
    <tbody>
     <tr>
      <th><a class=property href="#ClipProperty">clip</a>
      <td>&lt;shape&gt; | auto
      <td>see individual properties
      <td>Absolutely positioned elements. In SVG, it applies to elements which
       establish a new viewport, ‘pattern’ elements and ‘marker’
       elements.
      <td>no
      <td>N/A
      <td>visual
     <tr>
      <th><a class=property href="#clippath">clipPath</a>
      <td>
      <td>
      <td>
      <td>
      <td>
      <td>
     <tr>
      <th><a class=property href="#clip-path">clip-path</a>
      <td>&lt;shape&gt; | &lt;clip-source&gt; | none
      <td>none
      <td>All elements. SVG container elements, graphics elements and
       ‘clipPath’
      <td>no
      <td>as specified
      <td>visual
     <tr>
      <th><a class=property href="#clip-rule">clip-rule</a>
      <td>nonzero | evenodd
      <td>nonzero
      <td>graphics elements within a ‘clipPath’ element
      <td>yes
      <td>N/A
      <td>visual
     <tr>
      <th><a class=property href="#mask">mask</a>
      <td>
      <td>
      <td>
      <td>
      <td>
      <td>
     <tr>
      <th><a class=property href="#MaskProperty">mask</a>
      <td>&lt;mask-layer&gt;#
      <td>see individual properties
      <td>All elements. In SVG, it applies to container elements and graphics
       elements
      <td>no
      <td>see individual properties
      <td>visual
     <tr>
      <th><a class=property href="#mask-box-image0">mask-box-image</a>
      <td>&lt;‘mask-box-image-source’&gt; ||
       &lt;‘mask-box-image-slice’&gt; [ /
       &lt;‘mask-box-image-width’&gt; | /
       &lt;‘mask-box-image-width’&gt;? /
       &lt;‘mask-box-image-outset’&gt; ]? ||
       &lt;‘mask-box-image-repeat’&gt;
      <td>See individual properties
      <td>See individual properties
      <td>no
      <td>N/A
      <td>visual
     <tr>
      <th><a class=property
       href="#mask-box-image-outset">mask-box-image-outset</a>
      <td>[ &lt;length&gt; | &lt;number&gt; ]{1,4}
      <td>0
      <td>All elements. In SVG, it applies to container elements and graphics
       elements.
      <td>no
      <td>N/A
      <td>visual
     <tr>
      <th><a class=property
       href="#mask-box-image-repeat">mask-box-image-repeat</a>
      <td>[ stretch | repeat | round | space ]{1,2}
      <td>stretch
      <td>All elements. In SVG, it applies to container elements and graphics
       elements.
      <td>no
      <td>N/A
      <td>visual
     <tr>
      <th><a class=property
       href="#mask-box-image-slice">mask-box-image-slice</a>
      <td>[&lt;number&gt; | &lt;percentage&gt;]{1,4} &amp;&amp; fill?
      <td>0 fill
      <td>All elements. In SVG, it applies to container elements and graphics
       elements.
      <td>no
      <td>refer to size of the mask image
      <td>visual
     <tr>
      <th><a class=property
       href="#mask-box-image-source">mask-box-image-source</a>
      <td>&lt;mask-image&gt;
      <td>none
      <td>All elements. In SVG, it applies to container elements and graphics
       elements.
      <td>no
      <td>N/A
      <td>visual
     <tr>
      <th><a class=property
       href="#mask-box-image-width">mask-box-image-width</a>
      <td>[ &lt;length&gt; | &lt;percentage&gt; | &lt;number&gt; | auto ]{1,4}
      <td>auto
      <td>All elements. In SVG, it applies to container elements and graphics
       elements.
      <td>no
      <td>relative to width/height of the mask box image area
      <td>visual
     <tr>
      <th><a class=property href="#mask-clip">mask-clip</a>
      <td>&lt;clip-box&gt;#
      <td>border-box
      <td>All elements. In SVG, it applies to container elements and graphics
       elements
      <td>no
      <td>N/A
      <td>visual
     <tr>
      <th><a class=property href="#mask-image">mask-image</a>
      <td>&lt;mask-reference&gt;
      <td>none
      <td>All elements. In SVG, it applies to container elements and graphics
       elements
      <td>no
      <td>N/A
      <td>visual
     <tr>
      <th><a class=property href="#mask-origin">mask-origin</a>
      <td>&lt;box&gt;#
      <td>padding-box
      <td>All elements. In SVG, it applies to container elements and graphics
       elements
      <td>no
      <td>N/A
      <td>visual
     <tr>
      <th><a class=property href="#mask-position">mask-position</a>
      <td>&lt;position&gt;#
      <td>0% 0%
      <td>All elements. In SVG, it applies to container elements and graphics
       elements
      <td>no
      <td>refer to size of mask painting area minus size of mask image; see
       text
      <td>visual
     <tr>
      <th><a class=property href="#mask-repeat">mask-repeat</a>
      <td>&lt;repeat-style&gt;#
      <td>repeat
      <td>All elements. In SVG, it applies to container elements and graphics
       elements
      <td>no
      <td>N/A
      <td>visual
     <tr>
      <th><a class=property href="#mask-size">mask-size</a>
      <td>&lt;mask-size&gt;#
      <td>auto
      <td>All elements. In SVG, it applies to container elements and graphics
       elements
      <td>no
      <td>see text
      <td>visual
     <tr>
      <th><a class=property href="#mask-source-type">mask-source-type</a>
      <td>&lt;source-type&gt;#
      <td>auto
      <td>All elements. In SVG, it applies to container elements and graphics
       elements
      <td>no
      <td>N/A
      <td>visual
     <tr>
      <th><a class=property href="#mask-type">mask-type</a>
      <td>luminance | alpha
      <td>luminance
      <td>‘mask’ elements
      <td>no
      <td>N/A
      <td>visual
   </table>
   <!--end-properties-->
 </html>
 <!-- Keep this comment at the end of the file
 Local variables:
 mode: sgml
 sgml-declaration:"~/SGML/HTML4.decl"
 sgml-default-doctype-name:"html"
 sgml-minimize-attributes:t
 sgml-nofill-elements:("pre" "style" "br")
 sgml-live-element-indicator:t
 sgml-omittag:nil
 sgml-shorttag:nil
 sgml-namecase-general:t
 sgml-general-insert-case:lower
 sgml-always-quote-attributes:t
 sgml-indent-step:nil
 sgml-indent-data:t
 sgml-parent-document:nil
 sgml-exposed-tags:nil
 sgml-local-catalogs:nil
 sgml-local-ecat-files:nil
 End:
 -->

Mercurial > drafts / annotate

masking/index.html@f0bee7474714 (annotated)

masking/index.html