Как заставить случайную цветовую функцию, действующую на группы SVG, вызывать один и тот же цвет для всех элементов в группе - PullRequest
Новая
       8

Как заставить случайную цветовую функцию, действующую на группы SVG, вызывать один и тот же цвет для всех элементов в группе

1 голос
/ 15 мая 2019

У меня есть функция, которая создает случайный цвет.Я использую эту функцию в другой функции, чтобы вызвать цветовой щелчок группы svg.Проблема в том, что все элементы в группе получают случайный цвет, в то время как для всех элементов в группе это должен быть один случайный цвет.

Я попытался настроить функцию, вызывающую цвет.И мне не удается правильно настроить случайную функцию. 

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>

Я ожидаю, что все элементы в группе изменятся на один случайный цвет .`

Ответы [ 2 ]

2 голосов
/ 15 мая 2019

Вместо вызова 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>
0 голосов
/ 15 мая 2019 
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 один раз.

...