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形状定义为你拥有它们，所有兄弟姐妹，你可以用相同的颜色填充所有兄弟姐妹。 Here's a fiddle that does that

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

Javascript一次填充不同的svg形状

3 个答案: