Javascript fill different svg shapes at once

Question

I'm looking for a solution for filling different svg shapes at once with a single click.

Code is here

As you can see, there are two main svg shapes with some sub-shapes. What I want to do is to fill all the sub-shapes of one full-shape when I click only one of the sub-shapes. Every path has it's own ID, which is similar. In example case, it's 1_7-{b,p,d,m,o} and 1_6-{b,p,d,m,o}.

So if I click either b,p,d,m,o of 1_7, I want whole 1_7 turn red.

The only problem (I think) is that I don't know how to substract the info whether I have clicked 1_7 or 1_6 from this.id while the javascript function is executed.

I guess the whole thing would be added to

elem.onclick = function() {

Answer 1

I would suggest giving them a class or set of classes to identify them and fill all elements that match a selector (like '.1_7' or '.1_6'). Here's a function that could do that:

var fillBySelection = function(selector, color) {
    var elems = document.querySelectorAll(selector);
    for(var i=0; i<elems.length; i++) {
        elems[i].style.fill = color;
    }
}

If you keep the svg shapes defined as you have them, all siblings, you could fill all the siblings the same color. Here's a fiddle that does that.

The fillByChildren function would look like this, you'd pass it this.parentNode and a css color:

var fillChildren = function(element, color) {
    var children = element.children;
    for(var i=0; i<children.length; i++) {
        children[i].style.fill = color;
    }
}