Graphery SVG

# radialGradient

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

Usually, this element is created with:

const radialGradient = parentElement.add('radialGradient')

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

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

# .cx()

radialGradient.cx ( x )

Set this attribute defines the x coordinate of the end circle of the radial gradient.

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

  • returns: {gySVGObject} The original object

const cx = element.cx();

Get the cx current value.

  • returns: {number|string}

# .cy()

radialGradient.cy( y )

Set this attribute defines the y coordinate of the end circle of the radial gradient.

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

  • returns: {gySVGObject} The original object

const cy = element.cy();

Get the cy current value.

  • returns: {number}

# .fr()

radialGradient.fr( radius )

Set this attribute defines the radius of the start circle of the radial gradient. The gradient will be drawn such that the 0% stop is mapped to the perimeter of the start circle.

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

  • returns: {gySVGObject} The original object

const fr = element.fr();

Get the fr current value.

  • returns: {number|string}

# .fx()

radialGradient.fx( x )

Set this attribute defines the x coordinate of the start circle of the radial gradient.

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

  • returns: {gySVGObject} The original object

const fx = element.fx();

Get the fx current value.

  • returns: {number|string}

# .fy()

radialGradient.fy( y )

Set this attribute defines the y coordinate of the start circle of the radial gradient.

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

  • returns: {gySVGObject} The original object

const fy = element.fy();

Get the fy current value.

  • returns: {number}

# .gradientUnits()

radialGradient.gradientUnits( unit )

Set this attribute defines the coordinate system for attributes cx, cy, r, fx, fy, and fr.

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

  • returns: {gySVGObject} The original object

const gradientUnits = element.gradientUnits();

Get the gradientUnits current value.

  • returns: {string}

# .gradientTransform()

radialGradient.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()

radialGradient.href( url )

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

  • argument: {string} url A reference to a different linearGradient or radialGradient element

  • returns: {gySVGObject} The original object

const href = element.href();

Get the href current value.

  • returns: {string}

# .r()

radialGradient.r( radius )

Set this attribute defines the radius of the end circle of the radial gradient. The gradient will be drawn such that the 100% stop is mapped to the perimeter of the end circle.

  • argument: {number|string} radius The radius (length or percentage) of the end circle for the radial gradient

  • returns: {gySVGObject} The original object

const r = element.r();

Get the r current value.

  • returns: {number|string}

# .spreadMethod()

radialGradient.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.

← rect →