108 lines
2.5 KiB
JavaScript
108 lines
2.5 KiB
JavaScript
SVG.Gradient = SVG.invent({
|
|
// Initialize node
|
|
create: function(type) {
|
|
this.constructor.call(this, SVG.create(type + 'Gradient'))
|
|
|
|
// store type
|
|
this.type = type
|
|
}
|
|
|
|
// Inherit from
|
|
, inherit: SVG.Container
|
|
|
|
// Add class methods
|
|
, extend: {
|
|
// Add a color stop
|
|
at: function(offset, color, opacity) {
|
|
return this.put(new SVG.Stop).update(offset, color, opacity)
|
|
}
|
|
// Update gradient
|
|
, update: function(block) {
|
|
// remove all stops
|
|
this.clear()
|
|
|
|
// invoke passed block
|
|
if (typeof block == 'function')
|
|
block.call(this, this)
|
|
|
|
return this
|
|
}
|
|
// Return the fill id
|
|
, fill: function() {
|
|
return 'url(#' + this.id() + ')'
|
|
}
|
|
// Alias string convertion to fill
|
|
, toString: function() {
|
|
return this.fill()
|
|
}
|
|
// custom attr to handle transform
|
|
, attr: function(a, b, c) {
|
|
if(a == 'transform') a = 'gradientTransform'
|
|
return SVG.Container.prototype.attr.call(this, a, b, c)
|
|
}
|
|
}
|
|
|
|
// Add parent method
|
|
, construct: {
|
|
// Create gradient element in defs
|
|
gradient: function(type, block) {
|
|
return this.defs().gradient(type, block)
|
|
}
|
|
}
|
|
})
|
|
|
|
// Add animatable methods to both gradient and fx module
|
|
SVG.extend(SVG.Gradient, SVG.FX, {
|
|
// From position
|
|
from: function(x, y) {
|
|
return (this._target || this).type == 'radial' ?
|
|
this.attr({ fx: new SVG.Number(x), fy: new SVG.Number(y) }) :
|
|
this.attr({ x1: new SVG.Number(x), y1: new SVG.Number(y) })
|
|
}
|
|
// To position
|
|
, to: function(x, y) {
|
|
return (this._target || this).type == 'radial' ?
|
|
this.attr({ cx: new SVG.Number(x), cy: new SVG.Number(y) }) :
|
|
this.attr({ x2: new SVG.Number(x), y2: new SVG.Number(y) })
|
|
}
|
|
})
|
|
|
|
// Base gradient generation
|
|
SVG.extend(SVG.Defs, {
|
|
// define gradient
|
|
gradient: function(type, block) {
|
|
return this.put(new SVG.Gradient(type)).update(block)
|
|
}
|
|
|
|
})
|
|
|
|
SVG.Stop = SVG.invent({
|
|
// Initialize node
|
|
create: 'stop'
|
|
|
|
// Inherit from
|
|
, inherit: SVG.Element
|
|
|
|
// Add class methods
|
|
, extend: {
|
|
// add color stops
|
|
update: function(o) {
|
|
if (typeof o == 'number' || o instanceof SVG.Number) {
|
|
o = {
|
|
offset: arguments[0]
|
|
, color: arguments[1]
|
|
, opacity: arguments[2]
|
|
}
|
|
}
|
|
|
|
// set attributes
|
|
if (o.opacity != null) this.attr('stop-opacity', o.opacity)
|
|
if (o.color != null) this.attr('stop-color', o.color)
|
|
if (o.offset != null) this.attr('offset', new SVG.Number(o.offset))
|
|
|
|
return this
|
|
}
|
|
}
|
|
|
|
})
|