在javascript中按屬性選擇元素，其中屬性名稱有冒號？

Question

我正在嘗試編寫一個快速的 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>

其中init()由 svg 元素上的 onload 調用：

<svg onload="init()">

不幸的是，querySelectorAll 調用返回一個空的層數組（警報顯示“0”）。 我可以通過刪除屬性標識符來查詢所有組元素，但這不是我想要的。

如何只選擇作為圖層的元素？

編輯：完整示例，在 Firefox 71.0 和 Chrome 79.0.3945.79 在 Linux 中彈出“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>

Answer 1

你不能通過那種類型的 querySelector 選擇 get 元素，但你可以嘗試過濾，你需要的 G 元素

const g = document.querySelectorAll('g')
const layers = Array.from(g)
    .filter(g => g.getAttribute('inkscape:groupmode') === 'layer')