mask

  • Revision slug: Web/CSS/mask
  • Revision title: mask
  • Revision id: 394429
  • Created:
  • Creator: Sheppy
  • Is current revision? No
  • Comment Moved From CSS/mask to Web/CSS/mask

Revision Content

{{ CSSRef() }}

Summary

  • {{ Xref_cssinitial() }} none
  • Applies to all elements
  • {{ Xref_cssinherited() }} no
  • Media {{ Xref_cssvisual() }}
  • {{ Xref_csscomputed() }}
  • Animatable yes

Syntax

mask: <uri> | none | inherit

Values

If the value is a URI value, the element pointed to by the URI is used as an SVG mask.

Examples

.target { mask: url(#c1); }

.anothertarget { mask: url(resources.svg#c1); }

Specifications

Specification Status Comment
{{ SpecName('SVG1.1', 'masking.html#MaskProperty', 'mask') }} {{ Spec2('SVG1.1') }}  

Its extension to HTML elements is not yet present in any specification.

Browser compatibility

{{ CompatibilityTable() }}

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support (for SVG) {{ CompatVersionUnknown() }} {{ CompatVersionUnknown() }} [*] {{ CompatUnknown() }} {{ CompatVersionUnknown() }} {{ CompatVersionUnknown() }}
Applies to HTML Elements {{ CompatNo() }} {{ CompatGeckoDesktop("1.9.1") }} [*] {{ CompatNo() }} {{ CompatNo() }} {{ CompatNo() }}
Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Basic support {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }}

Gecko notes

[*] Starting in Gecko 10.0 {{ geckoRelease("10.0") }}, the default color space when handling masks is sRGB; previously, the default (and only supported color space) was linearRGB. This changes the appearance of mask effects, but brings Gecko into compliance with the second edition of the SVG 1.1 specification.

See also

Revision Source

<div>{{ CSSRef() }}</div>

<h2 id="Summary" name="Summary">Summary</h2>
<ul class="cssprop">
  <li><dfn>{{ Xref_cssinitial() }}</dfn> <code>none</code></li>
  <li><dfn>Applies to</dfn> all elements</li>
  <li><dfn>{{ Xref_cssinherited() }}</dfn> no</li>
  <li><dfn>Media</dfn> {{ Xref_cssvisual() }}</li>
  <li><dfn>{{ Xref_csscomputed() }}</dfn></li>
  <li><dfn>Animatable</dfn> yes</li>
</ul>


<h2 id="Syntax" name="Syntax">Syntax</h2>
<pre class="syntaxbox">mask: &lt;uri&gt; | none | inherit</pre>

<h3 id="Values" name="Values">Values</h3>
<p>If the value is a URI value, the element pointed to by the URI is used as an SVG mask.</p>

<h2 id="Examples" name="Examples">Examples</h2>
<pre class="brush: css">
.target { mask: url(#c1); }

.anothertarget { mask: url(resources.svg#c1); }
</pre>

<h2 id="Specifications" name="Specifications">Specifications</h2>
<table class="standard-table">
  <thead>
    <tr>
      <th scope="col">Specification</th>
      <th scope="col">Status</th>
      <th scope="col">Comment</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>{{ SpecName('SVG1.1', 'masking.html#MaskProperty', 'mask') }}</td>
      <td>{{ Spec2('SVG1.1') }}</td>
      <td>&nbsp;</td>
    </tr>
  </tbody>
</table>
<p>Its extension to HTML elements is not yet present in any specification.</p>

<h2 id="Browser_Compatibility" name="Browser_Compatibility">Browser compatibility</h2>
<p>{{ CompatibilityTable() }}</p>
<div id="compat-desktop">
  <table class="compat-table">
    <tbody>
      <tr>
        <th>Feature</th>
        <th>Chrome</th>
        <th>Firefox (Gecko)</th>
        <th>Internet Explorer</th>
        <th>Opera</th>
        <th>Safari (WebKit)</th>
      </tr>
      <tr>
        <td>Basic support (for SVG)</td>
        <td>{{ CompatVersionUnknown() }}</td>
        <td>{{ CompatVersionUnknown() }} [*]</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatVersionUnknown() }}</td>
        <td>{{ CompatVersionUnknown() }}</td>
      </tr>
      <tr>
        <td>Applies to HTML Elements</td>
        <td>{{ CompatNo() }}</td>
        <td>{{ CompatGeckoDesktop("1.9.1") }} [*]</td>
        <td>{{ CompatNo() }}</td>
        <td>{{ CompatNo() }}</td>
        <td>{{ CompatNo() }}</td>
      </tr>
    </tbody>
  </table>
</div>
<div id="compat-mobile">
  <table class="compat-table">
    <tbody>
      <tr>
        <th>Feature</th>
        <th>Android</th>
        <th>Firefox Mobile (Gecko)</th>
        <th>IE Phone</th>
        <th>Opera Mobile</th>
        <th>Safari Mobile</th>
      </tr>
      <tr>
        <td>Basic support</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
      </tr>
    </tbody>
  </table>
</div>


<h3 id="Gecko_notes" name="Gecko_notes">Gecko notes</h3>
<p>[*] Starting in Gecko 10.0 {{ geckoRelease("10.0") }}, the default color space when handling masks is sRGB; previously, the default (and only supported color space) was linearRGB. This changes the appearance of mask effects, but brings Gecko into compliance with the second edition of the SVG 1.1 specification.</p>


<h2 id="See_also" name="See_also">See also</h2>
<ul>
  <li>{{ Cssxref("clip-path") }}, {{ Cssxref("filter") }}</li>
  <li><a href="/en-US/docs/Applying_SVG_effects_to_HTML_content" title="Applying SVG effects to HTML content">Applying SVG effects to HTML content</a></li>
  <li><a href="/en-US/docs/SVG" title="SVG">SVG</a></li>
</ul>
Revert to this revision