mask

  • Revision slug: Web/SVG/Element/mask
  • Revision title: mask
  • Revision id: 502187
  • Created:
  • Creator: kscarfone
  • Is current revision? Yes
  • Comment Added SVG tags and {{SVGRef}} call

Revision Content

{{ SVGRefElem() }}

In SVG, you can specify that any other graphics object or {{ SVGElement("g") }} element can be used as an alpha mask for compositing the current object into the background. A mask is defined with the mask element. A mask is used/referenced using the {{ SVGAttr("mask") }} property.

Usage context

Categories Container element
Permitted content Any number of the following elements, in any order:
Animation elements »
Descriptive elements »
Shape elements »
Structural elements »
Gradient elements »
{{ SVGElement("a") }}, {{ SVGElement("altGlyphDef") }}, {{ SVGElement("clipPath") }}, {{ SVGElement("color-profile") }}, {{ SVGElement("cursor") }}, {{ SVGElement("filter") }}, {{ SVGElement("font") }}, {{ SVGElement("font-face") }}, {{ SVGElement("foreignObject") }}, {{ SVGElement("image") }}, {{ SVGElement("marker") }}, {{ SVGElement("mask") }}, {{ SVGElement("pattern") }}, {{ SVGElement("script") }}, {{ SVGElement("style") }}, {{ SVGElement("switch") }}, {{ SVGElement("text") }}, {{ SVGElement("view") }}
Normative document SVG 1.1 (2nd Edition)

Example

Source code Output result
{{ embed_text("mask.svg", "xml") }} {{ EmbedSVG("mask.svg",200,80) }}

» mask.svg

Attributes

Global attributes

Specific attributes

  • {{ SVGAttr("maskUnits") }}
  • {{ SVGAttr("maskContentUnits") }}
  • {{ SVGAttr("x") }}
  • {{ SVGAttr("y") }}
  • {{ SVGAttr("width") }}
  • {{ SVGAttr("height") }}

DOM Interface

This element implements the SVGMaskElement interface.

See also

  • {{ SVGElement("clipPath") }}

{{SVGRef}}

Revision Source

<p>{{ SVGRefElem() }}</p>
<p>In SVG, you can specify that any other graphics object or {{ SVGElement("g") }} element can be used as an alpha mask for compositing the current object into the background. A mask is defined with the <code>mask</code> element. A mask is used/referenced using the {{ SVGAttr("mask") }} property.</p>
<h2 id="Usage_context">Usage context</h2>
<table class="standard-table">
 <tbody>
  <tr>
   <th scope="row">Categories</th>
   <td>Container element</td>
  </tr>
  <tr>
   <th scope="row">Permitted content</th>
   <td>Any number of the following elements, in any order:<br />
    <a href="/en/SVG/Element#Animation" title="en/SVG/Attribute#Animation">Animation elements</a>&nbsp;»<br />
    <a href="/en/SVG/Element#Descriptive" title="en/SVG/Attribute#Descriptive">Descriptive elements</a>&nbsp;»<br />
    <a href="/en/SVG/Element#Shape" title="en/SVG/Attribute#Shape">Shape elements</a>&nbsp;»<br />
    <a href="/en/SVG/Element#Structural" title="en/SVG/Attribute#Structural">Structural elements</a>&nbsp;»<br />
    <a href="/en/SVG/Element#Gradient" title="en/SVG/Attribute#Gradient">Gradient elements</a>&nbsp;»<br />
    {{ SVGElement("a") }}, {{ SVGElement("altGlyphDef") }}, {{ SVGElement("clipPath") }}, {{ SVGElement("color-profile") }}, {{ SVGElement("cursor") }}, {{ SVGElement("filter") }}, {{ SVGElement("font") }}, {{ SVGElement("font-face") }}, {{ SVGElement("foreignObject") }}, {{ SVGElement("image") }}, {{ SVGElement("marker") }}, {{ SVGElement("mask") }}, {{ SVGElement("pattern") }}, {{ SVGElement("script") }}, {{ SVGElement("style") }}, {{ SVGElement("switch") }}, {{ SVGElement("text") }}, {{ SVGElement("view") }}</td>
  </tr>
  <tr>
   <th scope="row">Normative document</th>
   <td><a class="external" href="http://www.w3.org/TR/SVG/masking.html#Masking" title="http://www.w3.org/TR/SVG/masking.html#Masking">SVG 1.1 (2nd Edition)</a></td>
  </tr>
 </tbody>
</table>
<h2 id="Example">Example</h2>
<table class="standard-table">
 <tbody>
  <tr>
   <th scope="col">Source code</th>
   <th scope="col">Output result</th>
  </tr>
  <tr>
   <td>{{ embed_text("mask.svg", "xml") }}</td>
   <td>{{ EmbedSVG("mask.svg",200,80) }}</td>
  </tr>
 </tbody>
</table>
<p>» <a href="https://developer.mozilla.org/files/3269/mask.svg" title="https://developer.mozilla.org/files/3269/mask.svg">mask.svg</a></p>
<h2 id="Attributes">Attributes</h2>
<h3 id="Global_attributes">Global attributes</h3>
<ul>
 <li><a href="/en/SVG/Attribute#ConditionalProccessing" title="en/SVG/Attribute#ConditionalProccessing">Conditional processing attributes</a>&nbsp;»</li>
 <li><a href="/en/SVG/Attribute#Core" title="en/SVG/Attribute#Core">Core attributes</a>&nbsp;»</li>
 <li><a href="/en/SVG/Attribute#Presentation" title="en/SVG/Attribute#Presentation">Presentation attributes</a>&nbsp;»</li>
 <li>{{ SVGAttr("class") }}</li>
 <li>{{ SVGAttr("style") }}</li>
 <li>{{ SVGAttr("externalResourcesRequired") }}</li>
</ul>
<h3 id="Specific_attributes">Specific attributes</h3>
<ul>
 <li>{{ SVGAttr("maskUnits") }}</li>
 <li>{{ SVGAttr("maskContentUnits") }}</li>
 <li>{{ SVGAttr("x") }}</li>
 <li>{{ SVGAttr("y") }}</li>
 <li>{{ SVGAttr("width") }}</li>
 <li>{{ SVGAttr("height") }}</li>
</ul>
<h2 id="DOM.C2.A0Interface">DOM&nbsp;Interface</h2>
<p>This element implements the <code><a href="/en/DOM/SVGMaskElement" title="en/DOM/SVGMaskElement">SVGMaskElement</a></code> interface.</p>
<h2 id="See_also">See also</h2>
<ul>
 <li>{{ SVGElement("clipPath") }}</li>
</ul>
<p>{{SVGRef}}</p>
Revert to this revision