d3 get attribute with special character

Question

Lately I have been researching how to modify SVG files with d3.js. Till thus far it has been a great tool to work with but now I ran in a little problem. I create a SVG file wit

Answer 1

The colon in a name usually defines the namespace for the name after the colon. D3 has code to deal with this, to avoid having to specify the namespace explicitly everywhere. Unfortunately, this breaks in your case as it tries to interpret the leading inkscape as a namespace.

The workaround is simple though -- simply add another colon as a prefix to your selector. D3 will extract this empty "namespace" and interpret the rest of the string as being in the default namespace.

console.log(d3.select("#path3262").attr(":inkscape:label"));

Complete demo here.