mask

<mask>

在SVG中，可以指定任何其他图形对象或<g>元素都可以用作将当前对象合成到背景中的Alpha蒙版。一个掩码是由<mask>元素定义的。使用该mask属性使用/引用掩码。

用法上下文

分类	容器元素
允许的内容	任意数量的下列元素，以任何顺序排列：动画元素描述元素图形元素结构元素渐变元素<a>, <altGlyphDef>, <clipPath>, <color-profile>, <cursor>, <filter>, <font>, <font-face>, <foreignObject>, <image>, <marker>, <mask>, <pattern>, <script>, <style>, <switch>, <text>, <view>

属性

全局属性

Conditional processing attributes »

Core attributes »

Presentation attributes »

class

style

externalResourcesRequired

具体属性

maskUnits

maskContentUnits

width

height

DOM接口

这个元素实现了SVGMaskElement接口。

例子

SVG

<?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>

结果

产品规格

Specification	Status	Comment
CSS Masking Level 1The 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

浏览器兼容性

Feature	Chrome	Edge	Firefox (Gecko)	Internet Explorer	Opera	Safari
Basic support	(Yes)	(Yes)	(Yes)	(Yes)	(Yes)	?

Feature	Android	Edge	Firefox Mobile (Gecko)	IE Phone	Opera Mobile	Safari Mobile
Basic support	?	(Yes)	?	?	?	?