如何使作用于svg组的随机颜色函数为组中的所有元素调用相同的颜色

Question

我有一个创建随机颜色的函数。 我在另一个函数中使用此函数来调用svg组的颜色onclick。 问题在于组中的所有元素都具有一种随机颜色，而对于组中的所有元素而言，它应该是一种随机颜色。

我试过调整调用颜色的函数。 而且我无法适当地调整随机函数。

 function call1(){ const children = document.getElementById('btn1').children; for(let i = 0; i < children.length; i++ ){ children[i].setAttribute('fill',getRandomColor()); } } function getRandomColor() { var letters = '0123456789ABCDEF'; var color = '#'; for (var i = 0; i < 6; i++) { color += letters[Math.floor(Math.random() * 16)]; } return color; } function setRandomColor() { $("#colorpad").css("background-color", getRandomColor()); } 

 #svg-object{ height: 100vh; width: 100%; background-size: cover; background-position: center center; border: 15px antiquewhite; position: absolute; } 

 <?xml version="1.0" encoding="utf-8"?> <!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg id="svg-object" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="800px" height="754px" viewBox="0 0 800 754" enable- background="new 0 0 800 754" xml:space="preserve"> <g id="btn1" onclick="call1()"> <polygon fill="#FF0013" points="366.699,131 410,56 453.301,131 "/> <polygon fill="#07FF00" points="323.699,656 367,581 410.301,656 "/> <polygon fill="#0000FF" points="409.699,656 453,581 496.301,656 "/> <polygon points="366.699,581 410,656 453.301,581 "/> </g> </svg> 

我希望该组中的所有元素都可以更改为一种随机颜色.``

Answer 1

与其在循环内调用getRandomColor() ， getRandomColor()在循环内调用并设置一个变量。

 function call1() { const children = document.getElementById('btn1').children; let color = getRandomColor(); for (let i = 0; i < children.length; i++) { children[i].setAttribute('fill', color); } } function getRandomColor() { var letters = '0123456789ABCDEF'; var color = '#'; for (var i = 0; i < 6; i++) { color += letters[Math.floor(Math.random() * 16)]; } return color; } function setRandomColor() { $("#colorpad").css("background-color", getRandomColor()); } 

 #svg-object { height: 100vh; width: 100%; background-size: cover; background-position: center center; border: 15px antiquewhite; position: absolute; } 

 <?xml version="1.0" encoding="utf-8"?> <!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg id="svg-object" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="800px" height="754px" viewBox="0 0 800 754" enable- background="new 0 0 800 754" xml:space="preserve"> <g id="btn1" onclick="call1()"> <polygon fill="#FF0013" points="366.699,131 410,56 453.301,131"/> <polygon fill="#07FF00" points="323.699,656 367,581 410.301,656"/> <polygon fill="#0000FF" points="409.699,656 453,581 496.301,656"/> <polygon points="366.699,581 410,656 453.301,581"/> </g> </svg> 

Answer 2

function call1() {
  console.log('call1');
  const children = document.getElementById('btn1').children;
  var randomColor = getRandomColor();
  for (let i = 0; i < children.length; i++) {
    children[i].setAttribute('fill', randomColor);
  }
}

您的getRandomColor函数运行良好。
但是，对于所有元素，我们需要一次调用getRandomColor 。