mask

  • Revision slug: SVG/Element/mask
  • Revision title: mask
  • Revision id: 91594
  • Created:
  • Creator: Jeremie
  • Is current revision? No
  • Comment 26 words added, 32 words removed

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 mask property.

Usage context

Categories Container element
Normative document SVG 1.1 (2nd Edition)

Example

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="8cm" height="3cm" viewBox="0 0 800 300" version="1.1"
     xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">

  <defs>
    <linearGradient id="Gradient" gradientUnits="userSpaceOnUse"
                    x1="0" y1="0" x2="800" y2="0">
      <stop offset="0" stop-color="white" stop-opacity="0" />
      <stop offset="1" stop-color="white" stop-opacity="1" />
    </linearGradient>

    <mask id="Mask" maskUnits="userSpaceOnUse"
          x="0" y="0" width="800" height="300">
      <rect x="0" y="0" width="800" height="300" fill="url(#Gradient)"  />
    </mask>

    <text id="Text" x="400" y="200" 
          font-family="Verdana" font-size="100" text-anchor="middle" >
      Masked text
    </text>
  </defs>

  <!-- Draw a pale red rectangle in the background -->
  <rect x="0" y="0" width="800" height="300" fill="#FF8080" />
  
  <!-- Draw the text string twice. First, filled blue, with the mask applied.
       Second, outlined in black without the mask. -->
  <use xlink:href="#Text" fill="blue" mask="url(#Mask)" />
  <use xlink:href="#Text" fill="none" stroke="black" stroke-width="2" />
</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.

Related

  • {{ SVGElement("clipPath") }}

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 <code>mask</code> property.</p>
<h2>Usage context</h2>
<table class="standard-table"> <tbody> <tr> <td>Categories</td> <td>Container element</td> </tr> <tr> <td>Normative document</td> <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>Example</h2>
<pre class="brush: xml">&lt;?xml version="1.0" standalone="no"?&gt;
&lt;!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"&gt;
&lt;svg width="8cm" height="3cm" viewBox="0 0 800 300" version="1.1"
     xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"&gt;

  &lt;defs&gt;
    &lt;linearGradient id="Gradient" gradientUnits="userSpaceOnUse"
                    x1="0" y1="0" x2="800" y2="0"&gt;
      &lt;stop offset="0" stop-color="white" stop-opacity="0" /&gt;
      &lt;stop offset="1" stop-color="white" stop-opacity="1" /&gt;
    &lt;/linearGradient&gt;

    &lt;mask id="Mask" maskUnits="userSpaceOnUse"
          x="0" y="0" width="800" height="300"&gt;
      &lt;rect x="0" y="0" width="800" height="300" fill="url(#Gradient)"  /&gt;
    &lt;/mask&gt;

    &lt;text id="Text" x="400" y="200" 
          font-family="Verdana" font-size="100" text-anchor="middle" &gt;
      Masked text
    &lt;/text&gt;
  &lt;/defs&gt;

  &lt;!-- Draw a pale red rectangle in the background --&gt;
  &lt;rect x="0" y="0" width="800" height="300" fill="#FF8080" /&gt;
  
  &lt;!-- Draw the text string twice. First, filled blue, with the mask applied.
       Second, outlined in black without the mask. --&gt;
  &lt;use xlink:href="#Text" fill="blue" mask="url(#Mask)" /&gt;
  &lt;use xlink:href="#Text" fill="none" stroke="black" stroke-width="2" /&gt;
&lt;/svg&gt;
</pre><h2>Attributes</h2>
<h3>Global attributes</h3>
<ul> <li><a href="/en/SVG/Attribute#ConditionalProccessing" title="en/SVG/Attribute#ConditionalProccessing">Conditional processing attributes</a> »</li> <li><a href="/en/SVG/Attribute#Core" title="en/SVG/Attribute#Core">Core attributes</a> »</li> <li><a href="/en/SVG/Attribute#Presentation" title="en/SVG/Attribute#Presentation">Presentation attributes</a> »</li> <li>{{ SVGAttr("class") }}</li> <li>{{ SVGAttr("style") }}</li> <li>{{ SVGAttr("externalResourcesRequired") }}</li>
</ul>
<h3>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>DOM Interface</h2>
<p>This element implements the <code><a href="/en/DOM/SVGMaskElement" title="en/DOM/SVGMaskElement">SVGMaskElement</a></code> interface.</p>
<h2>Related</h2>
<ul> <li>{{ SVGElement("clipPath") }}</li>
</ul>
Revert to this revision