Your Search Results

    <mask>

    In SVG, you can specify that any other graphics object or <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

    CategoriesContainer element
    Permitted contentAny number of the following elements, in any order:
    Animation elements
    Descriptive elements
    Shape elements
    Structural elements
    Gradient elements
    <a>, <altGlyphDef>, <clipPath>, <color-profile>, <cursor>, <filter>, <font>, <font-face>, <foreignObject>, <image>, <marker>, <mask>, <pattern>, <script>, <style>, <switch>, <text>, <view>

    Example

    Source code 
    <?xml version="1.0"?>
<svg width="200" height="80" 
     viewBox="0 0 200 80" version="1.1"
     xmlns="http://www.w3.org/2000/svg" 
     xmlns:xlink="http://www.w3.org/1999/xlink">

    <defs>
        <mask id="myMask" maskUnits="userSpaceOnUse"
              x="0" y="0" width="200" height="80">
            <rect x="0" y="0" width="100" height="80" fill="white"/>
        </mask>

        <text id="Text" x="100" y="48" 
              font-size="26" font-weight="bold" text-anchor="middle">
            Black & White
        </text>
    </defs>

    <!-- Draw black rectangle in the background -->
    <rect x="100" y="10" width="95" height="60"  />
  
    <!-- Draw the text string twice. First, the white text without mask.
         Second, the black text with the mask applied-->
    <use xlink:href="#Text" fill="white"/>
    <use xlink:href="#Text" fill="black" mask="url(#myMask)"/>
</svg>
    Output result

    » mask.svg

    Attributes

    Global attributes

    Specific attributes

    DOM Interface

    This element implements the SVGMaskElement interface.

    Specifications

    Specification Status Comment
    CSS Masking Level 1
    The definition of '<mask>' in that specification.    		 Candidate Recommendation  
    Scalable Vector Graphics (SVG) 1.1 (Second Edition)
    The definition of '<mask>' in that specification.    		 Recommendation Initial definition

    Browser compatibility

    Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
    Basic support ? ? ? ? ?
    Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
    Basic support ? ? ? ? ?

    See also

    Document Tags and Contributors

    Tags: 
     Contributors to this page: Sebastianz, flashadicts, kscarfone, Jeremie
     Last updated by: Sebastianz,