pattern

The pattern element defines a graphics object which can be redrawn at repeated x- and y-coordinate intervals ("tiled") to cover an area.

The pattern is referenced by the fill and/or stroke attributes on other graphics elements to fill or stroke those elements with the referenced pattern.

Usually, this element is created with:

const pattern = parentElement.add('pattern')

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

More info: mdn | w3c

.height()

pattern.height( height )

Set this attribute determines the height of the pattern tile.

• argument: {number} height The height value

• returns: {gSVGObject} The original object

const height = element.height();

Get the height current value.

• returns: {number}

.href()

pattern.href( URLPattern )

Set the href attribute. It defines a URL referencing to a template pattern that provides default values for this pattern.

• argument: {string} URLPattern URL to a pattern

• returns: {gSVGObject} The original object

const href = pattern.href();

Get the href current value.

• returns: {string} Current URL to a pattern

.patternContentUnits()

pattern.patternContentUnits( contentUnit )

Set this attribute defines the coordinate system for the contents of the pattern.

• argument: {string} contentUnit Must be userSpaceOnUse | objectBoundingBox

• returns: {gSVGObject} The original object

const patternContentUnits = element.patternContentUnits();

Get the patternContentUnits current value.

• returns: {string}

.patternTransform()

pattern.patternTransform( transform )

Set this attribute contains the definition of an optional additional transformation from the pattern coordinate system onto the target coordinate system.

• argument: {string} transform The transform functions list

• returns: {gSVGObject} The original object

const patternTransform = element.patternTransform();

Get the patternTransform current value.

• returns: {string}

.patternUnits()

pattern.patternUnits( unit )

Set this attribute defines the coordinate system for attributes x, y, width, and height.

• argument: {string} unit Must be userSpaceOnUse | objectBoundingBox

• returns: {gSVGObject} The original object

const patternUnits = element.patternUnits();

Get the patternUnits current value.

• returns: {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: {gSVGObject} 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: {gSVGObject} 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: {gSVGObject} 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: {gSVGObject} The original object

const viewBox = element.viewBox();

Get the viewBox current value.

• returns: {string} four values separate by coma

.width()

pattern.width( width )

Set this attribute determines the width of the pattern tile.

• argument: {number} width The width value

• returns: {gSVGObject} The original object

const width = element.width();

Get the width current value.

• returns: {number}

.x()

pattern.x( x )

Set this attribute determines the x coordinate shift of the pattern tile.

• argument: {number} x The x value

• returns: {gSVGObject} The original object

const x = element.x();

Get the x current value.

• returns: {number}

.y()

pattern.y( y )

Set this attribute determines the y coordinate shift of the pattern tile.

• argument: {number} y The y value

• returns: {gSVGObject} The original object

const y = element.y();

Get the y current value.

• returns: {number}

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

• Child elements: a | animate | animateMotion | animateTransform | circle | clipPath | defs | desc | ellipse | filter | foreignObject | g | image | line | linearGradient | marker | mask | metadata | mpath | path | pattern | polygon | polyline | radialGradient | rect | set | stop | style | svg | switch | symbol | text | title | use | view.