d3.select 在 inkscape:label="foo"

Question

我正在尝试 select 图层 inkscape:label 属性以便能够 show/hide 网站上的图层。

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，因为层 ID 在多个 SVG 中不相同，但层名称是。

当我尝试类似的东西时； 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, a Using SVG with CSS3 and HTML5补充的文章Material

这就是使用 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>

Answer 2

在无休止地使用命令之后，我终于以某种方式偶然发现了这个解决方案，它似乎按预期工作，不需要我指定任何名称空间等。

function hideFOO() {
    if(d3.select("#hideFOO:checked").node()){
        d3.select("g[*|label='foo']").attr("visibility", "hidden");
    } else {
        d3.select("g[*|label='foo']").attr("visibility", "visible");        
    }
}

我试图在加载 svg 时声明命名空间，它在查询控制台中显示已注册，但如果我尝试指定 inkscape|label 它只是抱怨选择器无效.. . 我想使用 *|label 的唯一问题是，如果在单独的名称空间中有其他东西用 label 标识，它会导致问题。

如果有人可以建议如何让它像 inkscape|label='foo' 一样工作，请在下面发表评论。

我刚刚还发现旧版本的 IE (11) 不喜欢这个，不会按预期隐藏或显示图层。

d3.select 在 inkscape:label="foo"

d3.select on inkscape:label="foo"

javascript

svg

inkscape

d3.js