Gradient

gradient()

returns SVG.Gradient

There are linear and radial gradients. The linear gradient can be created like this:

var gradient = draw.gradient('linear', function(stop) {
  stop.at(0, '#333')
  stop.at(1, '#fff')
})

at()

returns itself

The offset and color parameters are required for stops, opacity is optional. The offset is a float between 0 and 1, or a percentage value (e.g. 33%).

stop.at(0, '#333')

or

stop.at({ offset: 0, color: '#333', opacity: 1 })

fill() as setter

returns itself

Finally, to use the gradient on an element:

rect.attr({ fill: gradient })

Or:

rect.fill(gradient)

By passing the gradient instance as the fill on any element, the fill() method will be called:

MDN has a great example page on how SVG Gradients work.

fill() as getter

returns value

gradient.fill() //-> returns 'url(#SvgjsGradient1234)'

from()

returns itself
animate yes

To define the direction you can set from x, y and to x, y:

gradient.from(0, 0).to(0, 1)

The from and to values are also expressed in percent.

get()

returns SVG.Stop

The get() method makes it even easier to get a stop from an existing gradient:

var gradient = draw.gradient('radial', function(stop) {
  stop.at({ offset: 0, color: '#000', opacity: 1 })   // -> first
  stop.at({ offset: 0.5, color: '#f03', opacity: 1 }) // -> second
  stop.at({ offset: 1, color: '#066', opacity: 1 })   // -> third
})

var s1 = gradient.get(0) // -> returns "first" stop

radius()

returns itself
animate yes

Radial gradients have a radius() method to define the outermost radius to where the inner color should develop:

var gradient = draw.gradient('radial', function(stop) {
  stop.at(0, '#333')
  stop.at(1, '#fff')
})

gradient.from(0.5, 0.5).to(0.5, 0.5).radius(0.5)

to()

returns itself
animate yes

To define the direction you can set from x, y and to x, y:

gradient.from(0, 0).to(0, 1)

The from and to values are also expressed in percent.

update()

returns itself

A gradient can also be updated afterwards:

gradient.update(function(stop) {
  stop.at(0.1, '#333', 0.2)
  stop.at(0.9, '#f03', 1)
})

And even a single stop can be updated:

var s1, s2, s3

draw.gradient('radial', function(stop) {
  s1 = stop.at(0, '#000')
  s2 = stop.at(0.5, '#f03')
  s3 = stop.at(1, '#066')
})

s1.update(0.1, '#0f0', 1)
Fork me on GitHub