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 gSVG('mask') and attach it to the SVG document with .attachTo().

More info: mdn | w3c

.height()

mask.height( height )

Set this attribute defines the height of the masking area.

• argument: {number} height The height value

• returns: {gSVGObject} 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 be userSpaceOnUse | objectBoundingBox

• returns: {gSVGObject} 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 be userSpaceOnUse | objectBoundingBox

• returns: {gSVGObject} 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 The x value

• returns: {gSVGObject} 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 The y value

• returns: {gSVGObject} 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 The width value

• returns: {gSVGObject} 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 | 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.