Get gradient color at

by Wout

HTML

<script src="https://cdn.rawgit.com/svgdotjs/svg.js/master/dist/svg.min.js"></script>
<div id="drawing"></div>

JavaScript

SVG.extend(SVG.Gradient, {
  // Get color at given offset
  colorAt: function(offset) {
    var first, last

    // find stops
    this.each(function() {
      if (this.attr('offset') <= offset) first = this
    })
		
    last = first.next()
    
    // if first is the last stop
    if ( ! last ) return first.attr('stop-color')
     
    var blend, relative, fo, lo
		
    // create morph
    blend = new SVG.Color(first.attr('stop-color'))
    blend.morph(last.attr('stop-color'))
    
    // calculate relative offset
    fo = first.attr('offset')
    lo = last.attr('offset')
    relative = (offset - fo) / (lo - fo)

    return blend.at( relative )
  }

})

var draw = SVG('drawing')

var gradient = draw.gradient('linear', function(stop) {
  stop.at(0, '#799abc')
  stop.at(0.5, '#ccc')
  stop.at(1, '#e88081')
})

var rect = draw.rect(100, 100).move(10, 10).fill(gradient)

draw.circle(10).center(10, 120).fill(gradient.colorAt(0))
draw.circle(10).center(35, 120).fill(gradient.colorAt(0.25))
draw.circle(10).center(60, 120).fill(gradient.colorAt(0.5))
draw.circle(10).center(85, 120).fill(gradient.colorAt(0.75))
draw.circle(10).center(110, 120).fill(gradient.colorAt(1))