Animatable fill() and stroke()

2 files changed, 44 insertions, 35 deletions

diff --git a/src/sugar.js b/src/sugar.js
index f8a5660..14868e3 100644
--- a/src/sugar.js
+++ b/src/sugar.js
@@ -10,9 +10,9 @@ var _colorPrefix = function(type, attr) {
 
 /* Add sugar for fill and stroke */
 ;['fill', 'stroke'].forEach(function(method) {
+  var extension = {}
   
-  // Set fill color and opacity
-  SVG.Shape.prototype[method] = function(o) {
+  extension[method] = function(o) {
     var indexOf
     
     if (typeof o == 'string' || SVG.Color.isRgb(o) || SVG.Color.isHsb(o))
@@ -27,42 +27,41 @@ var _colorPrefix = function(type, attr) {
     return this
   }
   
+  SVG.extend(SVG.Shape, SVG.FX, extension)
+  
 })
 
-;[SVG.Element, SVG.FX].forEach(function(module) {
-  if (module) {
-    SVG.extend(module, {
-      // Rotation
-      rotate: function(deg, cx, cy) {
-        return this.transform({
-          rotation: deg || 0
-        , cx: cx
-        , cy: cy
-        })
-      }
-      // Skew
-    , skew: function(x, y) {
-        return this.transform({
-          skewX: x || 0
-        , skewY: y || 0
-        })
-      }
-      // Scale
-    , scale: function(x, y) {
-        return this.transform({
-          scaleX: x,
-          scaleY: y == null ? x : y
-        })
-      }
-      // Opacity
-    , opacity: function(value) {
-        return this.attr('opacity', value)
-      }
-
+SVG.extend(SVG.Element, SVG.FX, {
+  // Rotation
+  rotate: function(deg, cx, cy) {
+    return this.transform({
+      rotation: deg || 0
+    , cx: cx
+    , cy: cy
     })
   }
+  // Skew
+, skew: function(x, y) {
+    return this.transform({
+      skewX: x || 0
+    , skewY: y || 0
+    })
+  }
+  // Scale
+, scale: function(x, y) {
+    return this.transform({
+      scaleX: x,
+      scaleY: y == null ? x : y
+    })
+  }
+  // Opacity
+, opacity: function(value) {
+    return this.attr('opacity', value)
+  }
+
 })
 
+
 if (SVG.Text) {
   SVG.extend(SVG.Text, {
     // Set font 
diff --git a/src/svg.js b/src/svg.js
index e56086b..e7f4363 100644
--- a/src/svg.js
+++ b/src/svg.js
@@ -36,9 +36,19 @@ this.SVG = {
     return element
   }
   // Method for extending objects
-, extend: function(object, module) {
-    for (var key in module)
-      object.prototype[key] = module[key]
+, extend: function() {
+    var modules, methods, key, i
+    
+    /* get list of modules */
+    modules = Array.prototype.slice.call(arguments)
+    
+    /* get object with extensions */
+    methods = modules.pop()
+    
+    for (i = modules.length - 1; i >= 0; i--)
+      if (modules[i])
+        for (key in methods)
+          modules[i].prototype[key] = methods[key]
   }
   
 }