mask

  • Revision slug: CSS/mask
  • Revision title: mask
  • Revision id: 238809
  • Created:
  • Creator: teoli
  • Is current revision? No
  • Comment

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

Browser compatibility

{{ CompatibilityTable() }}

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support Applies only to SVG elements {{ CompatGeckoDesktop("1.9.1") }} {{ CompatUnknown() }} Applies only to SVG elements Applies only to SVG elements
Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Basic support {{ CompatUnknown() }} {{ CompatGeckoMobile("1.9.1") }} {{ 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

<p>{{ CSSRef() }}</p>
<h2 id="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">Syntax</h2>
<pre class="eval">mask: &lt;uri&gt; | none | inherit
</pre>
<h3 id="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">Examples</h2>
<pre class="brush: css">.target { mask: url(#c1); }

.anothertarget { mask: url(resources.svg#c1); }
</pre>
<h2 id="Specifications">Specifications</h2>
<ul>
  <li><a class="external" href="http://www.w3.org/TR/2000/03/WD-SVG-20000303/masking.html#Masking" title="http://www.w3.org/TR/2000/03/WD-SVG-20000303/masking.html#ClipPathElement">Clipping, Masking and Compositing</a></li>
  <li><a class="external" href="http://www.w3.org/TR/css3-roadmap/#svg" title="http://www.w3.org/TR/css3-roadmap/#svg">CSS 3 SVG</a></li>
  <li><a class="external" href="http://www.w3.org/Graphics/SVG/" title="http://www.w3.org/Graphics/SVG/">SVG</a></li>
</ul>
<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</td>
        <td>Applies only to SVG elements</td>
        <td>{{ CompatGeckoDesktop("1.9.1") }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>Applies only to SVG elements</td>
        <td>Applies only to SVG elements</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>{{ CompatGeckoMobile("1.9.1") }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
      </tr>
    </tbody>
  </table>
</div>
<h3 id="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">See also</h2>
<ul>
  <li>{{ Cssxref("clip-path") }}, {{ Cssxref("filter") }}</li>
  <li><a class="internal" href="/En/Applying_SVG_effects_to_HTML_content" title="En/Applying SVG effects to HTML content">Applying SVG effects to HTML content</a></li>
  <li><a class="internal" href="/en/SVG" title="En/SVG">SVG</a></li>
</ul>
Revert to this revision