javascript - 在javascript中按属性选择元素,其中属性名称有冒号?
问题描述
我正在尝试编写一个快速的 javascript 简介,以从 Inkscape 生成的 SVG 文件中为图层设置动画。Inkscape 可以很好地将 inkscape:groupmode 属性设置为图层组的“图层”:
<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>
svginit()
元素上的 onload 调用的位置:
<svg onload="init()">
不幸的是,querySelectorAll 调用返回一个空的图层数组(警报显示为“0”)。我可以通过删除属性标识符来查询所有组元素,但这不是我想要的。
如何仅选择作为图层的元素?
编辑:完整示例,在 Firefox 71.0 中弹出“0”,在 Linux 上弹出 Chrome 79.0.3945.79:
<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 选择获取元素,但您可以尝试过滤,您需要的 G 元素
const g = document.querySelectorAll('g')
const layers = Array.from(g)
.filter(g => g.getAttribute('inkscape:groupmode') === 'layer')
推荐阅读
- python - Keras,自定义“有多么不同”损失函数定义问题
- node.js - Application Insights:节点 js 中的 CorrelationIdManager 错误
- reactjs - 为什么没有在所需的反应组件中呈现待办事项?(asp.net 核心 2.0/reactjs/typescript)
- python - WindowsError:[错误 183] 当文件已存在时无法使用 os.rename 创建文件
- phpspreadsheet - PhpSpreadsheet 从内存而不是文件加载 Excel 文件?
- python - 仅在 PANDAS 中的某些列上使用 to_numeric
- javascript - 承诺抓住不工作
- amazon-web-services - 重启服务器后 Strongswan 隧道无法正常工作
- java - 在适用于 Eclipse 的 Google Cloud 工具上运行 Objectify 时出现“projectId 必须匹配以下模式”异常
- ruby-on-rails - 回复按钮(用户只能回复一次)