Implemented linear and radial gradients for fill and stroke colors.

Author: winsock

js/main.js

@@ -148,6 +148,7 @@ var lastFileName = "";
 var lastFileData;
 var warnings = [];
 var svgStyles = {};
+var gradients = {};
 var globalSvg;
 
 var clipPathEnabled = false;
@@ -234,6 +235,10 @@ function recursiveTreeWalk(parent, groupLevel, clipPath) {
 }
 
 function preprocessReferences(svg) {
+    svg.find("defs").children().each(function () {
+        var current = $(this);
+        substituteUseRef(svg, current);
+    });
     svg.find("use").each(function () {
         var current = $(this);
         substituteUseRef(svg, current);
@@ -529,16 +534,37 @@ function printPath(pathData, stylesArray, groupLevel, clipPath) {
     if (!clipPath) {
         generatedOutput += INDENT.repeat(groupLevel + 1) + '<path\n';
         if (toBool(localStorage.useIdAsName)) generatedOutput += generateAttr('name', styles["id"], groupLevel, "");
-        generatedOutput += generateAttr('fillColor', parseColorToHex(styles["fill"]), groupLevel, "none");
+        var gradientID = null;
+        var gradientAttr = null;
+        if ((typeof styles["fill"] !== "undefined") && styles["fill"].startsWith("url(")) {
+            gradientID = styles["fill"].slice(5, -1);
+            gradientAttr = "fillColor";
+        } else {
+            generatedOutput += generateAttr('fillColor', parseColorToHex(styles["fill"]), groupLevel, "none");
+        }
         generatedOutput += generateAttr('fillAlpha', styles["fill-opacity"], groupLevel, "1");
         generatedOutput += generateAttr('fillType', styles["fill-rule"], groupLevel, "nonZero");
-        generatedOutput += generateAttr('strokeColor', parseColorToHex(styles["stroke"]), groupLevel, "none");
+        if ((typeof styles["stroke"] !== "undefined") && styles["stroke"].startsWith("url(")) {
+            gradientID = styles["stroke"].slice(5, -1);
+            gradientAttr = "strokeColor";
+        } else {
+            generatedOutput += generateAttr('strokeColor', parseColorToHex(styles["stroke"]), groupLevel, "none");
+        }
         generatedOutput += generateAttr('strokeAlpha', styles["stroke-opacity"], groupLevel, "1");
         generatedOutput += generateAttr('strokeWidth', removeNonNumeric(styles["stroke-width"]), groupLevel, "0");
         generatedOutput += generateAttr('strokeLineJoin', styles["stroke-linejoin"], groupLevel, "miter");
         generatedOutput += generateAttr('strokeMiterLimit', styles["stroke-miterlimit"], groupLevel, "4");
         generatedOutput += generateAttr('strokeLineCap', styles["stroke-linecap"], groupLevel, "butt");
-        generatedOutput += generateAttr('pathData', pathData, groupLevel, null, true);
+        if (gradientID !== null) {
+            generatedOutput += generateAttr('pathData', pathData, groupLevel, null);
+            generatedOutput += '>\n';
+            generatedOutput += INDENT.repeat(groupLevel + 2) + '<aapt:attr name="android:' + gradientAttr + '">\n';
+            generatedOutput += gradients[gradientID] + '\n';
+            generatedOutput += INDENT.repeat(groupLevel + 2) + '</aapt:attr>\n';
+            generatedOutput += INDENT.repeat(groupLevel + 1) + '</path>\n';
+        } else {
+            generatedOutput += generateAttr('pathData', pathData, groupLevel, null, true);
+        }
         pathsParsedCount++;
     } else {
         clipPathMerged.push(pathData);
@@ -550,6 +576,39 @@ function printPath(pathData, stylesArray, groupLevel, clipPath) {
     }
 }
 
+function parseGradients(svg) {
+    svg.find("defs").children().each(function () {
+        var current = $(this);
+        if (current.prop("tagName").endsWith("Gradient")) {
+            var androidXML = '<gradient\n';
+            androidXML += generateAttr('startX', current.attr("x1"), 1, "0");
+            androidXML += generateAttr('startY', current.attr("y1"), 1, "0");
+            androidXML += generateAttr('endX', current.attr("x2"), 1, "0");
+            androidXML += generateAttr('endY', current.attr("y2"), 1, "0");
+            if (current.prop("tagName").startsWith("linear")) {
+                androidXML += INDENT.repeat(1) + 'android:type="linear">';
+            } else if (current.prop("tagName").startsWith("radial")) {
+                androidXML += INDENT.repeat(1) + 'android:type="radial">';
+            }
+            current.children().each(function () {
+                var stopTag = $(this);
+                androidXML += INDENT.repeat(2) + '<item\n';
+                androidXML += generateAttr('offset', stopTag.attr("offset"), 3, null);
+                if (typeof stopTag.attr("stop-opacity") !== "undefined") {
+                    var alpha = ("0" + Math.round(parseFloat(stopTag.attr("stop-opacity")) * 255).toString(16)).slice(-2)
+                    var color = parseColorToHex(stopTag.attr("stop-color")).slice(-6)
+                    
+                    androidXML += generateAttr('color', "#"+alpha+color, 3, null, true);
+                } else {
+                    androidXML += generateAttr('color', parseColorToHex(stopTag.attr("stop-color")), 3, null, true);
+                }
+            });
+            androidXML += '</gradient>';
+            gradients[current.attr("id")] = androidXML;
+        }
+    });
+}
+
 function generateCode(inputXml) {
     var resultData = { error:null, warnings:null, code:null };
 
@@ -569,7 +628,8 @@ function generateCode(inputXml) {
     var svg = xml.find("svg");
     globalSvg = svg;
     preprocessReferences(svg);
-
+    parseGradients(svg);
+    
     if (toBool(localStorage.bakeTransforms)) {
         try {
             flatten(svg[0], false, true);
@@ -593,6 +653,7 @@ function generateCode(inputXml) {
     //XML Vector start
     generatedOutput = '<?xml version="1.0" encoding="utf-8"?>\n';
     generatedOutput += '<vector xmlns:android="http://schemas.android.com/apk/res/android"';
+    generatedOutput += '\n' + INDENT + 'xmlns:aapt="http://schemas.android.com/aapt"'
 
     generatedOutput += '\n' + INDENT + 'android:width="{0}dp"\n'.f(width);
     generatedOutput += INDENT + 'android:height="{0}dp"\n'.f(height);
@@ -876,4 +937,4 @@ function showLastUpdate(repo) {
                     }
                 });
         });
-}
+}