我正在尝试编写一个快速的 JavaScript 简介,以对 Inkscape 生成的 SVG 文件中的图层进行动画处理。 Inkscape 足够好,可以将图层组的 inkscape:groupmode 属性设置为“layer”:
<g
transform="translate(-12.681101,-9.7947913)"
id="g2179"
inkscape:groupmode="layer"
inkscape:label="Frame 2"
style="display:inline"
>
所以我写了一个小脚本来查找所有这些节点,隐藏它们,然后显示它们 一个接一个地循环,有延迟:
<script type="text/javascript">
<![CDATA[
var layers;
var current = 0;
// show one at a time
function animate() {
if (layers.length > 0) {
layers[current].style.display = "none";
current = (current+1) % layers.length;
layers[current].style.display = "inline";
}
}
// on load, get layers and hide them
function init() {
layers = document.querySelectorAll("g[inkscape\\:groupmode='layer']");
alert(layers.length);
// hide all layers
for (var ii=0; ii < layers.length; ii++) {
layers[ii].style.display = "none";
}
setInterval(animate, 500);
}
]]>
</script>
svg 元素上的 onload 调用 init()
的位置:
<svg onload="init()">
不幸的是,querySelectorAll 调用返回一个空的图层数组(警报显示“0”)。我可以通过删除属性标识符来查询所有组元素,但这不是我想要的。
如何只选择图层元素?
编辑:完整示例,在 Linux 上的 Firefox 71.0 和 Chrome 79.0.3945.79 中会弹出“0”:
<svg
onload="init()"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
width="79.63958mm"
height="79.63958mm"
viewBox="0 0 79.63958 79.63958">
<script type="text/javascript">
<![CDATA[
var layers;
var current = 0;
// show one at a time
function animate() {
if (layers.length > 0) {
layers[current].style.display = "none";
current = (current+1) % layers.length;
layers[current].style.display = "inline";
}
}
// on load, get layers and hide them
function init() {
layers = document.querySelectorAll("g[inkscape\\:groupmode='layer']");
alert(layers.length);
// hide all layers
for (var ii=0; ii < layers.length; ii++) {
layers[ii].style.display = "none";
}
setInterval(animate, 500);
}
]]>
</script>
<g
inkscape:label="Frame 1"
inkscape:groupmode="layer"
id="layer1"
transform="translate(-12.681101,-9.7947913)"
style="display:inline">
</g>
</svg>
最佳答案
你不能通过该类型的querySelector选择get元素,但你可以尝试过滤,你需要的G元素
const g = document.querySelectorAll('g')
const layers = Array.from(g)
.filter(g => g.getAttribute('inkscape:groupmode') === 'layer')
关于javascript - 在javascript中按属性选择元素,其中属性名称带有冒号?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59381002/