d3.select on inkscape:label=“foo”

问题

I'm trying to select a layer by its inkscape:label property to be able to show/hide the layer on a website.

function hideFOO() {
    if(d3.select("#hideFOO:checked").node()){
        d3.select("#layer11").attr("visibility", "hidden");
    } else {
        d3.select("#layer11").attr("visibility", "visible");        
    }
}

The SVG is;

<g
     inkscape:groupmode="layer"
     id="layer11"
     inkscape:label="foo"
     style="display:inline"> ...

That works just fine - but I'd like to be able to specify the inkscape:label as the layer ID's are not the same across multiple SVG's, but the layer names are.

When I try something like; d3.select(":inkscape:label='foo'").attr("visibility", "hidden"); I just get told; SyntaxError: ':inkscape:label='foo'' is not a valid selector

or d3.select("$('g[inkscape:label="foo"]')").attr("visibility", "hidden"); which tells me SyntaxError: missing ) after argument list though all my ')' are closed?!

Based on a solution below - I also tried with d3.select('g[inkscape\\:label = "foo"]').attr("visibility", "hidden"); but it's not hiding the layer either - when playing in the dev console for the browser it appears the d3.select isn't matching on the path.

回答1:

This is how you can turn the visibility to hidden using CSS:

The idea is that you need to use inkscape's namespace

/*declare the prefix for the namespace*/
@namespace ink "http://www.inkscape.org/namespaces/inkscape";

/*escape the colon : or use the pipe |*/
[inkscape\:label="foo"], [ink|label="foo"] {
/*visibility:hidden*/
fill:red;}

svg{border:1px solid}

<svg>
  <g
     inkscape:groupmode="layer"
     id="layer11"
     inkscape:label="foo"
     style="display:inline">
    <rect width="100" height="50"/>
  </g>
</svg>

Please read this article about XML Namespaces in CSS, a Using SVG with CSS3 and HTML5 supplementary Material

And this is how you can do it with javascript (You can’t use namespace prefixes in the querySelector() and querySelectorAll() methods ):

let g = document.querySelector('g[inkscape\\:label = "foo"]')
 //g.style.visibility = "hidden"
 g.style.fill = "red"

svg{border:1px solid}

<svg>
  <g
     inkscape:groupmode="layer"
     id="layer11"
     inkscape:label="foo"
     style="display:inline">
    <rect width="100" height="50"/>
  </g>
  
</svg>

来源：https://stackoverflow.com/questions/56514047/d3-select-on-inkscapelabel-foo

标签

javascript

d3.js

svg

inkscape