d3.select on inkscape:label ="foo" [英] d3.select on inkscape:label="foo"
问题描述
我正在尝试通过其inkscape:label
属性选择一个图层,以便能够在网站上显示/隐藏该图层.
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");
}
}
SVG是;
<g
inkscape:groupmode="layer"
id="layer11"
inkscape:label="foo"
style="display:inline"> ...
这很好用-但我想能够指定inkscape:label
,因为在多个SVG中,层ID并不相同,但是层名称却是.
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.
当我尝试类似的东西时;
d3.select(":inkscape:label='foo'").attr("visibility", "hidden");
我刚刚被告知; SyntaxError: ':inkscape:label='foo'' is not a valid selector
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
或d3.select("$('g[inkscape:label="foo"]')").attr("visibility", "hidden");
告诉我SyntaxError: missing ) after argument list
尽管我所有的')'都已关闭?!
or d3.select("$('g[inkscape:label="foo"]')").attr("visibility", "hidden");
which tells me SyntaxError: missing ) after argument list
though all my ')' are closed?!
基于以下解决方案-我也尝试过使用d3.select('g[inkscape\\:label = "foo"]').attr("visibility", "hidden");
,但它也没有隐藏该层-在浏览器的开发控制台中播放时,似乎d3.select
在路径上不匹配.
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.
推荐答案
这是使用CSS将可见性变为隐藏状态的方法:
This is how you can turn the visibility to hidden using CSS:
想法是您需要使用inkscape的命名空间
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>
请阅读有关 CSS中的XML命名空间的文章. 将SVG与CSS3和HTML5配合使用补充材料
Please read this article about XML Namespaces in CSS, a Using SVG with CSS3 and HTML5 supplementary Material
这就是使用javascript的方式(您不能在querySelector()
和querySelectorAll()
方法中使用名称空间前缀):
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>
这篇关于d3.select on inkscape:label ="foo"的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!