Javascript一次填充不同的svg形状

Question

我正在寻找一种解决方案，只需单击即可立即填充不同的svg形状。

代码就在这里

如您所见，有两种主要的svg形状，带有一些子形状。 我想要做的是当我只点击其中一个子形状时填充一个完整形状的所有子形状。 每条路径都有自己的ID，类似。 在示例情况下，它是1_7- {b，p，d，m，o}和1_6- {b，p，d，m，o}。

因此，如果我单击1，7中的b，p，d，m，o，我希望整个1_7变为红色。

唯一的问题（我认为）是我不知道如何减去信息是否在执行javascript函数时从this.id点击了1_7或1_6。

我想整个事情都会被添加到

elem.onclick = function() {

Answer 1

我建议给他们一个类或一组类来识别它们并填充与选择器匹配的所有元素（如'.1_7'或'.1_6'）。 这是一个可以做到这一点的功能：

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

如果保持svg形状定义为你拥有它们，所有兄弟姐妹，你可以用相同的颜色填充所有兄弟姐妹。 这是一个小提琴，这样做 。

fillByChildren函数看起来像这样，你将它传递给this.parentNode和一个css颜色：

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

Answer 2

您可以横向与父节点parentNode在this ，然后更改子节点的样式。

var forms = document.getElementsByTagName("path");

for (var a = 0; a < forms.length; a++) {
  var elem = forms[a];
  elem.onclick = function() {
    var nodes = this.parentNode.childNodes

    for(var n in nodes){
     if (nodes[n].tagName ==="path"){
       if (nodes[n].style.fill=='rgb(255, 0, 0)') {
        nodes[n].style.fill = '';
    } else {
        nodes[n].style.fill = 'red';
    }
     }
    }

    return false;
  };
}

Answer 3

你可以使用silblings。 我试过这个

JSFiddle elem.onclick = function（）{

        var first = this.parentNode.firstChild;
        var check = this.style.fill=='rgb(255, 0, 0)';
        for ( ; first; first = first.nextSibling ) {
            if ( first.nodeType === 1 ) {
                if (check) {
                first.style.fill = '';
                } else {
                first.style.fill = 'red';
            }
            }
        }
    return false;
  };