The <mask>
element defines an alpha mask for compositing the current object into the background. A mask is used/referenced using the mask
property.
The <mask>
element defines an alpha mask for compositing the current object into the background. A mask is used/referenced using the mask
property.
<svg viewBox="-10 -10 120 120"> <mask id="myMask"> <!-- Everything under a white pixel will be visible --> <rect x="0" y="0" width="100" height="100" fill="white" /> <!-- Everything under a black pixel will be invisible --> <path d="M10,35 A20,20,0,0,1,50,35 A20,20,0,0,1,90,35 Q90,65,50,95 Q10,65,10,35 Z" fill="black" /> </mask> <polygon points="-10,110 110,110 110,-10" fill="orange" /> <!-- with this mask applied, we "punch" a heart shape hole into the circle --> <circle cx="50" cy="50" r="50" mask="url(#myMask)" /> </svg>
height
This attribute defines the height of the masking area. Value type: <length> ; Default value: 120%
; Animatable: yes
maskContentUnits
This attribute defines the coordinate system for the contents of the <mask>
. Value type: userSpaceOnUse
|objectBoundingBox
; Default value: userSpaceOnUse
; Animatable: yes
maskUnits
This attribute defines the coordinate system for attributes x
, y
, width
and height
on the <mask>
. Value type: userSpaceOnUse
|objectBoundingBox
; Default value: objectBoundingBox
; Animatable: yes
x
This attribute defines the x-axis coordinate of the top-left corner of the masking area. Value type: <coordinate> ; Default value: -10%
; Animatable: yes
y
This attribute defines the y-axis coordinate of the top-left corner of the masking area. Value type: <coordinate> ; Default value: -10%
; Animatable: yes
width
This attribute defines the width of the masking area. Value type: <length> ; Default value: 120%
; Animatable: yes
Most notably: id
class
, style
Most notably: requiredExtensions
, systemLanguage
Most notably: clip-path
, clip-rule
, color
, display
, fill
, fill-opacity
, fill-rule
, filter
, mask
, opacity
, shape-rendering
, stroke
, stroke-dasharray
, stroke-dashoffset
, stroke-linecap
, stroke-linejoin
, stroke-miterlimit
, stroke-opacity
, stroke-width
, transform
, vector-effect
, visibility
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>
|
Specification |
---|
CSS Masking Module Level 1 # MaskElement |
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet | |
mask |
Yes | 12 | Yes | Yes | Yes | Yes | Yes | Yes | Yes | Yes | Yes | Yes |
height |
Yes | 12 | Yes | Yes | Yes | Yes | Yes | Yes | Yes | Yes | Yes | Yes |
maskContentUnits |
No | No | No | No | No | No | No | No | No | No | No | No |
maskUnits |
No | No | No | No | No | No | No | No | No | No | No | No |
width |
Yes | 12 | Yes | Yes | Yes | Yes | Yes | Yes | Yes | Yes | Yes | Yes |
x |
Yes | 12 | Yes | Yes | Yes | Yes | Yes | Yes | Yes | Yes | Yes | Yes |
y |
Yes | 12 | Yes | Yes | Yes | Yes | Yes | Yes | Yes | Yes | Yes | Yes |
<clipPath>
mask
, mask-image
, mask-mode
, mask-repeat
, mask-position
, mask-clip
, mask-origin
, mask-composite
, mask-size
, pointer-events
© 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/SVG/Element/mask