Question

I have a portion of JavaScript in an HTML page that says:

function flashElements() {
    var svg = document.getElementById("mysvg").getSVGDocument();
    var all = svg.getElementsByTagName("flash");
    for (var i=0, max=all.length; i < max; i++) {
        if (all[i].flash === "on")
        {
            all[i].setAttributeNS(null, "fill", "lime");
        }
    }
}

with the SVG loaded as follows:

<object data="alpha.svg" type="image/svg+xml" id="mysvg" width="800" height="600"></object>

The idea is to call this on a particular trigger and, if any SVG elements have the particular attribute of “flash” then their fill attribute will change colour. Of course, the above doesn’t work – it’s looking for elements, not attributes. So how do I iterate through all the SVG elements, looking for anything with that particular attribute?

The SVG has:

<polygon points="203,20 209,32 205,32 203,28" class="trackPlain" flash="on" />
<polygon points="205,32 209,32 217,48 213,48" class="trackPlain" flash="off" />

Actually all I want to do is flash the elements (on/off) but of course IE doesn’t support animations.

Answer 1

Not very efficient, but I imagine you could do something like this:

var allElements = svg.getElementsByTagName("*");
for(var i = 0; i < allElements.length; i++) {
    var element = allElements[i];

    if(element.getAttribute("myAttr") === "on") {
        element.setAttribute("fill", "lime");
    }    
}

Your other option is to do a tree-traversal.