rect

The rect element is a basic SVG shape that draws rectangles, defined by their position, width, and height. The rectangles may have their corners rounded.

Usually, this element is created with:

const rect = parentElement.add('rect')

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

More info: mdn | w3c

.x()

rect.x( value )

Set the x coordinate of the rect.

• argument: {number|string} value The x (length or percentage) coordinate of the rect

• returns: {gSVGObject} The original object

const x = element.x();

Get the x current value.

• returns: {number|string}

.y()

rect.y( value )

Set the y coordinate of the rect.

• argument: {number|string} value The y (length or percentage) coordinate of the rect

• returns: {gSVGObject} The original object

const y = element.y();

Get the y current value.

• returns: {number|string}

.width()

rect.width( value )

Set the width of the rect.

• argument: {number|string} value The width (length or percentage) of the rect

• returns: {gSVGObject} The original object

const width = element.width();

Get the width current value.

• returns: {number|string}

.height()

rect.height( value )

Set the height of the rect.

• argument: {number|string} value The height (length or percentage) of the rect

• returns: {gSVGObject} The original object

const height = element.height();

Get the height current value.

• returns: {number|string}

.rx()

rect.rx( value )

Set the horizontal corner radius of the rect. Defaults to ry if it is specified.

• argument: {number|string} value - The horizontal corner radius (length or percentage) of the rect

• returns: {gSVGObject} The original object

const rx = element.rx();

Get the rx current value.

• returns: {number|string}

.ry()

rect.ry( value )

Set the vertical corner radius of the rect. Defaults to rx if it is specified.

• argument: {number|string} value - The vertical corner radius (length or percentage) of the rect

• returns: {gSVGObject} The original object

const ry = element.ry();

Get the ry current value.

• returns: {number|string}

.pathLength()

rect.pathLength( value )

Set the total length of the rectangle's perimeter, in user units.

• argument: {number} value The total length of the rectangle's perimeter

• returns: {gSVGObject} The original object

const pathLength = element.pathLength();

Get the pathLength 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.