Class: clp

clp

Harness the power of SVG clippaths with clp

new clp(options){clp}

constructs/svg/clp.js, line 31
Initializes a new clp instance.
Name Type Description
options Object Options used to customize the clp
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 clp.
id String optional The id of the instance. Auto-generated when not provided
clips Array optional 1x2 Array of object descriptors used to create clipping areas in the clippath.
targets Array optional 1x2 Array of object descriptors used to create targets for the clippath.
attr Object optional Attributes to apply to the clp's clippath element.
css Object optional CSS Properties to apply to the clp's clippath element.
Returns:
Type Description
clp A new clp instance.

Requires

Members

readonlyclipsNodeList

A nodelist of the clipath's child elements

readonlydefsSVGElement

The SVGDefsElement where the clippath is stored

readonlyelSVGElement

The clippath element associated with this instance

readonlyidString

The id of this instance's clippath element

readonlyparentSVGElement

The parent of the defs element

readonlyurlString

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

Methods

staticclp.getElInstance(el){clp}

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

staticclp.getInstance(id){clp}

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

add(target, index){*}

constructs/svg/clp.js, line 165
Invokes mkr.add to add existing elements to the clippath
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 clippath children.
Returns:
Type Description
* The added element, or array of elements

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

constructs/svg/clp.js, line 258
Assigns this instance's clippath 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/clp.js, line 136
Invokes mkr.construct to produce a new construct and add it to the clippath
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 clippath children. When negative, becomes the sum of itself and the length of clips
Returns:
Type Description
Element The new element

constructTarget(type, options, index){*}

constructs/svg/clp.js, line 223
Invokes mkr.construct to produce a new construct, add it to the parent and set its css clippath 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 parent. 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/clp.js, line 151
Invokes mkr.create to produce a new element and add it to the clippath
Name Type Description
type String The type of element to produce. Checkout MDN Clippath 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 clippath children. When negative, becomes the sum of itself and the length of clips
Returns:
Type Description
Element The new element

createTarget(type, options, index){Element}

constructs/svg/clp.js, line 241
Invokes mkr.create to produce new element, add it to the root svg and set its css clippath set to this instances's url property.
Name Type Description
type * Type of element to produce.
options Object optional A set of attributes and css properties to assign to the 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/clp.js, line 192
Returns the element at the specified index in the clippath
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 clips
Returns:
Type Description
SVGElement The element at the specified index

remove(index){SVGElement}

constructs/svg/clp.js, line 178
Removes the element at the specified index from the clippath
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 clips
Returns:
Type Description
SVGElement The element that was removed

set(options, index){SVGElement}

constructs/svg/clp.js, line 206
Updates the element at the specified index in the clippath
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 clips
Returns:
Type Description
SVGElement The updated element

unassign(targets, remove){Element}

constructs/svg/clp.js, line 284
Removes the clippath 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