# mask
The mask
element defines an alpha mask for compositing the current object into the background. A mask is used/referenced using the mask property.
Usually, this element is created with:
const mask = parentElement.add('mask')
It's possible to create it as a disconnected element with gySVG('mask')
and attach it to the SVG document with .attachTo()
.
More info: mdn (opens new window) | w3c (opens new window)
# .height()
mask.height( height )
Set this attribute defines the height
of the masking area.
argument:
{number} height
Theheight
valuereturns:
{gySVGObject}
The original object
const height = element.height();
Get the height
current value.
- returns:
{number}
# .maskContentUnits()
mask.maskContentUnits( contentUnit )
Set this attribute defines the coordinate system for the contents of the mask
.
argument:
{string} contentUnit
Must beuserSpaceOnUse
|objectBoundingBox
returns:
{gySVGObject}
The original object
const maskContentUnits = element.maskContentUnits();
Get the maskContentUnits
current value.
- returns:
{string}
# .maskUnits()
mask.maskUnits( unit )
Set this attribute defines defines the coordinate system for attributes x, y, width and height on the mask
.
argument:
{string} unit
Must beuserSpaceOnUse
|objectBoundingBox
returns:
{gySVGObject}
The original object
const maskUnits = element.maskUnits();
Get the maskUnits
current value.
- returns:
{string}
# .x()
mask.x( x )
Set this attribute defines the x-axis coordinate of the top-left corner of the masking area.
argument:
{number} x
Thex
valuereturns:
{gySVGObject}
The original object
const x = element.x();
Get the x
current value.
- returns:
{number}
# .y()
mask.y( y )
Set this attribute defines the y-axis coordinate of the top-left corner of the masking area.
argument:
{number} y
They
valuereturns:
{gySVGObject}
The original object
const y = element.y();
Get the y
current value.
- returns:
{number}
# .width()
mask.width( width )
Set this attribute defines the width
of the masking area.
argument:
{number} width
Thewidth
valuereturns:
{gySVGObject}
The original object
const width = element.width();
Get the width
current value.
returns:
{number}
Parent elements: a | defs | g | marker | mask | pattern | svg | symbol.
Child elements: a | animate | animateMotion | animateTransform | circle | clipPath | defs | desc | discard | ellipse | filter | foreignObject | g | image | line | linearGradient | marker | mask | metadata | mpath | path | pattern | polygon | polyline | radialGradient | rect | set | stop | style | svg | switch | symbol | text | title | use | view.