include compound CSS selectors and those that don't mention the <svg> element

saveSvgAsPng.js

@@ -27,28 +27,55 @@
         var img = new Image();
         href = href || image.getAttribute('href');
         img.src = href;
-        img.onload = function() {
+        var loadHandler = function() {
           canvas.width = img.width;
           canvas.height = img.height;
           ctx.drawImage(img, 0, 0);
-          image.setAttribute('xlink:href', canvas.toDataURL('image/png'));
-          left--;
-          if (left == 0) {
-            callback();
-          }
-        }
-        img.onerror = function() {
-          console.log("Could not load "+href);
+          image.setAttribute('href', canvas.toDataURL('image/png'));
           left--;
           if (left == 0) {
             callback();
           }
+        };
+        if (img.complete) {
+            loadHandler();
+        } else {
+          img.onload = loadHandler;
+          img.onerror = function() {
+            console.log("Could not load " + href);
+            left--;
+            if (left == 0) {
+              callback();
+            }
+          };
         }
       })(images[i]);
     }
   }
 
+  function makeSelectorPrefixRemover(el) {
+      return function(selectorText) {
+          return selectorText.split(/\s*,\s*/).map(function(subSelectorText) {
+              var selectorTokens = subSelectorText.split(/\s+/);
+              var selectorPrefixToRemove = '';
+              for (var iToken = 0; iToken < selectorTokens.length; iToken++) {
+                  selectorPrefixToRemove += ' ' + selectorTokens[iToken];
+
+                  var matchingSvgElements = el.querySelectorAll(selectorPrefixToRemove);
+                  if (matchingSvgElements.length) {
+                      var position = iToken;
+                      if (Array.prototype.indexOf.call(matchingSvgElements, el) >= 0) position++;
+                      else position--;
+                      return selectorTokens.slice(position).join(' ');
+                  }
+              }
+          }).join(", ");
+      }
+  }
+
   function styles(el, selectorRemap) {
+    selectorRemap = selectorRemap || makeSelectorPrefixRemover(el);
+
     var css = "";
     var sheets = document.styleSheets;
     for (var i = 0; i < sheets.length; i++) {
@@ -61,10 +88,17 @@
         for (var j = 0; j < rules.length; j++) {
           var rule = rules[j];
           if (typeof(rule.style) != "undefined") {
-            var matches = el.querySelectorAll(rule.selectorText);
+            var matches = [];
+            try {
+              matches = el.querySelectorAll(rule.selectorText);
+            } catch (err) {
+                console.error(rule.selectorText, err);
+            }
             if (matches.length > 0) {
-              var selector = selectorRemap ? selectorRemap(rule.selectorText) : rule.selectorText;
+              var selector = selectorRemap(rule.selectorText);
               css += selector + " { " + rule.style.cssText + " }\n";
+            } else if (rule.cssText.match(/^@font-face/)) {
+                css += rule.cssText + "\n";
             }
           }
         }
@@ -122,7 +156,7 @@
     out$.svgAsDataUri(el, options, function(uri) {
       var image = new Image();
       image.src = uri;
-      image.onload = function() {
+      var loadHandler = function() {
         var canvas = document.createElement('canvas');
         canvas.width = image.width;
         canvas.height = image.height;
@@ -134,6 +168,11 @@
         a.href = canvas.toDataURL('image/png');
         document.body.appendChild(a);
         a.click();
+      };
+      if (image.complete) {
+        loadHandler();
+      } else {
+        image.onload = loadHandler;
       }
     });
   }