use

The use element takes nodes from within the SVG document, and duplicates them somewhere else. The effect is the same as if the nodes were deeply cloned, and pasted where the use element is.

Usually, this element is created with:

const use = parentElement.add('use').href('#reference')

It's possible to create it as a disconnected element with gSVG('use') and attach it to the SVG document with .attachTo().

More info: mdn | w3c

.href()

use.href( ref )

Set the URL to an element/fragment that needs to be duplicated. Usually it is a reference to an id value as #idetificator.

• argument: {string} ref Referente the element to be duplicated

• returns: {gSVGObject} The original object

const href = element.href();

Get the href current value.

• returns: {string} Reference to the duplicated element

.x()

use.x( x )

Set the x coordinate of the use element.

• argument: {number} x The x value

• returns: {gSVGObject} The original object

const x = element.x();

Get the x current value.

• returns: {number}

.y()

use.y( y )

Set the y coordinate of the use element.

• argument: {number} y The y value

• returns: {gSVGObject} The original object

const y = element.y();

Get the y current value.

• returns: {number}

.width()

use.width( width )

Set the width of the use element.

• argument: {number} width The width value

• returns: {gSVGObject} The original object

const width = element.width();

Get the width current value.

• returns: {number}

.height()

use.height( height )

Set the height of the use element.

• argument: {number} height The height value

• returns: {gSVGObject} The original object

const height = element.height();

Get the height current value.

• returns: {number}

• Parent elements: a | clipPath | defs | g | marker | mask | pattern | svg | switch | symbol.

• Child elements: animate | animateMotion | animateTransform | desc | metadata | mpath | set | title.