Class: msk

msk

Harness the power of SVG masking with msk

new msk(options){msk}

constructs/svg/msk.js, line 31
Initializes a new msk instance.
Name Type Description
options Object Options used to customize the msk
Name Type Description
parent * optional Preferably an SVGElement. When an HTMLElement is provided, a new SVGElement is appended to it, which becomes the parent for the msk.
id String optional The id of the instance. Auto-generated when not provided
masks Array optional 1x2 Array of object descriptors used to create masking areas in the mask.
targets Array optional 1x2 Array of object descriptors used to create targets for the mask.
attr Object optional Attributes to apply to the msk's mask element.
css Object optional CSS Properties to apply to the msk's mask element.
Returns:
Type Description
msk A new msk instance.

Requires

Members

readonlydefsSVGElement

The SVGDefsElement where the mask is stored

readonlyelSVGElement

The mask element associated with this instance

readonlyidString

The id of this instance's mask element

readonlymasksNodeList

A nodelist of the mask's child elements

readonlyparentSVGElement

The parent of the defs element

readonlyurlString

The url function string used to assign the mask to an element

Methods

staticmsk.getElInstance(el){msk}

constructs/svg/msk.js, line 319
returns the msk instance associated with the provided element's id attribute
Name Type Description
el Element The element with the lookup id
Returns:
Type Description
msk The associate msk, if it exists

staticmsk.getInstance(id){msk}

constructs/svg/msk.js, line 307
returns the msk instance associated with the id
Name Type Description
id String The lookup id
Returns:
Type Description
msk The associate msk, if it exists

add(target, index){*}

constructs/svg/msk.js, line 166
Invokes mkr.add to add existing elements to the mask
Name Type Description
target * A single element, array of elements, or a css selector string.
index int optional Insertion index of the target. Defaults to the number of mask children. When negative, becomes the sum of itself and the length of masks
Returns:
Type Description
* The added element, or array of elements

assign(targets, options, add, index){Element}

constructs/svg/msk.js, line 259
Assigns this instance's mask url to the targeted elements.
Name Type Default Description
targets * An array or selector string
options Object optional A set of attributes and css properties applied to the target elements
add Boolean false optional Optionally add the targets to the parent.
index int optional The insertion index, defaults to the number of children on the parent. When negative, becomes the sum of itself and the number of children
Returns:
Type Description
Element The target elements

construct(type, options, index){Element}

constructs/svg/msk.js, line 137
Invokes mkr.construct to produce a new construct and add it to the mask
Name Type Description
type String The type of construct to produce.
options Object optional A set of attributes and css properties used to produce the element
index int optional The insertion index, defaults to the number of mask children. When negative, becomes the sum of itself and the length of masks
Returns:
Type Description
Element The new element

constructTarget(type, options, index){*}

constructs/svg/msk.js, line 224
Invokes mkr.construct to produce a new construct, add it to the parent and set its css mask set to this instances's url property.
Name Type Description
type String The type of construct to produce.
options Object optional A set of attributes and css properties to assign to the construct
index int optional The insertion index, defaults to the number of children on the root svg. When negative, becomes the sum of itself and the number of children
Returns:
Type Description
* The new construct

create(type, options, index){Element}

constructs/svg/msk.js, line 152
Invokes mkr.create to produce a new element and add it to the mask
Name Type Description
type String The type of element to produce. Checkout MDN Mask for permitted content
options Object optional A set of attributes and css properties used to produce the element
index int optional The insertion index, defaults to the number of mask children. When negative, becomes the sum of itself and the length of masks
Returns:
Type Description
Element The new element

createTarget(type, options, index){Element}

constructs/svg/msk.js, line 242
Invokes mkr.create to produce a new element, add to the parent and set its css mask set to this instances's url property.
Name Type Description
type * Type of SVGElement to create.
options Object optional A set of attributes and css properties applied to the target element
index int optional The insertion index, defaults to the number of children on the parent. When negative, becomes the sum of itself and the number of children
Returns:
Type Description
Element The target element

get(index){SVGElement}

constructs/svg/msk.js, line 193
Returns the element at the specified index in the mask
Name Type Default Description
index int -1 optional The index of the target element. When negative, becomes the sum of itself and the length of masks
Returns:
Type Description
SVGElement The element at the specified index

remove(index){SVGElement}

constructs/svg/msk.js, line 179
Removes the element at the specified index from the mask
Name Type Default Description
index int -1 optional The index of the target element. When negative, becomes the sum of itself and the length of masks
Returns:
Type Description
SVGElement The element that was removed

set(options, index){SVGElement}

constructs/svg/msk.js, line 207
Updates the element at the specified index in the mask
Name Type Default Description
options Object A set of attributes and css properties to set on the element
index int -1 optional The index of the target element. When negative, becomes the sum of itself and the length of masks
Returns:
Type Description
SVGElement The updated element

unassign(targets, remove){Element}

constructs/svg/msk.js, line 285
Removes the mask assignment from the target elements.
Name Type Default Description
targets * An array or selector string
remove Boolean false optional Optionally remove the targets from the parent.
Returns:
Type Description
Element The target elements