JSignage:RadialGradient

Description

Use $.radialGradient to create a radial color gradient that can be referenced later on in the fill or stroke attribute of geometric shapes or in the color for text, frame decoration or layer background.

See Radial gradients in the SVG specification for reference.

A radial gradient maps colors and opacity values at specific offsets along the radius of a circle.

• Offset 0 maps to the center of the circle, specified by cx and cy.
• Offset 1 maps to the outermost ring, specified by r (radius of the circle).

To use the gradient specify a reference to it (obtain by .ref() as the attribute value for 'fill', 'stroke', 'backColor' or 'frameColor'.

attributes

• cx

  x coordinate of the center of the gradient circle. Default: 0.

• cy

  y coordinate of the center of the gradient circle. Default: 0.

• r

  radius of the gradient circle. Default: 0.

• stops

  array of gradient stops. Each stop is an object with the following properties:

  • offset

    offset of the stop (from 0 to 1 ). Default: 0.

  • color

    stop color. Default: black.

  • opacity

    stop opacity. Default: 1.

Note:

• Gradients must be added to the document in ordered to be referenced. It does not matter where the gradient is added.
• If no stop if specified, the gradient will have the same effect as the color 'none'.
• If only one stop if specified, the gradient will produce a solid color.
• Each stop offset must greater than or equal to the previous stop offset.
• An offset can be repeated to produce a discontinuity in the gradient, i.e. the first stop will terminate a linear interpolation and the second stop will start a new one, allowing for an immediate jump in color or opacity.
• The color and opacity of each stop can be animated using respectively animateColor and animateOpacity by specifying an index into the stop array as the first argument to these functions.

Examples

Round rectangle with gradient fill

Radial gradient are often used for lighting effects

var grad = $.radialGradient({
   cx: 640, cy : 40, r: 360, 
   stops: [
     { offset: 0, color: '#ffffff' },
     { offset: 0.25, color: '#ffffff' },
     { offset: 1, color: '#ff0000' },
     { offset: 1, color: '#c00000' }
   ]
}).addTo('svg');

$.rect({ 
  x: 460, y: 180, width: 360, height: 360, rx: 75, 
  fill: grad.ref() 
}).addTo('svg');