From 64cee40038da82de5f84680d95e8648e5ff0dc7d Mon Sep 17 00:00:00 2001
From: kerryliu <kerryliu@gmail.com>
Date: Fri, 21 Feb 2014 17:16:14 -0800
Subject: [PATCH] split up rgba for illustrator import support

---
 canvas2svg.js                        | 16 ++++++++++++----
 jasmine-tests/spec/canvas2svgspec.js | 22 ++++++++++++++++++++++
 2 files changed, 34 insertions(+), 4 deletions(-)

diff --git a/canvas2svg.js b/canvas2svg.js
index 6ea32a4..1c48329 100644
--- a/canvas2svg.js
+++ b/canvas2svg.js
@@ -1,5 +1,5 @@
 /*!
- *  Canvas 2 Svg v1.0.1
+ *  Canvas 2 Svg v1.0.2
  *  A low level canvas to SVG converter. Uses a mock canvas context to build an SVG document.
  *
  *  Licensed under the MIT license:
@@ -311,7 +311,7 @@
      * @private
      */
     ctx.prototype.__applyStyleToCurrentElement = function(type) {
-        var keys = Object.keys(STYLES), i, style, value, id;
+        var keys = Object.keys(STYLES), i, style, value, id, regex, matches;
         for(i=0; i<keys.length; i++) {
             style = STYLES[keys[i]];
             value = this[keys[i]];
@@ -333,8 +333,16 @@
                     //gradient
                     this.__currentElement.setAttribute("fill", format("url(#{id})", {id:value.__root.getAttribute("id")}));
                 } else if(style.apply.indexOf(type)!==-1 && style.svg !== value) {
-                    //otherwise only update attribute if right type, and not svg default
-                    this.__currentElement.setAttribute(style.svgAttr, value);
+                    if((style.svgAttr === "stroke" || style.svgAttr === "fill") && value.indexOf("rgba") !== -1) {
+                        //separate alpha value, since illustrator can't handle it
+                        regex = /rgba\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d?\.?\d*)\s*\)/gi;
+                        matches = regex.exec(value);
+                        this.__currentElement.setAttribute(style.svgAttr, format("rgb({r},{g},{b})", {r:matches[1], g:matches[2], b:matches[3]}));
+                        this.__currentElement.setAttribute(style.svgAttr+"-opacity", matches[4]);
+                    } else {
+                        //otherwise only update attribute if right type, and not svg default
+                        this.__currentElement.setAttribute(style.svgAttr, value);
+                    }
                 }
             }
         }
diff --git a/jasmine-tests/spec/canvas2svgspec.js b/jasmine-tests/spec/canvas2svgspec.js
index b7f539a..16d1924 100755
--- a/jasmine-tests/spec/canvas2svgspec.js
+++ b/jasmine-tests/spec/canvas2svgspec.js
@@ -122,4 +122,26 @@ describe("canvas2svg", function() {
       });
   });
 
+
+  describe("will split up rgba", function() {
+    //while browsers support rgba values for fill/stroke, this is not accepted in visio/illustrator
+    it("to fill and fill-opacity", function() {
+        var ctx = new C2S();
+        ctx.fillStyle="rgba(20,40,50,0.5)";
+        ctx.fillRect(100,100,100,100);
+        var svg = ctx.getSvg();
+        expect(svg.querySelector("rect").getAttribute("fill")).toBe("rgb(20,40,50)");
+        expect(svg.querySelector("rect").getAttribute("fill-opacity")).toBe("0.5");
+    });
+
+    it("to stroke and stroke-opacity", function() {
+        var ctx = new C2S();
+        ctx.strokeStyle="rgba(10,20,30,0.4)";
+        ctx.strokeRect(100,100,100,100);
+        var svg = ctx.getSvg();
+        expect(svg.querySelector("rect").getAttribute("stroke")).toBe("rgb(10,20,30)");
+        expect(svg.querySelector("rect").getAttribute("stroke-opacity")).toBe("0.4");
+    });
+  });
+
 });