# 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 create with:

const rect = parentElement.add('rect')

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

More info: mdn (opens new window) | w3c (opens new window)

# .x()

rect.x( _ )

Set the x coordinate of the rect.

  • argument: {} _

  • returns: {gySVGObject} The original object

const x = element.x();

Get the x current value.

  • returns: {}

# .y()

rect.y( _ )

Set the y coordinate of the rect.

  • argument: {} _

  • returns: {gySVGObject} The original object

const y = element.y();

Get the y current value.

  • returns: {}

# .width()

rect.width( _ )

Set the width of the rect.

  • argument: {} _

  • returns: {gySVGObject} The original object

const width = element.width();

Get the width current value.

  • returns: {}

# .height()

rect.height( _ )

Set the height of the rect.

  • argument: {} _

  • returns: {gySVGObject} The original object

const height = element.height();

Get the height current value.

  • returns: {}

# .rx()

rect.rx( _ )

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

  • argument: {} _

  • returns: {gySVGObject} The original object

const rx = element.rx();

Get the rx current value.

  • returns: {}

# .ry()

rect.ry( _ )

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

  • argument: {} _

  • returns: {gySVGObject} The original object

const ry = element.ry();

Get the ry current value.

  • returns: {}

# .pathLength()

rect.pathLength( _ )

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

  • argument: {} _

  • returns: {gySVGObject} The original object

const pathLength = element.pathLength();

Get the pathLength current value.