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
x
y
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) | ? | ? | ? | ? |
本文档系腾讯云开发者社区成员共同维护，如有问题请联系 cloudcommunity@tencent.com
