Javascript一次填充不同的svg形状答案

【问题标题】：Javascript fill different svg shapes at onceJavascript一次填充不同的svg形状
【发布时间】：2015-07-30 02:35:57
【问题描述】：

我正在寻找一种通过单击即可一次填充不同 svg 形状的解决方案。

Code is here

如您所见，有两个主要的 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() {

【问题讨论】：

也许给他们一个班级并在点击时填写班级？
问题是它是我完整项目的一部分，其中会有不同类型的完整形状和总共 148 个子形状......
在这里shrt.edu.pl/beta/teeth/svg6
如果您定位整个形状而不是子形状，您应该没问题 - 所以定位 svg 而不是路径。 jsfiddle.net/obtp73gw/6

标签： javascript jquery css svg

【解决方案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;
    }
}

【讨论】：

做得很好。有什么方法可以将完整形状或子形状中的哪些颜色着色，以及将哪些颜色传递给某种 javascript 数组？之后我想将信息传递给 PHP。
您可能希望传递一个类来设置每个元素而不是颜色（className 而不是style.fill）然后您可以使用document.querySelectorAll 来获取该类的所有元素和您将获得在 css 中设置填充颜色的好处。
如果最终版本有很多颜色是个好主意吗？在这里shrt.edu.pl/beta/teeth/svg6
其实你可能是对的......谢谢你的帮助:) 但是如果你有任何其他建议，我正在等待：P P.S.所以它会返回使用指定 css 类的 id？
如果你有很多颜色或者颜色不仅仅是风格，那么在css中设置它可能不是一个好主意。您始终可以同时设置颜色和类别，并对类别进行查询。我想您也可以只查询具有某种颜色的所有路径，document.querySelectorAll('path[style*="rgb(255, 0, 0)"]') 我不确定这是否可以在 ie 中使用

【解决方案2】：

你可以在this上用parentNode横穿父节点，然后在子节点上改变样式。

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

【讨论】：

【解决方案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;
  };

【讨论】：