Graphery SVG

# linearGradient

The linearGradient element lets authors define linear gradients that can be applied to fill or stroke of graphical elements.

Usually, this element is created with:

const linearGradient = parentElement.add('linearGradient')

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

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

# .gradientUnits()

linearGradient.gradientUnits( unit )

Set this attribute defines the coordinate system for attributes x1, x2, y1, y2.

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

  • returns: {gySVGObject} The original object

const gradientUnits = element.gradientUnits();

Get the gradientUnits current value.

  • returns: {string}

# .gradientTransform()

linearGradient.gradientTransform( transformFunction )

Set this attribute provides additional transformation to the gradient coordinate system.

  • argument: {string} transformFunction The transform function that affects to the element

  • returns: {gySVGObject} The original object

const gradientTransform = element.gradientTransform();

Get the gradientTransform current value.

  • returns: {string}

# .href()

linearGradient.href( referenceToLinearGradient )

Set the href attribute. It defines a reference to another linearGradient element that will be used as a template.

  • argument: {string} referenceToLinearGradient URL to another LinearGradient

  • returns: {gySVGObject} The original object

const href = linearGradient.href();

Get the href current value.

  • returns: {string} URL to another LinearGradient

# .spreadMethod()

linearGradient.spreadMethod( method )

Set this attribute indicates how the gradient behaves if it starts or ends inside the bounds of the shape containing the gradient.

  • argument: {string} method Must be pad | reflect | repeat

  • returns: {gySVGObject} The original object

const spreadMethod = element.spreadMethod();

Get the spreadMethod current value.

  • returns: {string}

# .x1()

linearGradient.x1( x1 )

Set this attribute defines the x coordinate of the starting point of the vector gradient along which the linear gradient is drawn.

  • argument: {number|string} x1 The x1 value (length or percentage)

  • returns: {gySVGObject} The original object

const x1 = element.x1();

Get the x1 current value.

  • returns: {number|string}

# .x2()

linearGradient.x2( x2 )

Set this attribute defines the x coordinate of the ending point of the vector gradient along which the linear gradient is drawn.

  • argument: {number|string} x2 The x2 value (length or percentage)

  • returns: {gySVGObject} The original object

const x2 = element.x2();

Get the x2 current value.

  • returns: {number|string}

# .y1()

linearGradient.y1( y1 )

Set this attribute defines the y coordinate of the starting point of the vector gradient along which the linear gradient is drawn.

  • argument: {number|string} y1 The y1 value (length or percentage)

  • returns: {gySVGObject} The original object

const y1 = element.y1();

Get the y1 current value.

  • returns: {number|string}

# .y2()

linearGradient.y2( y2 )

Set this attribute defines the y coordinate of the ending point of the vector gradient along which the linear gradient is drawn.

  • argument: {number|string} y2 The y2 value (length or percentage) `

  • returns: {gySVGObject} The original object

const y2 = element.y2();

Get the y2 current value.

← marker →