Fixed use references inloop#30

FoxTong · Dec 21, 2015 · a9ff1b2 · a9ff1b2
1 parent a1e4fc6
commit a9ff1b2
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 10 deletions.
diff --git a/index.html b/index.html
@@ -43,7 +43,7 @@ <h3>Android SVG to VectorDrawable</h3>
             <div class="nouploadinfo small">No file will be uploaded - uses only JavaScript HTML5 FileReader.<br /><br /></div>
 
             <div class="nouploadinfo small alert alert-warning" style="display: inline-block"><b>Now supports path, line, rect, circle, ellipse, polyline and polygon elements.</b><br/>
-                Keep in mind that Android does support svg files only partially.</div>
+                Keep in mind that Android does support svg files only partially.<br/>Please report wrongly converted SVGs by filling an issue on github.</div>
         </div>
     </div>
 
@@ -131,7 +131,7 @@ <h4 class="modal-title">Multiple SVG files (<span id="files-count"></span> files
 <script src="js/svg_shape_converter.js"></script>
 <script src="js/flatten.js"></script>
 <script src="js/jszip.min.js"></script>
-<script src="js/main.js?v=19"></script>
+<script src="js/main.js?v=20"></script>
 
 <script>
     (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){

diff --git a/js/main.js b/js/main.js
@@ -201,12 +201,17 @@ function recursiveTreeWalk(parent, groupLevel) {
             printPath(ShapeConverter.convertPolygon(current, false), getStyles(current), groupLevel);
         } else if (current.is("text")) {
             pushUnique(warnings, "<i>text</i> element is not supported, export all text into path");
-        } else if (current.is("use")) {
-            parseUseRef(parent, current, groupLevel);
         }
     });
 }
 
+function preprocessReferences(svg, grouplevel) {
+    svg.find("use").each(function () {
+        var current = $(this);
+        substituteUseRef(svg, current);
+    });
+}
+
 function getStyles(el) {
     var styles = parseStyles(el);
 
@@ -229,7 +234,7 @@ function getStyles(el) {
     return [styles, parentStyles];
 }
 
-function parseUseRef(parent, current, groupLevel) {
+function substituteUseRef(parent, current) {
     var href = current.attr("xlink:href");
     if (typeof href !== "undefined") {
         href = href.trim();
@@ -238,16 +243,14 @@ function parseUseRef(parent, current, groupLevel) {
             //Find definition in svg
             var defs = $(parent).find("[id='" + href.substr(1) + "']");
             if (defs.length) {
+                defs = defs.clone();
+
                 //Copy overriding attributes into children
                 $.each(current.prop("attributes"), function () {
                     defs.attr(this.name, this.value);
                 });
 
-                if (defs.children().length == 0) {
-                    recursiveTreeWalk($("<g></g>").append(defs), groupLevel);
-                } else {
-                    recursiveTreeWalk(defs, groupLevel);
-                }
+                current.replaceWith(defs);
             } else {
                 console.warn("Found <use> tag but did not found appropriate block in <defs> for id " + href);
             }
@@ -472,6 +475,8 @@ function generateCode(inputXml) {
 
     var svg = xml.find("svg");
 
+    preprocessReferences(svg);
+
     if (toBool(localStorage.bakeTransforms)) {
         try {
             flatten(svg[0], false, true);