编辑这个页面须要登录或更高权限！

SVG <mask> 元素

使用SVG mask 遮罩功能，可以将遮罩应用于SVG形状。SVG遮罩是剪切路径的更高级版本，用于确定SVG形状的哪些部分可见以及具有何种透明度。

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

在线示例

生成一个蓝色矩形遮罩

<svg height="450" width="450">
 <defs>
  <mask id="mask1" x="0" y="0" width="100" height="100" >
    <rect x="0" y="0" width="100" height="100"
        style="stroke:none; fill: #ffffff"/>
  </mask>
</defs>

<rect x="1" y="1" width="200" height="200"
    style="stroke: none; fill: #0000ff; mask: url(#mask1)"/>
</svg>
测试看看‹/›

运行后效果如下:

用法解释

  • <mask>元素的id属性定义了掩码的唯一名称。

  • <mask>的<rect>元素定义蒙版的形状。

  • <rect>元素的style属性使mask ID元素具有mask CSS属性。

更多在线示例

文本遮罩效果

<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 &amp; White
        </text>
    </defs>

    <!-- 在背景上绘制黑色矩形 -->
    <rect x="100" y="10" width="95" height="60"></rect>
  
    <!-- 绘制文本字符串两次。首先，不带蒙版的白色文本。其次，应用蒙版的黑色文本-->
    <use xlink:href="#Text" fill="white"/></use>
    <use xlink:href="#Text" fill="black" mask="url(#myMask)"/></use>
</svg>
测试看看 ‹/›

运行后效果如下:

Black & White
SVG <Animation> 动画元素SVG <clipPath> 元素