Add support for transforms to gradients. Fixes issue #52

svgWriterGradient.js

@@ -21,8 +21,9 @@
         Tag = require("./svgWriterTag.js");
 
     var round10k = svgWriterUtils.round10k,
-        gradientStops = {};
-    var ctxCapture = svgWriterUtils.ctxCapture;
+        gradientStops = {},
+        ctxCapture = svgWriterUtils.ctxCapture,
+        getTransform = svgWriterUtils.getTransform;
 
     function removeDups(lines) {
         var out = [lines[0]];
@@ -41,30 +42,28 @@
             var x1 = gradient.x1 + (ctx._shiftContentX || 0),
                 x2 = gradient.x2 + (ctx._shiftContentX || 0),
                 y1 = gradient.y1 + (ctx._shiftContentY || 0),
-                y2 = gradient.y2 + (ctx._shiftContentY || 0);
-            if (link) {
-                tag.setAttributes({
+                y2 = gradient.y2 + (ctx._shiftContentY || 0),
+                attr = {
                     x1: x1,
                     y1: y1,
                     x2: x2,
                     y2: y2,
-                    "xlink:href": "#" + link.id
-                });
+                    gradientTransform: getTransform(gradient.transform)
+                };
+            if (link) {
+                attr["xlink:href"] = "#" + link.id;
+                tag.setAttributes(attr);
             } else {
                 gradientStops[lines] = {
                     id: gradientID,
                     x1: x1,
                     y1: y1,
                     x2: x2,
-                    y2: y2
+                    y2: y2,
+                    gradientTransform: getTransform(gradient.transform)
                 };
-                tag.setAttributes({
-                    gradientUnits: "userSpaceOnUse",
-                    x1: x1,
-                    y1: y1,
-                    x2: x2,
-                    y2: y2
-                });
+                attr.gradientUnits = "userSpaceOnUse";
+                tag.setAttributes(attr);
                 tag.children = removeDups(lines);
             }
         },
@@ -77,7 +76,8 @@
                 attr = {
                     cx: cx,
                     cy: cy,
-                    r: r
+                    r: r,
+                    gradientTransform: getTransform(gradient.transform)
                 };
             if (isFinite(fx) && fx != cx) {
                 attr.fx = fx;
@@ -95,7 +95,8 @@
                     cy: cy,
                     fx: fx,
                     fy: fy,
-                    r: r
+                    r:  r,
+                    gradientTransform: getTransform(gradient.transform)
                 };
                 attr.gradientUnits = "userSpaceOnUse";
                 tag.setAttributes(attr);
@@ -146,7 +147,10 @@
                     y1: round10k(gradient.y1),
                     x2: round10k(gradient.x2),
                     y2: round10k(gradient.y2),
+                    fx: round10k(gradient.fx),
+                    fy: round10k(gradient.fy),
                     r: round10k(gradient.r),
+                    transform: gradient.transform,
                     stops: stops,
                     gradientSpace: gradientSpace
                 });

tests/data/gradient-color-overlay-om.js

@@ -209,7 +209,7 @@ module.exports = {
 						"width": 400,
 						"height": 400,
 						"preserveAspectRatio": "none",
-						"xlink:href": "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJ4TWlkWU1pZCIgd2lkdGg9IjQwMCIgaGVpZ2h0PSI0MDAiIHZpZXdCb3g9IjAgMCA0MDAgNDAwIj4KICA8ZGVmcz4KICAgIDxzdHlsZT4KICAgICAgLmNscy0xIHsKICAgICAgICBmaWxsOiB1cmwoI2xpbmVhci1ncmFkaWVudC0xKTsKICAgICAgfQogICAgPC9zdHlsZT4KCiAgICA8bGluZWFyR3JhZGllbnQgaWQ9ImxpbmVhci1ncmFkaWVudC0xIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjIwMCIgeTE9IjQwMCIgeDI9IjIwMCI+CiAgICAgIDxzdG9wIG9mZnNldD0iMCIgc3RvcC1jb2xvcj0iIzI5MGE1OSIvPgogICAgICA8c3RvcCBvZmZzZXQ9IjEiIHN0b3AtY29sb3I9IiNmZjdjMDAiLz4KICAgIDwvbGluZWFyR3JhZGllbnQ+CiAgPC9kZWZzPgogIDxyZWN0IHdpZHRoPSI0MDAiIGhlaWdodD0iNDAwIiBjbGFzcz0iY2xzLTEiLz4KPC9zdmc+Cg=="
+						"xlink:href": "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJ4TWlkWU1pZCIgd2lkdGg9IjQwMCIgaGVpZ2h0PSI0MDAiIHZpZXdCb3g9IjAgMCA0MDAgNDAwIj4KICA8ZGVmcz4KICAgIDxzdHlsZT4KICAgICAgLmNscy0xIHsKICAgICAgICBmaWxsOiB1cmwoI2xpbmVhci1ncmFkaWVudC0xKTsKICAgICAgfQogICAgPC9zdHlsZT4KCiAgICA8bGluZWFyR3JhZGllbnQgaWQ9ImxpbmVhci1ncmFkaWVudC0xIiB4MT0iMjAwIiB5MT0iNDAwIiB4Mj0iMjAwIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSI+CiAgICAgIDxzdG9wIG9mZnNldD0iMCIgc3RvcC1jb2xvcj0iIzI5MGE1OSIvPgogICAgICA8c3RvcCBvZmZzZXQ9IjEiIHN0b3AtY29sb3I9IiNmZjdjMDAiLz4KICAgIDwvbGluZWFyR3JhZGllbnQ+CiAgPC9kZWZzPgogIDxyZWN0IHdpZHRoPSI0MDAiIGhlaWdodD0iNDAwIiBjbGFzcz0iY2xzLTEiLz4KPC9zdmc+Cg=="
 					},
 					{
 						"name": "feComposite",
@@ -324,4 +324,4 @@ module.exports = {
 		}
 	},
 	"title": "gradient-color-overlay.psd"
-}
+}