この記事はまだボランティアによって 日本語 に翻訳されていません。ぜひ MDN に参加して翻訳を手伝ってください！
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> |
Attributes
Global attributes
- Conditional processing attributes »
- Core attributes »
- Presentation attributes »
classstyleexternalResourcesRequired
Specific attributes
DOM Interface
This element implements the SVGMaskElement interface.
Example
SVG
<?xml version="1.0"?>
<svg width="200" height="80" viewBox="0 0 200 80" version="1.1"
xmlns="https://www.w3.org/2000/svg"
xmlns:xlink="https://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>
Result
Specifications
| Specification | Status | Comment |
|---|---|---|
| CSS Masking Level 1 The 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 |
Browser compatibility
| Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|
| Basic support | (Yes) | (Yes) | (Yes) | (Yes) | ? |
| Feature | Android | Firefox Mobile (Gecko) | IE Phone | Opera Mobile | Safari Mobile |
|---|---|---|---|---|---|
| Basic support | ? | ? | ? | ? | ? |