Graphery SVG

# svg

The svg element is a container that defines a new coordinate system and viewport. It is used as the outermost element of SVG documents, but it can also be used to embed an SVG fragment inside another SVG.

Usually, this element is created with:

const svg = gySVG()

It's possible to create it as child element with parentElement.add('svg').

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

# .height()

svg.height( height )

Set the displayed height of the rectangular viewport. (Not the height of its coordinate system.)

  • argument: {number|string} height The height dimension.

  • returns: {gySVGObject} The original object

const height = element.height();

Get the height current value.

  • returns: {number|string}

# .preserveAspectRatio()

element.preserveAspectRatio( align )

Set the preserveAspectRatio attribute. It indicates how an element with a viewBox providing a given aspect ratio must fit into a viewport with a different aspect ratio.

  • argument: {string} align Must be 'none' | 'xMinYMin' | 'xMidYMin' | 'xMaxYMin' | 'xMinYMid' | 'xMidYMid' (the default) | 'xMaxYMid' | 'xMinYMax' | 'xMidYMax' | 'xMaxYMax' and can be complemented with 'meet' (the default) | 'slice'

  • returns: {gySVGObject} The original object

const align = element.preserveAspectRatio();

Get the preserveAspectRatio current value.

  • returns: {string} Current align configuration

# .viewBox()

element.viewBox( minX, minY, width, height )

Set the viewBox attribute. It defines the position and dimension, in user space, of an SVG viewport. With four values specify a rectangle in user space which is mapped to the bounds of the viewport established for the SVG element.

  • argument: {number} minX x-axis min value

  • argument: {number} minY y-axis min value

  • argument: {number} width width value

  • argument: {number} height height value

  • returns: {gySVGObject} The original object

element.viewBox( viewBoxArray )

Set the viewBox attribute with an array with four values.

  • argument: {Array} viewBoxArray Array with four numeric values

  • returns: {gySVGObject} The original object

element.viewBox( viewBoxString )

Set the viewBox attribute with a string.

  • argument: {string} viewBoxString Four numeric values separated by coma or space

  • returns: {gySVGObject} The original object

const viewBox = element.viewBox();

Get the viewBox current value.

  • returns: {string} four values separate by coma

# .width()

svg.width( width )

Set the displayed width of the rectangular viewport. (Not the width of its coordinate system.)

  • argument: {number|string} The width dimension

  • returns: {gySVGObject} The original object

const width = element.width();

Get the width current value.

  • returns: {number|string

# .x()

svg.x( x )

Set the displayed x coordinate of the svg container. No effect on outermost svg elements.

  • argument: {number} x The x value

  • returns: {gySVGObject} The original object

const x = element.x();

Get the x current value.

  • returns: {number}

# .y()

svg.y( y )

Set the displayed y coordinate of the svg container. No effect on outermost svg elements.

  • argument: {number} y The y value

  • returns: {gySVGObject} The original object

const y = element.y();

Get the y current value.

← switch →