為什么CSS選擇器只設置第一個匹配的svg路徑

Question

我正在使用由兩條路徑組成的內聯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); }
}

js jsfiddle

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

觸發事件並執行動畫時，只有一個路徑變為綠色。 這里發生了什么？

Answer 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/