Search code examples
svgd3.jsinkscape

How to code svg layers so they appear in Inkscape layers drop down menu?

I'am coding some svg for later Inkscape post-editing. Also, I have groups that I want to make appears as layer when in the drop down menu. But currently, when clicked, I just see (root) and nothing more while I actually have 12 layers which should produce 12 rows pilling up.

enter image description here

I currently do :

svg.append("g")
    .attr("groupmode","layer")
    .attr({'id':'L1_borders','label':'L1_borders'})

But it doesn't work (see & download).

How to code svg layers so they appear in Inkscape layers drop down menu ?

Solution

  • Open Inkscape GUI, create a new layer, and inspecting it shows that, for some reasons, Inkscape adds the namespace "inkscape:" before few attibute's keys, such:

    enter image description here

    So the D3 code mirroring this behavior should rather be:

    svg.append("g")
    .attr("inkscape:groupmode","layer")
    .attr({'id':'L1_borders','inkscape:label':'L1_borders'})

    which annoys me because it's unlikely to be standard. Annoying.

    Even that addition, actually, get cleaned up by D3js which I totally support in this audacious move !

    Yet, i need these. I eventually made a tiny hack :

    svg.append("g")
    .attr(":inkscape:groupmode","layer")
    .attr({'id':'L1_borders',':inkscape:label':'L1_borders'})

    D3js cleans up the first ...: and leaves the inkscape:label. It then works. By ex. When done on L0 & L1:

    enter image description here

    Layers are now accessible as clickable rows in the drop GUI layers down menu.

    Oh, ugly naughty non-standard hack~~~