Your Search Results


    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

    Categories Container element
    Permitted content Any 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>
    Normative document SVG 1.1 (2nd Edition)


    Source code Output result
    <?xml version="1.0"?>
    <svg width="200" height="80" 
         viewBox="0 0 200 80" version="1.1"
            <mask id="myMask" maskUnits="userSpaceOnUse"
                  x="0" y="0" width="200" height="80">
                <rect x="0" y="0" width="100" height="80" fill="white"/>
            <text id="Text" x="100" y="48" 
                  font-size="26" font-weight="bold" text-anchor="middle">
                Black & White
        <!-- 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)"/>

    » mask.svg


    Global attributes

    Specific attributes

    DOM Interface

    This element implements the SVGMaskElement interface.

    See also

    Document Tags and Contributors

    Contributors to this page: kscarfone, Jeremie
    Last updated by: kscarfone,