我正在尝试按其选择一个图层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
or 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
路径上不匹配。
这是使用 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>
请阅读这篇关于CSS 中的 XML 命名空间 https://oreillymedia.github.io/Using_SVG/extras/ch03-namespaces.html, a 将 SVG 与 CSS3 和 HTML5 结合使用 http://shop.oreilly.com/product/0636920037972.do补充材料
这就是你如何使用 javascript 做到这一点(你不能在querySelector()
and 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>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)