如何随机化背景颜色和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());

 $(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()); }); }); 

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

 <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> 

Answer 2

当然，你也可以简化Jquery。

只需要更改.cls-1的填充

 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()); }); }); 

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

 <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> 

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

最小的代码！享受吧！

 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; }; 

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