From eb2683b96b19c5c1d80d555245a5f78559d6fe16 Mon Sep 17 00:00:00 2001
From: kerryliu <kerryliu@gmail.com>
Date: Sat, 25 Apr 2015 13:18:54 -0700
Subject: [PATCH] fixes #16

---
 README.md                            |  1 +
 canvas2svg.js                        |  9 +++++
 jasmine-tests/spec/canvas2svgspec.js | 49 ++++++++++++++++++++++++++++
 3 files changed, 59 insertions(+)

diff --git a/README.md b/README.md
index 25f30b3..0a20b14 100644
--- a/README.md
+++ b/README.md
@@ -33,6 +33,7 @@ var svg = ctx.getSvg();
 
 Updates
 ==========
+- v1.0.7 fixes for multiple transforms and fills and better text support from stafyniaksacha
 - v1.0.6 basic support for text baseline (contribution from KoKuToru)
 - v1.0.5 fixes for #5 and #6 (with contributions from KoKuToru)
 - v1.0.4 generate ids that start with a letter
diff --git a/canvas2svg.js b/canvas2svg.js
index fc21e9d..2665c13 100644
--- a/canvas2svg.js
+++ b/canvas2svg.js
@@ -444,6 +444,15 @@
      * @private
      */
     ctx.prototype.__addTransform = function(t) {
+
+        //if the current element has siblings, add another group
+        var parent = this.__closestGroupOrSvg();
+        if(parent.childNodes.length > 0) {
+            var group = document.createElementNS("http://www.w3.org/2000/svg", "g");
+            parent.appendChild(group);
+            this.__currentElement = group;
+        }
+
         var transform = this.__currentElement.getAttribute("transform");
         if(transform) {
             transform += " ";
diff --git a/jasmine-tests/spec/canvas2svgspec.js b/jasmine-tests/spec/canvas2svgspec.js
index 1477d50..4761c81 100755
--- a/jasmine-tests/spec/canvas2svgspec.js
+++ b/jasmine-tests/spec/canvas2svgspec.js
@@ -122,6 +122,55 @@ describe("canvas2svg", function() {
       });
   });
 
+    describe("with multiple transforms and fill/strokes", function() {
+
+        it("creates new groups", function() {
+            var ctx = new C2S();
+            ctx.translate(0, 20);
+            ctx.fillRect(0, 0, 10, 10);
+
+            ctx.translate(10, 20);
+            ctx.fillRect(0, 0, 10, 10);
+
+            ctx.translate(20, 20);
+            ctx.fillRect(0, 0, 10, 10);
+
+            var svg = ctx.getSvg();
+            var firstGroup = svg.querySelector("g");
+            expect(firstGroup.getAttribute("transform")).toEqual("translate(0,20)");
+            var secondGroup = firstGroup.querySelector("g");
+            expect(secondGroup.getAttribute("transform")).toEqual("translate(10,20)");
+            var thirdGroup = secondGroup.querySelector("g");
+            expect(thirdGroup.getAttribute("transform")).toEqual("translate(20,20)");
+
+        });
+
+        it("save and restore still works", function() {
+            var ctx = new C2S();
+
+            ctx.translate(0, 10);
+            ctx.fillRect(0, 0, 10, 10);
+
+            ctx.save();
+            ctx.translate(40, 40);
+            ctx.fillRect(0, 0, 10, 10);
+
+            ctx.restore();
+
+            ctx.translate(0, 10);
+            ctx.fillRect(0, 0, 10, 10);
+
+            var svg = ctx.getSvg();
+            var firstGroup = svg.querySelector("g");
+            expect(firstGroup.getAttribute("transform")).toEqual("translate(0,10)");
+            var secondGroup = firstGroup.childNodes[1];
+            expect(secondGroup.getAttribute("transform")).toEqual("translate(40,40)");
+            var thirdGroup = firstGroup.childNodes[2];
+            expect(thirdGroup.getAttribute("transform")).toEqual("translate(0,10)");
+
+        });
+    });
+
   describe("it will generate ids", function() {
 
       it("that start with a letter", function() {