Graphery SVG

# 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 gySVG('rect') and attach it to the SVG document with .attachTo().

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

# .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: {gySVGObject} 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: {gySVGObject} 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: {gySVGObject} 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: {gySVGObject} 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: {gySVGObject} 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: {gySVGObject} 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: {gySVGObject} The original object

const pathLength = element.pathLength();

Get the pathLength current value.

← set →