Merge pull request #548 from RmiTtro/fix-transform-anim

Make transform more consistent when animated. Fixes bug with animated matrices

3 files changed, 15 insertions, 8 deletions

diff --git a/src/fx.js b/src/fx.js
index 2105d67..d70e245 100644
--- a/src/fx.js
+++ b/src/fx.js
@@ -642,7 +642,7 @@ SVG.FX = SVG.invent({
           if(a instanceof SVG.Matrix){
 
             if(a.relative){
-              at = at.multiply(a.at(s.ease(this.pos)))
+              at = at.multiply(new SVG.Matrix().morph(a).at(s.ease(this.pos)))
             }else{
               at = at.morph(a).at(s.ease(this.pos))
             }
diff --git a/src/sugar.js b/src/sugar.js
index e59f905..ddd4826 100644
--- a/src/sugar.js
+++ b/src/sugar.js
@@ -7,7 +7,7 @@ var sugar = {
   }
 }
 
-// Add sugar for fill and stroke 
+// Add sugar for fill and stroke
 ;['fill', 'stroke'].forEach(function(m) {
   var i, extension = {}
 
@@ -18,7 +18,7 @@ var sugar = {
       this.attr(m, o)
 
     else
-      // set all attributes from sugar.fill and sugar.stroke list 
+      // set all attributes from sugar.fill and sugar.stroke list
       for (i = sugar[m].length - 1; i >= 0; i--)
         if (o[sugar[m][i]] != null)
           this.attr(sugar.prefix(m, sugar[m][i]), o[sugar[m][i]])
@@ -37,7 +37,9 @@ SVG.extend(SVG.Element, SVG.FX, {
   }
   // Map skew to transform
 , skew: function(x, y, cx, cy) {
-    return this.transform({ skewX: x, skewY: y, cx: cx, cy: cy })
+    return arguments.length == 1  || arguments.length == 3 ?
+      this.transform({ skew: x, cx: y, cy: cx }) : 
+      this.transform({ skewX: x, skewY: y, cx: cx, cy: cy })
   }
   // Map scale to transform
 , scale: function(x, y, cx, cy) {
@@ -111,4 +113,3 @@ SVG.extend(SVG.Parent, SVG.Text, SVG.FX, {
     return this
   }
 })
-
diff --git a/src/transform.js b/src/transform.js
index 1635152..33f5019 100644
--- a/src/transform.js
+++ b/src/transform.js
@@ -58,13 +58,13 @@ SVG.extend(SVG.Element, {
       matrix = matrix.scale(o.scaleX, o.scaleY, o.cx, o.cy)
 
     // act on skew
-    } else if (o.skewX != null || o.skewY != null) {
+    } else if (o.skew != null || o.skewX != null || o.skewY != null) {
       // ensure centre point
       ensureCentre(o, target)
 
       // ensure skew values on both axes
-      o.skewX = o.skewX != null ? o.skewX : 0
-      o.skewY = o.skewY != null ? o.skewY : 0
+      o.skewX = o.skew != null ? o.skew : o.skewX != null ? o.skewX : 0
+      o.skewY = o.skew != null ? o.skew : o.skewY != null ? o.skewY : 0
 
       if (!relative) {
         // absolute; reset skew values
@@ -267,6 +267,12 @@ SVG.Transformation = SVG.invent({
         o[this.arguments[i]] = typeof this[this.arguments[i]] == 'undefined' ? 0 : o[this.arguments[i]]
       }
 
+      // The method SVG.Matrix.extract which was used before calling this
+      // method to obtain a value for the parameter o doesn't return a cx and
+      // a cy so we use the ones that were provided to this object at its creation
+      o.cx = this.cx
+      o.cy = this.cy
+
       this._undo = new SVG[capitalize(this.method)](o, true).at(1)
 
       return this