为什么 CSS 选择器仅样式首先匹配 svg 路径答案

【问题标题】：Why does CSS selector only style first matching svg path为什么 CSS 选择器仅样式首先匹配 svg 路径
【发布时间】：2014-12-30 16:01:35
【问题描述】：

我正在使用由两条路径组成的内联 SVG 元素。

jsfiddle

HTML：

<svg class="flag" width="22px" height="22px" viewBox="0 0 22 22" version="1.1"
     xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
       <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
           <g>
              <path class="flag-path" d="M7.46666667,6.6875 L7.46666667,17 L6,17 L6,6.6875 C6,6.30780664 6.32832708,6 6.73333333,6 C7.13833958,6 7.46666667,6.30780664 7.46666667,6.6875 Z" fill="rgba(255,255,255,0.8)"></path>
              <path class="flag-path" d="M14.8,7.85094336 C15.6761729,7.85094336 16.4625125,7.40383203 17,7.065625 L17,13.4646387 C16.4625125,13.8028672 15.6761729,14.25 14.8,14.25 C13.9238271,14.25 13.1374875,14.0064746 12.6,13.6682461 C12.0625125,13.330082 11.2761729,13.0865566 10.4,13.0865566 C9.52382708,13.0865566 8.73751042,13.5045996 8.2,13.8427637 L8.2,7.44375 C8.73751042,7.10554297 9.52382708,6.6875 10.4,6.6875 C11.2761729,6.6875 12.0625125,6.93100391 12.6,7.26921094 C13.1374875,7.60741797 13.9238271,7.85094336 14.8,7.85094336 L14.8,7.85094336 L14.8,7.85094336 Z" fill="rgba(255,255,255,0.8)"></path>
           </g>
       </g>
</svg>

我有一些 CSS 和 JS，它们应该在点击时将路径的颜色从白色变为绿色。

jsfiddle

.change-flag {
    animation: change-flag 750ms;
    fill: rgba(58,255,118,1);
}

@keyframes change-flag {
    from { fill: rgba(255,255,255,0.8) }
    to { fill: rgba(58,255,118,1); }
}

jsjsfiddle

var flagCircle = document.querySelector('.el');
var flag = document.querySelector('.flag-path');
var anywhere = document.querySelector('html');

var highlightFlag = function () {
    flagCircle.classList.toggle('change-circle');
    flag.classList.toggle('change-flag');
};

anywhere.addEventListener('click', highlightFlag, false);

当触发事件并执行动画时，只有一条路径变为绿色。这是怎么回事？

【问题讨论】：

标志是否返回路径数组？
@LiamSchauerman 错误，我不这么认为。应该吗？

标签： javascript css svg css-animations svg-animate

【解决方案1】：

document.querySelector 仅返回与给定选择器匹配的一个（第一个）元素。请改用document.querySelectorAll

var flagCircle = document.querySelector('.el');
var paths = document.querySelectorAll('.flag-path');
//...

var highlightFlag = function () {
    //...
    for (var i = 0, l = paths.length; i < l; i++) {
        paths[i].classList.toggle("change-flag");
    }
};

http://jsfiddle.net/pdpqg74t/

【讨论】：

我认为.querySelectorAll 创建了一个数组，然后您更改的另一段代码是遍历该数组，在每个数组上切换change-flag。对吗？
是的，但它不完全是一个数组，而是一个NodeList。它的作用类似于数组，但有一些区别（请参阅链接）。