1 files changed, 122 insertions, 6 deletions

diff --git a/dist/svg.js b/dist/svg.js
index 19a1d26..c906761 100644
--- a/dist/svg.js
+++ b/dist/svg.js
@@ -1,4 +1,4 @@
-/* svg.js v0.1-2-gcf1bd17 - svg container element group arrange defs clip doc shape rect circle ellipse path image text sugar - svgjs.com/license */
+/* svg.js v0.1-4-g740392e - svg container element group arrange defs clip gradient doc shape rect circle ellipse path image text sugar - svgjs.com/license */
 (function() {
 
   this.SVG = {
@@ -121,10 +121,15 @@
       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);
         
@@ -346,7 +351,7 @@
   
   SVG.Clip = function Clip() {
     this.constructor.call(this, SVG.create('clipPath'));
-    this.id = '_' + (clipID++);
+    this.id = 'svgjs_clip_' + (clipID++);
     this.attr('id', this.id);
   };
   
@@ -361,7 +366,7 @@
     
     // 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);
@@ -378,7 +383,7 @@
   SVG.extend(SVG.Defs, {
     
     // define clippath
-    clipPath: function() {
+    clip: function() {
       var e = new SVG.Clip();
       this.add(e);
   
@@ -387,6 +392,117 @@
     
   });
 
+  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
+      });
+    }
+    
+  });
+  
+
+
   SVG.Doc = function Doc(e) {
     this.constructor.call(this, SVG.create('svg'));
     
@@ -519,7 +635,7 @@
   // 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
@@ -684,4 +800,4 @@
 
 
 }).call(this);
-window.svg = function(e) { return new SVG.Doc(e); };
+function svg(e) { return new SVG.Doc(e); };