如何随机化背景颜色和svg

Question

我正在尝试创建一个基本着陆页，每次页面加载时都会随机化背景颜色，每次单击svg图标时也会更改。

到目前为止这个工作正常，但是有可能随机化图标的颜色而不仅仅是白色吗？我无法将svg的color属性集成到javascript中。这是我目前正在使用的代码：

$(function() {

  var randomColor = Math.floor(Math.random() * 16777215).toString(16);

  $("body").css({

    backgroundColor: '#' + randomColor

  });

  $("#colorcode").text("#" + randomColor);

});

var safeColors = ['00', '33', '66', '99', 'cc', 'ff'];
var rand = function() {
  return Math.floor(Math.random() * 6);
};
var randomColor = function() {
  var r = safeColors[rand()];
  var g = safeColors[rand()];
  var b = safeColors[rand()];
  return "#" + r + g + b;
};

$("body").css({

  backgroundColor: '#' + randomColor

});

$(document).ready(function() {
  $('#Layer_1').click(function() {
    $('body').each(function() {
      $(this).css('background', randomColor());
    });
  });
});

.cls-1 {
  fill: #fff;
}

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js">
</script>

<div style="width:400px; position:absolute; left:50%; top:50%; margin:-200px 0 0 -200px; cursor: pointer">
  <svg data-name="Layer 1" id="Layer_1" viewbox="0 0 400 400" xmlns="http://www.w3.org/2000/svg">
    <title>Artboard 1</title>
    <polygon class="cls-1" points="276 124 276 0 124 0 124 124 0 124 0 276 124 276 124 400 276 400 276 276 400 276 400 124 276 124"></polygon>
  </svg>

非常感谢你的帮助。我对Javascript很陌生，所以这对我来说是一个学习曲线。

Answer 1

您可以通过将fill CSS属性应用于svg元素（在您的情况下为polygon）

来更改svg的颜色

$('#Layer_1 polygon').css('fill', randomColor());

＆＃13;

＆＃13;

$(function() {
  var randomColor = Math.floor(Math.random() * 16777215).toString(16);
  $("body").css({
    backgroundColor: '#' + randomColor
  });
  $("#colorcode").text("#" + randomColor);
});

var safeColors = ['00', '33', '66', '99', 'cc', 'ff'];
var rand = function() {
  return Math.floor(Math.random() * 6);
};

var randomColor = function() {
  var r = safeColors[rand()];
  var g = safeColors[rand()];
  var b = safeColors[rand()];
  return "#" + r + g + b;
};

$("body").css({
  backgroundColor: '#' + randomColor
});

$(document).ready(function() {
  $('#Layer_1').click(function() {
      $('body').css('background', randomColor());
      $('#Layer_1 polygon').css('fill', randomColor());
  });
});

＆＃13;

#svgdiv {
  width: 400px;
  position: absolute;
  left: 50%;
  top: 50%;
  margin: -200px 0 0 -200px;
  cursor: pointer
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="svgdiv">
  <svg data-name="Layer 1" id="Layer_1" viewbox="0 0 400 400" xmlns="http://www.w3.org/2000/svg">
    <polygon class="cls-1" points="276 124 276 0 124 0 124 124 0 124 0 276 124 276 124 400 276 400 276 276 400 276 400 124 276 124"></polygon>
  </svg>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

当然，你也可以简化Jquery。

只需更改填充.cls-1

＆＃13;

＆＃13;

var safeColors = ['00', '33', '66', '99', 'cc', 'ff'];
var rand = function() {
  return Math.floor(Math.random() * 6);
};
var randomColor = function() {
  var r = safeColors[rand()];
  var g = safeColors[rand()];
  var b = safeColors[rand()];
  return "#" + r + g + b;
};

$(document).ready(function() {
  $('.cls-1').css('fill', randomColor());
  $('body').css('background', randomColor());
  $('#Layer_1').click(function() {
    $('.cls-1').css('fill', randomColor());
    $('body').css('background', randomColor());
  });
});

＆＃13;

.cross {
  width: 400px;
  position: absolute;
  left: 50%;
  top: 50%;
  margin: -200px 0 0 -200px;
  cursor: pointer;
}

＆＃13;

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js">
</script>

<div class="cross">
  <svg data-name="Layer 1" id="Layer_1" viewbox="0 0 400 400" xmlns="http://www.w3.org/2000/svg">
    <title>Artboard 1</title>
    <polygon class="cls-1" points="276 124 276 0 124 0 124 124 0 124 0 276 124 276 124 400 276 400 276 276 400 276 400 124 276 124"></polygon>
  </svg>

＆＃13;

＆＃13;

＆＃13;

Answer 3

您可以将svg图标定位为与背景相同，但您需要使用“填充”而不是“背景颜色” 尝试替换为：

$(document).ready(function() {
    $(".cls-1").css("fill",randomColor())
    $('#Layer_1').click(function() {
      $('body').each(function() {
        $(this).css('background',randomColor());
        $(".cls-1").css("fill",randomColor())
      });
    });
  });

Answer 4

最小的代码！尽情享受！

＆＃13;

＆＃13;

function changecolor() {
      var colors = ["red", "blue", "yellow"];
      Shuffle(colors);
        document.body.style.backgroundColor = colors[0];
    }
    function Shuffle(o) {
    	for(var j, x, i = o.length; i; j = parseInt(Math.random() * i), x = o[--i], o[i] = o[j], o[j] = x);
    	return o;
    };

＆＃13;

<body onload="changecolor()">
    <h1>Hello World!</h1>
</body>

＆＃13;

＆＃13;

＆＃13;