Question

我试图使用我在Codepen上找到的效果，改变SVG上的颜色。脚本上存在一个问题，即该效果仅影响第一个SVG而不影响页面上的其他SVG。

有任何帮助吗？感谢

＆＃13;

var select = function(s) {
    return document.querySelector(s);
};
var svgItem = select('svg');
var chars = '0123456789ABCDEF'.split('');

var randomColor = function () {
  var color = '#';
  for (var i = 0; i < 6; i++)
    color += chars[Math.floor(Math.random() * 16)];
  return color;
};

setInterval(function () {
  svgItem.style.fill = randomColor();
}, 1500);

＆＃13;

svg {
   fill: #000000;   
   transition: fill 1.5s ease;
   -webkit-transition: fill 1.5s ease;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<svg height="100" width="100">
<circle cx="40" cy="40" r="40"></circle>
</svg>


<svg height="100" width="100">
<circle cx="40" cy="40" r="40"></circle>
</svg>

＆＃13;

Answer 1

document.querySelector()仅返回找到的第一个元素。

尝试document.querySelectorAll()并迭代收到的列表。

var select = function(s) {
  return document.querySelectorAll(s);
};
var svgItems = select('svg');
var chars = '0123456789ABCDEF'.split('');

var randomColor = function () {
var color = '#';
for (var i = 0; i < 6; i++)
  color += chars[Math.floor(Math.random() * 16)];
  return color;
};

setInterval(function () {
  svgItems.forEach(item => {item.style.fill = randomColor();});
}, 1500);

Answer 2

使用querySelectorAll代替querySelector获取所有svg元素。querySelectorAll将提供数组，然后您可以使用index访问每个svg：

＆＃13;

var select = function(s) {
    return document.querySelectorAll(s);
};
var svgItem = select('svg');
var chars = '0123456789ABCDEF'.split('');

var randomColor = function () {
  var color = '#';
  for (var i = 0; i < 6; i++)
    color += chars[Math.floor(Math.random() * 16)];
  return color;
};

setInterval(function () {
   svgItem.forEach(function(svg) {
svg.style.fill = randomColor();});   
}, 1500);

＆＃13;

svg {
   fill: #000000;   
   transition: fill 1.5s ease;
   -webkit-transition: fill 1.5s ease;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<svg height="100" width="100">
<circle cx="40" cy="40" r="40"></circle>
</svg>


<svg height="100" width="100">
<circle cx="40" cy="40" r="40"></circle>
</svg>

＆＃13;

改变所有svg的颜色

2 个答案: