Question

我正在尝试通过其inkscape:label属性选择一个图层，以便能够显示/隐藏网站上的该图层。

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

SVG是；

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

这很好用-但我希望能够指定inkscape:label，因为在多个SVG中，层ID并不相同，但是层名称却是相同的。

当我尝试类似的东西时； d3.select(":inkscape:label='foo'").attr("visibility", "hidden");我刚被告知； SyntaxError: ':inkscape:label='foo'' is not a valid selector

还是d3.select("$('g[inkscape:label="foo"]')").attr("visibility", "hidden");告诉我SyntaxError: missing ) after argument list，尽管我所有的'）'都关闭了！！

基于以下解决方案-我也尝试过d3.select('g[inkscape\\:label = "foo"]').attr("visibility", "hidden");，但它也没有隐藏该图层-在浏览器的开发控制台中播放时，似乎d3.select在路径上不匹配

Answer 1

这是使用CSS将可见性变为隐藏状态的方法：

想法是您需要使用inkscape的名称空间

/*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>

请阅读有关XML Namespaces in CSS（一种Using SVG with CSS3 and HTML5补充材料）的这篇文章

这就是使用javascript的方式（您不能在querySelector()和querySelectorAll()方法中使用名称空间前缀）：

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>

d3.select on inkscape：label =“ foo”

1 个答案: