Added gradient

4 files changed, 120 insertions, 4 deletions

diff --git a/src/clip.js b/src/clip.js
index ddc2588..f4fba45 100644
--- a/src/clip.js
+++ b/src/clip.js
@@ -4,7 +4,7 @@ var clipID = 0;
 
 SVG.Clip = function Clip() {
   this.constructor.call(this, SVG.create('clipPath'));
-  this.id = '_' + (clipID++);
+  this.id = 'svgjs_clip_' + (clipID++);
   this.attr('id', this.id);
 };
 
@@ -19,7 +19,7 @@ SVG.extend(SVG.Element, {
   
   // clip element using another element
   clip: function(b) {
-    var p = this.mother().defs().clipPath();
+    var p = this.mother().defs().clip();
     b(p);
 
     return this.clipTo(p);
@@ -36,7 +36,7 @@ SVG.extend(SVG.Element, {
 SVG.extend(SVG.Defs, {
   
   // define clippath
-  clipPath: function() {
+  clip: function() {
     var e = new SVG.Clip();
     this.add(e);
 
diff --git a/src/container.js b/src/container.js
index 9107fbd..35d80a4 100644
--- a/src/container.js
+++ b/src/container.js
@@ -105,10 +105,15 @@ SVG.Container = {
     return this.place(new SVG.Text(), v);
   },
   
+  gradient: function(t, b) {
+    return this.defs().gradient(t, b);
+  },
+  
   place: function(e, v) {
     if (v != null) {
       e.move(v.x || 0, v.y || 0);
       
+      
       if (v.width != null && v.height != null)
         e.size(v.width, v.height);
       
diff --git a/src/gradient.js b/src/gradient.js
new file mode 100644
index 0000000..0239b15
--- /dev/null
+++ b/src/gradient.js
@@ -0,0 +1,111 @@
+
+// initialize id sequence
+var gradID = 0;
+
+SVG.Gradient = function Gradient(t) {
+  this.constructor.call(this, SVG.create(t + 'Gradient'));
+  this.id = 'svgjs_grad_' + (gradID++);
+  this.type = t;
+  
+  this.attr('id', this.id);
+};
+
+// inherit from SVG.Element
+SVG.Gradient.prototype = new SVG.Element();
+
+// include the container object
+SVG.extend(SVG.Gradient, SVG.Container);
+
+// add gradient-specific functions
+SVG.extend(SVG.Gradient, {
+  
+  // from position
+  from: function(x, y) {
+    return this.type == 'radial' ?
+             this.attr({ fx: x + '%', fy: y + '%' }) :
+             this.attr({ x1: x + '%', y1: y + '%' });
+  },
+  
+  // to position
+  to: function(x, y) {
+    return this.type == 'radial' ?
+             this.attr({ cx: x + '%', cy: y + '%' }) :
+             this.attr({ x2: x + '%', y2: y + '%' });
+  },
+  
+  // radius for radial gradient
+  radius: function(r) {
+    return this.type == 'radial' ?
+             this.attr({ r: r + '%' }) :
+             this;
+  },
+  
+  // add color stops
+  at: function(o) {
+    var m = new SVG.Stop(o);
+    this.add(m);
+    
+    return m;
+  },
+  
+  // update gradient
+  update: function(b) {
+    while (this.node.hasChildNodes())
+      this.node.removeChild(this.node.lastChild);
+    
+    b(this);
+      
+    return this;
+  },
+  
+  // return the fill id
+  fill: function() {
+    return 'url(#' + this.id + ')';
+  }
+  
+});
+
+// add def-specific functions
+SVG.extend(SVG.Defs, {
+  
+  // define clippath
+  gradient: function(t, b) {
+    var e = new SVG.Gradient(t);
+    this.add(e);
+    b(e);
+    
+    return e;
+  }
+  
+});
+
+
+SVG.Stop = function Stop(o) {
+  this.constructor.call(this, SVG.create('stop'));
+  
+  this.update(o);
+};
+
+// inherit from SVG.Element
+SVG.Stop.prototype = new SVG.Element();
+
+// add mark-specific functions
+SVG.extend(SVG.Stop, {
+  
+  // add color stops
+  update: function(o) {
+    var s = '',
+        a = ['opacity', 'color'];
+
+    for (var i = a.length - 1; i >= 0; i--)
+      if (o[a[i]] != null)
+        s += 'stop-' + a[i] + ':' + o[a[i]] + ';';
+
+    return this.attr({
+      offset: (o.offset != null ? o.offset : this.attr('offset') || 0) + '%',
+      style:  s
+    });
+  }
+  
+});
+
diff --git a/src/image.js b/src/image.js
index 03fa1b1..b6e16ef 100644
--- a/src/image.js
+++ b/src/image.js
@@ -6,7 +6,7 @@ SVG.Image = function Image() {
 // inherit from SVG.Element
 SVG.Image.prototype = new SVG.Shape();
 
-// Add image-specific functions
+// add image-specific functions
 SVG.extend(SVG.Image, {
   
   // (re)load image