如何隨機化背景顏色和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>