Issue occurred with Angular js selectors

[Jayaramki]

Hi @Kaiido,

I am using angular js in my page. So, basically angular will add directives like 'ng:cloak', 'ng-cloak', 'data-ng-cloak', 'x-ng-cloak', '.ng-cloak', '.x-ng-cloak', '.ng-hide' the following selectors to page.

SVG2Bitmap.js:294 Uncaught SyntaxError: Failed to execute 'matches' on 'Element': '[ng:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak, .ng-hide' is not a valid selector.

Now I am getting the above error while creating a image from SVG.

[Kaiido]

Sorry @Jayaramki it took me so long to see your issue...

This error seems strange to me : [ng:cloack] is indeed an invalid CSS attribute selector. For namespaced attributes it should be :

@namespace ng "http://someNameSpaceURI";
[ng|cloak] { ruleset: ...;}

So a few questions come to my mind :

• Which browser does throw this error ? Your browser should have rejected this ruleset, and SVG2Bitmap script shouldn't have been able to see it.
• I don't know AngularJS so much, so are you sure it is this library which added this ruleset and not you in your CSS files ? And if so, could create a small snippet where the problem does occur so I can see it live ?

For a quick fix, you could probably just add selector = selector.replace(/:/g,'\\:') @line300 of the latest version

var selector = rules[j].selectorText;
// probably an external stylesheet we can't access
if(!selector){
    continue;
 }
selector = selector.replace(/:/g,'\\:')
// is it our svg node or one of its children ?
if ((svg.matches && svg.matches(selector)) || svg.querySelector(selector)) { ...

But I would probably have to make a real css-selectors validator, and a CSS namespace parser, but I prefer to have the previously requested informations before committing this quick fix.