Selecting elements by attribute in javascript, where attribute name has colon?

Question

I'm trying to write a quick blurb of javascript to animate layers from the SVG files generated by Inkscape. Inkscape is nice enough to set the inkscape:groupmode attribute to "layer" for layer groups:

<g
   transform="translate(-12.681101,-9.7947913)"
   id="g2179"
   inkscape:groupmode="layer"
   inkscape:label="Frame 2"
   style="display:inline"
>

So I wrote a little script to find all those nodes, hide them, and then show them one by one in a loop with a delay:

<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>

Where init() is called by onload on the svg element:

<svg onload="init()">

Unfortunately, the querySelectorAll call returns a layers array that's empty (alert shows '0'). I can query all the group elements by removing the attribute identifier, but that's not what I want.

How do I select just the elements that are layers?

Edit: Full example, this pops up "0" in Firefox 71.0, and Chrome 79.0.3945.79 on Linux:

<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>

You are looking for a g element not for a .g class. Change to "g[inkscape\\:groupmode='layer']", or just remove .g. — Ori Drori
– Ori Drori, Commented Dec 17, 2019 at 19:39
Good catch, will edit to fix. Unfortunately still not getting elements — gct
– gct, Commented Dec 17, 2019 at 19:41
Still doesn't work for me in Chrome or Firefox, I updated the question with a full code that's not working. — gct
– gct, Commented Dec 17, 2019 at 19:54
Again, I copied everything, pasted it in a new document (this one) and it alerts 1 in Chrome. Does this at least work for you, if you create a new HTML document and just paste this in it? — blex
– blex, Commented Dec 17, 2019 at 20:06

Alessandro Aguilar · Accepted Answer · 2019-12-17 20:43:15Z

3

You can't select get element by that type of querySelector, but you can try filtering, the G elements that you need

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

answered Dec 17, 2019 at 20:43

Alessandro Aguilar

4012 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

gct Over a year ago

That's basically what I just came up with too. Select all, then filter. Any idea why you can't select on the value of that attribute?

Alessandro Aguilar Over a year ago

HTML doesn't support XML namespaces, in this case inkscape is a namespace.

Collectives™ on Stack Overflow

Selecting elements by attribute in javascript, where attribute name has colon?

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related