mask

Summary

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
CSS Masking Level 1 Working Draft Extends its usage to HTML elements.
Extends its syntax by making it a shorthand for the new mask-* properties defined in that specification.
Scalable Vector Graphics (SVG) 1.1 (Second Edition) Recommendation Initial definition.

Browser compatibility

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support (for SVG) (Yes) (Yes) [*] ? (Yes) (Yes)
Applies to HTML Elements Not supported 3.5 (1.9.1) [*] Not supported Not supported Not supported
Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Basic support ? ? ? ? ?

Gecko notes

[*] Starting in Gecko 10.0 (Firefox 10.0 / Thunderbird 10.0 / SeaMonkey 2.7), 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

Document Tags and Contributors

Contributors to this page: Sheppy, Marcoos, ethertank, BijuGC, kscarfone, teoli, Mook(as), grendel, Bzbarsky
Last updated by: kscarfone,
Hide Sidebar