# 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 gySVG('pattern')
and attach it to the SVG document with .attachTo()
.
More info: mdn (opens new window) | w3c (opens new window)
# .height()
pattern.height( height )
Set this attribute determines the height
of the pattern tile.
argument:
{number} height
Theheight
valuereturns:
{gySVGObject}
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 patternreturns:
{gySVGObject}
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 beuserSpaceOnUse
|objectBoundingBox
returns:
{gySVGObject}
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 listreturns:
{gySVGObject}
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 beuserSpaceOnUse
|objectBoundingBox
returns:
{gySVGObject}
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:
{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 valueargument:
{number} minY
y-axis min valueargument:
{number} width
width valueargument:
{number} height
height valuereturns:
{gySVGObject}
The original object
element.viewBox( viewBoxArray )
Set the viewBox
attribute with an array with four values.
argument:
{Array} viewBoxArray
Array with four numeric valuesreturns:
{gySVGObject}
The original object
element.viewBox( viewBoxString )
Set the viewBox
attribute with a string.
argument:
{string} viewBoxString
Four numeric values separated by coma or spacereturns:
{gySVGObject}
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
Thewidth
valuereturns:
{gySVGObject}
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
Thex
valuereturns:
{gySVGObject}
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
They
valuereturns:
{gySVGObject}
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 | discard | 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.