Join MDN and developers like you at Mozilla's View Source conference, 12-14 September in Berlin, Germany. Learn more at https://viewsourceconf.org

mask

在SVG中,你可以指一个透明的遮罩层和当前对象合成,形成背景。透明遮罩层可以是任何其他图形对象或者<g>元素。mask元素用于定义这样的遮罩元素。属性mask用来引用一个遮罩元素。

使用场景

类别容器元素
允许的内容物任意数量、任意排序的下列元素:
动画元素
描述性元素
形状元素
结构化元素
渐变元素
<a>, <altGlyphDef>, <clipPath>, <color-profile>, <cursor>, <filter>, <font>, <font-face>, <foreignObject>, <image>, <marker>, <mask>, <pattern>, <script>, <style>, <switch>, <text>, <view>

示例

源代码 输出结果
<?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>

» mask.svg

属性

全局属性

专有属性

DOM 接口

该元素实现了SVGMaskElement接口。

参见

文档标签和贡献者

标签: 
 此页面的贡献者: Sebastianz, fanxiaojie, fonglezen
 最后编辑者: Sebastianz,