为什么 CSS 选择器只设置第一个匹配 svg 路径的样式

Why does CSS selector only style first matching svg path

本文关键字：svg 路径 样式 第一个 CSS 选择器 设置 为什么      更新时间：2023-09-26

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

斯菲德尔

.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，它们应该在单击时将路径的颜色从白色动画化为绿色。

斯菲德尔

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

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

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/

相关文章：