.svgString() automatically lowercases tags?

[KingZee]

To reproduce, insert any element with a tag containing uppercase using selection.html(), and print it with the svg.svgString() function.

This is a sample output I'm getting :
<svg xmlns="http://www.w3.org/2000/svg" width="500" height="50"><radialgradient id="grad1" x1="10%" y1="10%" x2="80%" y2="90%"> <stop offset="0%" style="stop-color:#627AAD;stop-opacity:0.9"></stop> <stop offset="100%" style="stop-color:#3B5998;stop-opacity:0.9"></stop> </radialgradient><circle cx="25" cy="25" r="5" fill="url(#grad1)"></circle><circle cx="75" cy="25" r="10" fill="url(#grad1)"></circle><circle cx="125" cy="25" r="15" fill="url(#grad1)"></circle><circle cx="175" cy="25" r="20" fill="url(#grad1)"></circle><circle cx="225" cy="25" r="25" fill="url(#grad1)"></circle></svg>

Because svgString() lowercases the g in radialGradient, it will break the file, and the above svg does not get rendered.

You can take the above svg and change the radialgradient to radialGradient, it renders correctly.

[KingZee]

The reason for this seems to go way beyond d3-node and d3 itself...
I'm closing it here. Refer to a simiar issue in : jsdom/jsdom#620

[bradoyler]

@KingZee great find. Thx.

[bradoyler]

@KingZee if you could share the d3 script you were using to produce this issue, it was be appreciated.
I'm wondering if there's a way to use xmlserializer to fix this.

[KingZee]

const d3n = new D3Node();
var svg = d3n.createSVG()
    .style("width",800)
    .style("height",480)
    .attr("preserveAspectRatio","true");

svg.append("radialGradient");

console.log(d3n.svgString()); //outputs <svg xmlns="http://www.w3.org/2000/svg" width="800" height="480"><radialgradient></radialgradient>

//fix using console.log(xmlserializer.serializeToString(svg.node()));

Here's my code.

So since svgString() is equivalent of getting the svg.node().outerHTML, and HTML isn't case sensitive, the output tags are all lowercased, I have managed to tweak this by instead getting the XML using xmlserializer, I parse the node directly, so something like :

require('xmlserializer').serializeToString(svg.node())

The output will take into account case sensitivity. Since this adds dependency to xmlserializer it's up to you if you want to add this fix, I couldn't find another way to work around this. Cheers.

[bradoyler]

Ok, I'm going to attempt a fix and a test for this.

[bradoyler]

This may also be resolved (at some point) via jsdom with jsdom/jsdom#1368

[bradoyler]

@KingZee d3-node@1.0.1 should no longer have this issue.