maskUnits

  • Revision slug: SVG/Attribute/maskUnits
  • Revision title: maskUnits
  • Revision id: 52015
  • Created:
  • Creator: Sheppy
  • Is current revision? No
  • Comment copy edit; 6 words added, 3 words removed

Revision Content

« SVG Attribute reference home

The maskUnits attribute defines the coordinate system for attributes {{ SVGAttr("x") }}, {{ SVGAttr("y") }}, {{ SVGAttr("width") }} and {{ SVGAttr("height") }}.

If the maskUnits attribute isn't specified, then the effect is as if a value of objectBoundingBox were specified.

Usage context

Categories None
Value userSpaceOnUse | objectBoundingBox
Animatable Yes
Normative document SVG 1.1 (2nd Edition)
userSpaceOnUse
{{ SVGAttr("x") }}, {{ SVGAttr("y") }}, {{ SVGAttr("width") }} and {{ SVGAttr("height") }} represent values in the current user coordinate system in place at the time when the {{ SVGElement("mask") }} element is referenced (i.e., the user coordinate system for the element referencing the {{ SVGElement("mask") }} element via the {{ SVGAttr("mask") }} attribute).
objectBoundingBox
{{ SVGAttr("x") }}, {{ SVGAttr("y") }}, {{ SVGAttr("width") }} and {{ SVGAttr("height") }} represent fractions or percentages of the bounding box of the element to which the mask is applied. A bounding box could be considered the same as if the content of the {{ SVGElement("mask") }} were bound to a "0 0 1 1" {{ SVGAttr("viewbox") }}.

Examples

Elements

The following elements can use the maskUnits attribute:

  • {{ SVGElement("mask") }}

Revision Source

<p>« <a href="/en/SVG/Attribute" title="en/SVG/Attribute">SVG Attribute reference home</a></p>
<p>The <code>maskUnits</code> attribute defines the coordinate system for attributes {{ SVGAttr("x") }}, {{ SVGAttr("y") }}, {{ SVGAttr("width") }} and {{ SVGAttr("height") }}.</p>
<p>If the <code>maskUnits</code> attribute isn't specified, then the effect is as if a value of <code>objectBoundingBox</code> were specified.</p>
<h2 id="Usage_context">Usage context</h2>
<table class="standard-table"> <tbody> <tr> <th scope="row">Categories</th> <td><em>None</em></td> </tr> <tr> <th scope="row">Value</th> <td><code>userSpaceOnUse</code> | <code><strong>objectBoundingBox</strong></code></td> </tr> <tr> <th scope="row">Animatable</th> <td>Yes</td> </tr> <tr> <th scope="row">Normative document</th> <td><a class="external" href="http://www.w3.org/TR/SVG11/masking.html#MaskElementMaskUnitsAttribute" title="http://www.w3.org/TR/SVG11/masking.html#MaskElementMaskUnitsAttribute">SVG 1.1 (2nd Edition)</a></td> </tr> </tbody>
</table>
<dl> <dt>userSpaceOnUse</dt> <dd>{{ SVGAttr("x") }}, {{ SVGAttr("y") }}, {{ SVGAttr("width") }} and {{ SVGAttr("height") }} represent values in the current user coordinate system in place at the time when the {{ SVGElement("mask") }} element is referenced (i.e., the user coordinate system for the element referencing the {{ SVGElement("mask") }} element via the {{ SVGAttr("mask") }} attribute).</dd> <dt>objectBoundingBox</dt> <dd>{{ SVGAttr("x") }}, {{ SVGAttr("y") }}, {{ SVGAttr("width") }} and {{ SVGAttr("height") }} represent fractions or percentages of the bounding box of the element to which the mask is applied. A bounding box could be considered the same as if the content of the {{ SVGElement("mask") }} were bound to a "<code>0 0 1 1</code>" {{ SVGAttr("viewbox") }}.</dd>
</dl>
<h2 id="Examples">Examples</h2>
<h2 id="Elements">Elements</h2>
<p>The following elements can use the <code>maskUnits</code> attribute:</p>
<ul> <li>{{ SVGElement("mask") }}</li>
</ul>
Revert to this revision