Error extracting SVG created with an AngularJS directive (Support for more CSS rules) about savesvgaspng

[prabhatsingh-db]

I am also facing the same issue.getting below error in chrome
Error: Failed to execute 'querySelectorAll' on 'Element': '[ng:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak, .ng-hide:not(.ng-animate)' is not a valid selector.

in FF getting this error
[Exception... "The operation is insecure." code: "18" nsresult: "0x80530012 (SecurityError)" location: ""]
http://localhost:8000/bower_components/angular/angular.js
Line 9383

[lebolo]

Disclaimer: I'm not an active saveSvgAsPng developer, just a user ;)

One possible solution would be to catch the exception and skip that CSS rule. So in saveSvgAsPng.js (currently @ line 46) change

var elems = dom.querySelectorAll(rule.selectorText);
if (elems.length > 0) {
  used += rule.selectorText + " { " + rule.style.cssText + " }\n";
}

to

try {
  var elems = dom.querySelectorAll(rule.selectorText);
  if (elems.length > 0) {
    used += rule.selectorText + " { " + rule.style.cssText + " }\n";
  }
} catch(e) {
  //console.error(e);
  continue;
} 

However, this means that any invalid CSS rules obviously won't be applied to the SVG that will ultimately become your PNG.

One may want to log the SyntaxError exception upon catching (or try to remove AngularJS specific rules?).

[exupero]

The code in question is filtering out unused CSS rules. I don't think there's a strong reason to do this, so I've removed it, which removes the usage of Element.querySelectorAll that errors when namespaced attribute names are part of the CSS selector.

[exupero]

This issue has resurfaced since I've re-added CSS rule filtering.

Unfortunately, I haven't been able to reproduce this error. I've added a CSS rule using the problem selector, but it appears invalid selectors like [ng:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak, .ng-hide:not(.ng-animate) are omitted from cssRules.

I'd appreciate any tips on how to see this error for myself.

[exupero]

6dc272f adds handling for invalid selector errors.

[ShadSterling]

I'm seeing a similar error

Invalid CSS selector "svg:svg" DOMException: Failed to execute 'querySelector' on 'Element': 'svg:svg' is not a valid selector.

at saveSvgAsPng.js:68 on a rule in jquery.svg.package-1.5.0/jquery.svg.css

[exupero]

Make sure you're using the latest code. That error wouldn't be thrown on line 68 of the latest version.

[ShadSterling]

I thought the update had fixed it, but apparently I just failed to see the message... now it occurs on line 96, apparently while processing this rule.

[exupero]

I'm having trouble reproducing the error your describe. Can you supply an example failure via JSBin or JSFiddle?

[ShadSterling]

I've attempted that (JSBin will download an image when opened), but I don't see the error there either. It occurs in our app when trying to save an svg from within an iframe of a wysihtml5 document to which we programmatically copy all stylesheets from the containing page. It turns out we don't actually use the jQuery SVG plugin that has the stylesheet that triggers the error, so the solution for us is to just not load that stylesheet.