正確更改z索引以堆疊SVG

Question

我的問題是我怎樣才能堆疊通過間隔不斷變化的寬度和高度的SVG ？

說明：

一旦svg ＃1達到特定的寬度和高度，它將被重置為0並且應該是具有較高z-index那個。

SVG ＃2的z-index低於SVG ＃1， SVG ＃3的z-index低於SVG ＃2。

SVG ＃27的z-index低於SVG ＃26。 SVG ＃27達到特定高度后，它將重置，並且z-index應高於SVG ＃1

這應該通過間隔循環。

這是我當前的代碼，但我不知道上述場景的流程：

 function getRandomColor() { var letters = '0123456789ABCDEF'; var color = '#'; for (var i = 0; i < 6; i++) { color += letters[Math.floor(Math.random() * 16)]; } return color; } setInterval(myMethod, 10); function myMethod( ) { if(parseFloat(jQuery('.fs1').css('width'))>=5400){ jQuery('.fs1').css('width',0); jQuery('.fs1').css('height',0); jQuery('.fs1 path').attr('fill',getRandomColor()); } else{ jQuery('.fs1').css('width','+=2'); jQuery('.fs1').css('height','+=2'); } if(parseFloat(jQuery('.fs2').css('width'))>=5400){ jQuery('.fs2').css('width',0); jQuery('.fs2').css('height',0); jQuery('.fs2 path').attr('fill',getRandomColor()); } else{ jQuery('.fs2').css('width','+=2'); jQuery('.fs2').css('height','+=2'); } if(parseFloat(jQuery('.fs3').css('width'))>=5400){ jQuery('.fs3').css('width',0); jQuery('.fs3').css('height',0); jQuery('.fs3 path').attr('fill',getRandomColor()); } else{ jQuery('.fs3').css('width','+=2'); jQuery('.fs3').css('height','+=2'); } if(parseFloat(jQuery('.fs4').css('width'))>=5400){ jQuery('.fs4').css('width',0); jQuery('.fs4').css('height',0); jQuery('.fs4 path').attr('fill',getRandomColor()); } else{ jQuery('.fs4').css('width','+=2'); jQuery('.fs4').css('height','+=2'); } if(parseFloat(jQuery('.fs5').css('width'))>=5400){ jQuery('.fs5').css('width',0); jQuery('.fs5').css('height',0); jQuery('.fs5 path').attr('fill',getRandomColor()); } else{ jQuery('.fs5').css('width','+=2'); jQuery('.fs5').css('height','+=2'); } if(parseFloat(jQuery('.fs6').css('width'))>=5400){ jQuery('.fs6').css('width',0); jQuery('.fs6').css('height',0); jQuery('.fs6 path').attr('fill',getRandomColor()); } else{ jQuery('.fs6').css('width','+=2'); jQuery('.fs6').css('height','+=2'); } if(parseFloat(jQuery('.fs7').css('width'))>=5400){ jQuery('.fs7').css('width',0); jQuery('.fs7').css('height',0); jQuery('.fs7 path').attr('fill',getRandomColor()); } else{ jQuery('.fs7').css('width','+=2'); jQuery('.fs7').css('height','+=2'); } if(parseFloat(jQuery('.fs8').css('width'))>=5400){ jQuery('.fs8').css('width',0); jQuery('.fs8').css('height',0); jQuery('.fs8 path').attr('fill',getRandomColor()); } else{ jQuery('.fs8').css('width','+=2'); jQuery('.fs8').css('height','+=2'); } if(parseFloat(jQuery('.fs9').css('width'))>=5400){ jQuery('.fs9').css('width',0); jQuery('.fs9').css('height',0); jQuery('.fs9 path').attr('fill',getRandomColor()); } else{ jQuery('.fs9').css('width','+=2'); jQuery('.fs9').css('height','+=2'); } if(parseFloat(jQuery('.fs10').css('width'))>=5400){ jQuery('.fs10').css('width',0); jQuery('.fs10').css('height',0); jQuery('.fs10 path').attr('fill',getRandomColor()); } else{ jQuery('.fs10').css('width','+=2'); jQuery('.fs10').css('height','+=2'); } if(parseFloat(jQuery('.fs11').css('width'))>=5400){ jQuery('.fs11').css('width',0); jQuery('.fs11').css('height',0); jQuery('.fs11 path').attr('fill',getRandomColor()); } else{ jQuery('.fs11').css('width','+=2'); jQuery('.fs11').css('height','+=2'); } if(parseFloat(jQuery('.fs12').css('width'))>=5400){ jQuery('.fs12').css('width',0); jQuery('.fs12').css('height',0); jQuery('.fs12 path').attr('fill',getRandomColor()); } else{ jQuery('.fs12').css('width','+=2'); jQuery('.fs12').css('height','+=2'); } if(parseFloat(jQuery('.fs13').css('width'))>=5400){ jQuery('.fs13').css('width',0); jQuery('.fs13').css('height',0); jQuery('.fs13 path').attr('fill',getRandomColor()); } else{ jQuery('.fs13').css('width','+=2'); jQuery('.fs13').css('height','+=2'); } if(parseFloat(jQuery('.fs14').css('width'))>=5400){ jQuery('.fs14').css('width',0); jQuery('.fs14').css('height',0); jQuery('.fs14 path').attr('fill',getRandomColor()); } else{ jQuery('.fs14').css('width','+=2'); jQuery('.fs14').css('height','+=2'); } if(parseFloat(jQuery('.fs15').css('width'))>=5400){ jQuery('.fs15').css('width',0); jQuery('.fs15').css('height',0); jQuery('.fs15 path').attr('fill',getRandomColor()); } else{ jQuery('.fs15').css('width','+=2'); jQuery('.fs15').css('height','+=2'); } if(parseFloat(jQuery('.fs16').css('width'))>=5400){ jQuery('.fs16').css('width',0); jQuery('.fs16').css('height',0); jQuery('.fs16 path').attr('fill',getRandomColor()); } else{ jQuery('.fs16').css('width','+=2'); jQuery('.fs16').css('height','+=2'); } if(parseFloat(jQuery('.fs17').css('width'))>=5400){ jQuery('.fs17').css('width',0); jQuery('.fs17').css('height',0); jQuery('.fs17 path').attr('fill',getRandomColor()); } else{ jQuery('.fs17').css('width','+=2'); jQuery('.fs17').css('height','+=2'); } if(parseFloat(jQuery('.fs18').css('width'))>=5400){ jQuery('.fs18').css('width',0); jQuery('.fs18').css('height',0); jQuery('.fs18 path').attr('fill',getRandomColor()); } else{ jQuery('.fs18').css('width','+=2'); jQuery('.fs18').css('height','+=2'); } if(parseFloat(jQuery('.fs19').css('width'))>=5400){ jQuery('.fs19').css('width',0); jQuery('.fs19').css('height',0); jQuery('.fs19 path').attr('fill',getRandomColor()); } else{ jQuery('.fs19').css('width','+=2'); jQuery('.fs19').css('height','+=2'); } if(parseFloat(jQuery('.fs20').css('width'))>=5400){ jQuery('.fs20').css('width',0); jQuery('.fs20').css('height',0); jQuery('.fs20 path').attr('fill',getRandomColor()); } else{ jQuery('.fs20').css('width','+=2'); jQuery('.fs20').css('height','+=2'); } if(parseFloat(jQuery('.fs21').css('width'))>=5400){ jQuery('.fs21').css('width',0); jQuery('.fs21').css('height',0); jQuery('.fs21 path').attr('fill',getRandomColor()); } else{ jQuery('.fs21').css('width','+=2'); jQuery('.fs21').css('height','+=2'); } if(parseFloat(jQuery('.fs22').css('width'))>=5400){ jQuery('.fs22').css('width',0); jQuery('.fs22').css('height',0); jQuery('.fs22 path').attr('fill',getRandomColor()); } else{ jQuery('.fs22').css('width','+=2'); jQuery('.fs22').css('height','+=2'); } if(parseFloat(jQuery('.fs23').css('width'))>=5400){ jQuery('.fs23').css('width',0); jQuery('.fs23').css('height',0); jQuery('.fs23 path').attr('fill',getRandomColor()); } else{ jQuery('.fs23').css('width','+=2'); jQuery('.fs23').css('height','+=2'); } if(parseFloat(jQuery('.fs24').css('width'))>=5400){ jQuery('.fs24').css('width',0); jQuery('.fs24').css('height',0); jQuery('.fs24 path').attr('fill',getRandomColor()); } else{ jQuery('.fs24').css('width','+=2'); jQuery('.fs24').css('height','+=2'); } if(parseFloat(jQuery('.fs25').css('width'))>=5400){ jQuery('.fs25').css('width',0); jQuery('.fs25').css('height',0); jQuery('.fs25 path').attr('fill',getRandomColor()); } else{ jQuery('.fs25').css('width','+=2'); jQuery('.fs25').css('height','+=2'); } if(parseFloat(jQuery('.fs26').css('width'))>=5400){ jQuery('.fs26').css('width',0); jQuery('.fs26').css('height',0); jQuery('.fs26 path').attr('fill',getRandomColor()); } else{ jQuery('.fs26').css('width','+=2'); jQuery('.fs26').css('height','+=2'); } if(parseFloat(jQuery('.fs27').css('width'))>=5400){ jQuery('.fs27').css('width',0); jQuery('.fs27').css('height',0); jQuery('.fs27 path').attr('fill',getRandomColor()); } else{ jQuery('.fs27').css('width','+=2'); jQuery('.fs27').css('height','+=2'); } } 

 .heart-container { position: fixed; z-index: -999; width: 100%; height: 100%; left: 0; top: 0; } .rainbow { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); } .fs1 { width: 5200px; height: 5200px; z-index: 27; } .fs2 { width: 5000px; height: 5000px; z-index: 26; } .fs3 { width: 4800px; height: 4800px; z-index: 25; } .fs4 { width: 4600px; height: 4600px; z-index: 24; } .fs5 { width: 4400px; height: 4400px; z-index: 23; } .fs6 { width: 4200px; height: 4200px; z-index: 22; } .fs7 { width: 4000px; height: 4000px; z-index: 21; } .fs8 { width: 3800px; height: 3800px; z-index: 20; } .fs9 { width: 3600px; height: 3600px; z-index: 19; } .fs10 { width: 3400px; height: 3400px; z-index: 18; } .fs11 { width: 3200px; height: 3200px; z-index: 17; } .fs12 { width: 3000px; height: 3000px; z-index: 16; } .fs13 { width: 2800px; height: 2800px; z-index: 15; } .fs14 { width: 2600px; height: 2600px; z-index: 14; } .fs15 { width: 2400px; height: 2400px; z-index: 13; } .fs16 { width: 2200px; height: 2200px; z-index: 12; } .fs17 { width: 2000px; height: 2000px; z-index: 11; } .fs18 { width: 1800px; height: 1800px; z-index: 10; } .fs19 { width: 1600px; height: 1600px; z-index: 9; } .fs20 { width: 1400px; height: 1400px; z-index: 8; } .fs21 { width: 1200px; height: 1200px; z-index: 7; } .fs22 { width: 1000px; height: 1000px; z-index: 6; } .fs23 { width: 800px; height: 800px; z-index: 5; } .fs24 { width: 600px; height: 600px; z-index: 4; } .fs25 { width: 400px; height: 400px; z-index: 3; } .fs26 { width: 200px; height: 200px; z-index: 2; } .fs27 { width: 0px; height: 0px; z-index: 1; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> <div class="heart-container"> <svg class="rainbow fs1" viewBox="0 0 199.6 184.15"> <path fill="#4687BF" d="M146.69 0A52.9 52.9 0 0 0 99.8 28.37 52.92 52.92 0 0 0 0 52.91a53 53 0 0 0 .69 8.5C9.47 117.63 99.8 184.12 99.8 184.12s90.33-66.49 99.11-122.71a53 53 0 0 0 .69-8.5A52.91 52.91 0 0 0 146.69 0z"></path> </svg><svg class="rainbow fs2" viewBox="0 0 199.6 184.15"> <path fill="#4687BF" d="M146.69 0A52.9 52.9 0 0 0 99.8 28.37 52.92 52.92 0 0 0 0 52.91a53 53 0 0 0 .69 8.5C9.47 117.63 99.8 184.12 99.8 184.12s90.33-66.49 99.11-122.71a53 53 0 0 0 .69-8.5A52.91 52.91 0 0 0 146.69 0z"></path> </svg><svg class="rainbow fs3" viewBox="0 0 199.6 184.15"> <path fill="#4687BF" d="M146.69 0A52.9 52.9 0 0 0 99.8 28.37 52.92 52.92 0 0 0 0 52.91a53 53 0 0 0 .69 8.5C9.47 117.63 99.8 184.12 99.8 184.12s90.33-66.49 99.11-122.71a53 53 0 0 0 .69-8.5A52.91 52.91 0 0 0 146.69 0z"></path> </svg><svg class="rainbow fs4" viewBox="0 0 199.6 184.15"> <path fill="#4687BF" d="M146.69 0A52.9 52.9 0 0 0 99.8 28.37 52.92 52.92 0 0 0 0 52.91a53 53 0 0 0 .69 8.5C9.47 117.63 99.8 184.12 99.8 184.12s90.33-66.49 99.11-122.71a53 53 0 0 0 .69-8.5A52.91 52.91 0 0 0 146.69 0z"></path> </svg><svg class="rainbow fs5" viewBox="0 0 199.6 184.15"> <path fill="#4687BF" d="M146.69 0A52.9 52.9 0 0 0 99.8 28.37 52.92 52.92 0 0 0 0 52.91a53 53 0 0 0 .69 8.5C9.47 117.63 99.8 184.12 99.8 184.12s90.33-66.49 99.11-122.71a53 53 0 0 0 .69-8.5A52.91 52.91 0 0 0 146.69 0z"></path> </svg><svg class="rainbow fs6" viewBox="0 0 199.6 184.15"> <path fill="#4687BF" d="M146.69 0A52.9 52.9 0 0 0 99.8 28.37 52.92 52.92 0 0 0 0 52.91a53 53 0 0 0 .69 8.5C9.47 117.63 99.8 184.12 99.8 184.12s90.33-66.49 99.11-122.71a53 53 0 0 0 .69-8.5A52.91 52.91 0 0 0 146.69 0z"></path> </svg><svg class="rainbow fs7" viewBox="0 0 199.6 184.15"> <path fill="#4687BF" d="M146.69 0A52.9 52.9 0 0 0 99.8 28.37 52.92 52.92 0 0 0 0 52.91a53 53 0 0 0 .69 8.5C9.47 117.63 99.8 184.12 99.8 184.12s90.33-66.49 99.11-122.71a53 53 0 0 0 .69-8.5A52.91 52.91 0 0 0 146.69 0z"></path> </svg><svg class="rainbow fs8" viewBox="0 0 199.6 184.15"> <path fill="#4687BF" d="M146.69 0A52.9 52.9 0 0 0 99.8 28.37 52.92 52.92 0 0 0 0 52.91a53 53 0 0 0 .69 8.5C9.47 117.63 99.8 184.12 99.8 184.12s90.33-66.49 99.11-122.71a53 53 0 0 0 .69-8.5A52.91 52.91 0 0 0 146.69 0z"></path> </svg><svg class="rainbow fs9" viewBox="0 0 199.6 184.15"> <path fill="#4687BF" d="M146.69 0A52.9 52.9 0 0 0 99.8 28.37 52.92 52.92 0 0 0 0 52.91a53 53 0 0 0 .69 8.5C9.47 117.63 99.8 184.12 99.8 184.12s90.33-66.49 99.11-122.71a53 53 0 0 0 .69-8.5A52.91 52.91 0 0 0 146.69 0z"></path> </svg><svg class="rainbow fs10" viewBox="0 0 199.6 184.15"> <path fill="#4687BF" d="M146.69 0A52.9 52.9 0 0 0 99.8 28.37 52.92 52.92 0 0 0 0 52.91a53 53 0 0 0 .69 8.5C9.47 117.63 99.8 184.12 99.8 184.12s90.33-66.49 99.11-122.71a53 53 0 0 0 .69-8.5A52.91 52.91 0 0 0 146.69 0z"></path> </svg><svg class="rainbow fs11" viewBox="0 0 199.6 184.15"> <path fill="#4687BF" d="M146.69 0A52.9 52.9 0 0 0 99.8 28.37 52.92 52.92 0 0 0 0 52.91a53 53 0 0 0 .69 8.5C9.47 117.63 99.8 184.12 99.8 184.12s90.33-66.49 99.11-122.71a53 53 0 0 0 .69-8.5A52.91 52.91 0 0 0 146.69 0z"></path> </svg><svg class="rainbow fs12" viewBox="0 0 199.6 184.15"> <path fill="#4687BF" d="M146.69 0A52.9 52.9 0 0 0 99.8 28.37 52.92 52.92 0 0 0 0 52.91a53 53 0 0 0 .69 8.5C9.47 117.63 99.8 184.12 99.8 184.12s90.33-66.49 99.11-122.71a53 53 0 0 0 .69-8.5A52.91 52.91 0 0 0 146.69 0z"></path> </svg><svg class="rainbow fs13" viewBox="0 0 199.6 184.15"> <path fill="#4687BF" d="M146.69 0A52.9 52.9 0 0 0 99.8 28.37 52.92 52.92 0 0 0 0 52.91a53 53 0 0 0 .69 8.5C9.47 117.63 99.8 184.12 99.8 184.12s90.33-66.49 99.11-122.71a53 53 0 0 0 .69-8.5A52.91 52.91 0 0 0 146.69 0z"></path> </svg><svg class="rainbow fs14" viewBox="0 0 199.6 184.15"> <path fill="#4687BF" d="M146.69 0A52.9 52.9 0 0 0 99.8 28.37 52.92 52.92 0 0 0 0 52.91a53 53 0 0 0 .69 8.5C9.47 117.63 99.8 184.12 99.8 184.12s90.33-66.49 99.11-122.71a53 53 0 0 0 .69-8.5A52.91 52.91 0 0 0 146.69 0z"></path> </svg><svg class="rainbow fs15" viewBox="0 0 199.6 184.15"> <path fill="#4687BF" d="M146.69 0A52.9 52.9 0 0 0 99.8 28.37 52.92 52.92 0 0 0 0 52.91a53 53 0 0 0 .69 8.5C9.47 117.63 99.8 184.12 99.8 184.12s90.33-66.49 99.11-122.71a53 53 0 0 0 .69-8.5A52.91 52.91 0 0 0 146.69 0z"></path> </svg><svg class="rainbow fs16" viewBox="0 0 199.6 184.15"> <path fill="#4687BF" d="M146.69 0A52.9 52.9 0 0 0 99.8 28.37 52.92 52.92 0 0 0 0 52.91a53 53 0 0 0 .69 8.5C9.47 117.63 99.8 184.12 99.8 184.12s90.33-66.49 99.11-122.71a53 53 0 0 0 .69-8.5A52.91 52.91 0 0 0 146.69 0z"></path> </svg><svg class="rainbow fs17" viewBox="0 0 199.6 184.15"> <path fill="#4687BF" d="M146.69 0A52.9 52.9 0 0 0 99.8 28.37 52.92 52.92 0 0 0 0 52.91a53 53 0 0 0 .69 8.5C9.47 117.63 99.8 184.12 99.8 184.12s90.33-66.49 99.11-122.71a53 53 0 0 0 .69-8.5A52.91 52.91 0 0 0 146.69 0z"></path> </svg><svg class="rainbow fs18" viewBox="0 0 199.6 184.15"> <path fill="#4687BF" d="M146.69 0A52.9 52.9 0 0 0 99.8 28.37 52.92 52.92 0 0 0 0 52.91a53 53 0 0 0 .69 8.5C9.47 117.63 99.8 184.12 99.8 184.12s90.33-66.49 99.11-122.71a53 53 0 0 0 .69-8.5A52.91 52.91 0 0 0 146.69 0z"></path> </svg><svg class="rainbow fs19" viewBox="0 0 199.6 184.15"> <path fill="#4687BF" d="M146.69 0A52.9 52.9 0 0 0 99.8 28.37 52.92 52.92 0 0 0 0 52.91a53 53 0 0 0 .69 8.5C9.47 117.63 99.8 184.12 99.8 184.12s90.33-66.49 99.11-122.71a53 53 0 0 0 .69-8.5A52.91 52.91 0 0 0 146.69 0z"></path> </svg><svg class="rainbow fs20" viewBox="0 0 199.6 184.15"> <path fill="#4687BF" d="M146.69 0A52.9 52.9 0 0 0 99.8 28.37 52.92 52.92 0 0 0 0 52.91a53 53 0 0 0 .69 8.5C9.47 117.63 99.8 184.12 99.8 184.12s90.33-66.49 99.11-122.71a53 53 0 0 0 .69-8.5A52.91 52.91 0 0 0 146.69 0z"></path> </svg><svg class="rainbow fs21" viewBox="0 0 199.6 184.15"> <path fill="#4687BF" d="M146.69 0A52.9 52.9 0 0 0 99.8 28.37 52.92 52.92 0 0 0 0 52.91a53 53 0 0 0 .69 8.5C9.47 117.63 99.8 184.12 99.8 184.12s90.33-66.49 99.11-122.71a53 53 0 0 0 .69-8.5A52.91 52.91 0 0 0 146.69 0z"></path> </svg><svg class="rainbow fs22" viewBox="0 0 199.6 184.15"> <path fill="#4687BF" d="M146.69 0A52.9 52.9 0 0 0 99.8 28.37 52.92 52.92 0 0 0 0 52.91a53 53 0 0 0 .69 8.5C9.47 117.63 99.8 184.12 99.8 184.12s90.33-66.49 99.11-122.71a53 53 0 0 0 .69-8.5A52.91 52.91 0 0 0 146.69 0z"></path> </svg><svg class="rainbow fs23" viewBox="0 0 199.6 184.15"> <path fill="#4687BF" d="M146.69 0A52.9 52.9 0 0 0 99.8 28.37 52.92 52.92 0 0 0 0 52.91a53 53 0 0 0 .69 8.5C9.47 117.63 99.8 184.12 99.8 184.12s90.33-66.49 99.11-122.71a53 53 0 0 0 .69-8.5A52.91 52.91 0 0 0 146.69 0z"></path> </svg><svg class="rainbow fs24" viewBox="0 0 199.6 184.15"> <path fill="#4687BF" d="M146.69 0A52.9 52.9 0 0 0 99.8 28.37 52.92 52.92 0 0 0 0 52.91a53 53 0 0 0 .69 8.5C9.47 117.63 99.8 184.12 99.8 184.12s90.33-66.49 99.11-122.71a53 53 0 0 0 .69-8.5A52.91 52.91 0 0 0 146.69 0z"></path> </svg><svg class="rainbow fs25" viewBox="0 0 199.6 184.15"> <path fill="#4687BF" d="M146.69 0A52.9 52.9 0 0 0 99.8 28.37 52.92 52.92 0 0 0 0 52.91a53 53 0 0 0 .69 8.5C9.47 117.63 99.8 184.12 99.8 184.12s90.33-66.49 99.11-122.71a53 53 0 0 0 .69-8.5A52.91 52.91 0 0 0 146.69 0z"></path> </svg><svg class="rainbow fs26" viewBox="0 0 199.6 184.15"> <path fill="#4687BF" d="M146.69 0A52.9 52.9 0 0 0 99.8 28.37 52.92 52.92 0 0 0 0 52.91a53 53 0 0 0 .69 8.5C9.47 117.63 99.8 184.12 99.8 184.12s90.33-66.49 99.11-122.71a53 53 0 0 0 .69-8.5A52.91 52.91 0 0 0 146.69 0z"></path> </svg><svg class="rainbow fs27" viewBox="0 0 199.6 184.15"> <path fill="#4687BF" d="M146.69 0A52.9 52.9 0 0 0 99.8 28.37 52.92 52.92 0 0 0 0 52.91a53 53 0 0 0 .69 8.5C9.47 117.63 99.8 184.12 99.8 184.12s90.33-66.49 99.11-122.71a53 53 0 0 0 .69-8.5A52.91 52.91 0 0 0 146.69 0z"></path> </svg> </div> 

https://codepen.io/anon/pen/EMMKKb

Answer 1

無法使用z-index堆疊SVG 。 使元素排在最前面的唯一方法是使元素排在文檔順序的最后。 當然，這可以通過jQuery的appendTo實現。

從這個問題中，我得出的結論是，您是在不斷不斷地“增長”重疊的心。 我已自由使用scale和requestAnimatioFrame而不是增加width和setInterval ，這兩者在性能和節省機器資源方面都更好。 我刪除了27個元素中的最后一個元素，將縮放比例除以25個元素的增量步驟要容易得多。 我已經自動執行了該過程，因此不必按樣式進行定義（除非您要創建備用）。

碼筆

 var ratio = {}, speed = 0.001; function getRandomColor() { var letters = '0123456789ABCDEF'; var color = '#'; for (var i = 0; i < 6; i++) { color += letters[Math.floor(Math.random() * 16)]; } return color; } $('.rainbow').each(function(index) { var mark = $(this).attr('class').split(' ').pop(); ratio[mark] = 1-index*0.04; $(this).css('transform', 'translate(-50%, -50%) scale(' + ratio[mark] + ')'); }); function myMethod() { $('.rainbow').each(function() { var item = $(this), size = this.getBoundingClientRect().width, tag = item.attr('class').split(' ').pop(); if (size > 5400) { ratio[tag] = 0; item.appendTo('.heart-container').find('path').attr('fill', getRandomColor()); } else ratio[tag] = ratio[tag]+speed; item.css('transform', 'translate(-50%, -50%) scale(' + ratio[tag] + ')'); }); requestAnimationFrame(myMethod); } requestAnimationFrame(myMethod); 

 .heart-container { position: fixed; width: 100%; height: 100%; } .rainbow { width: 5200px; height: 5200px; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="heart-container"> <svg class="rainbow fs1" viewBox="0 0 199.6 184.15"> <path fill="#4687BF" d="M146.69 0A52.9 52.9 0 0 0 99.8 28.37 52.92 52.92 0 0 0 0 52.91a53 53 0 0 0 .69 8.5C9.47 117.63 99.8 184.12 99.8 184.12s90.33-66.49 99.11-122.71a53 53 0 0 0 .69-8.5A52.91 52.91 0 0 0 146.69 0z"></path> </svg> <svg class="rainbow fs2" viewBox="0 0 199.6 184.15"> <path fill="#4687BF" d="M146.69 0A52.9 52.9 0 0 0 99.8 28.37 52.92 52.92 0 0 0 0 52.91a53 53 0 0 0 .69 8.5C9.47 117.63 99.8 184.12 99.8 184.12s90.33-66.49 99.11-122.71a53 53 0 0 0 .69-8.5A52.91 52.91 0 0 0 146.69 0z"></path> </svg> <svg class="rainbow fs3" viewBox="0 0 199.6 184.15"> <path fill="#4687BF" d="M146.69 0A52.9 52.9 0 0 0 99.8 28.37 52.92 52.92 0 0 0 0 52.91a53 53 0 0 0 .69 8.5C9.47 117.63 99.8 184.12 99.8 184.12s90.33-66.49 99.11-122.71a53 53 0 0 0 .69-8.5A52.91 52.91 0 0 0 146.69 0z"></path> </svg> <svg class="rainbow fs4" viewBox="0 0 199.6 184.15"> <path fill="#4687BF" d="M146.69 0A52.9 52.9 0 0 0 99.8 28.37 52.92 52.92 0 0 0 0 52.91a53 53 0 0 0 .69 8.5C9.47 117.63 99.8 184.12 99.8 184.12s90.33-66.49 99.11-122.71a53 53 0 0 0 .69-8.5A52.91 52.91 0 0 0 146.69 0z"></path> </svg> <svg class="rainbow fs5" viewBox="0 0 199.6 184.15"> <path fill="#4687BF" d="M146.69 0A52.9 52.9 0 0 0 99.8 28.37 52.92 52.92 0 0 0 0 52.91a53 53 0 0 0 .69 8.5C9.47 117.63 99.8 184.12 99.8 184.12s90.33-66.49 99.11-122.71a53 53 0 0 0 .69-8.5A52.91 52.91 0 0 0 146.69 0z"></path> </svg> <svg class="rainbow fs6" viewBox="0 0 199.6 184.15"> <path fill="#4687BF" d="M146.69 0A52.9 52.9 0 0 0 99.8 28.37 52.92 52.92 0 0 0 0 52.91a53 53 0 0 0 .69 8.5C9.47 117.63 99.8 184.12 99.8 184.12s90.33-66.49 99.11-122.71a53 53 0 0 0 .69-8.5A52.91 52.91 0 0 0 146.69 0z"></path> </svg> <svg class="rainbow fs7" viewBox="0 0 199.6 184.15"> <path fill="#4687BF" d="M146.69 0A52.9 52.9 0 0 0 99.8 28.37 52.92 52.92 0 0 0 0 52.91a53 53 0 0 0 .69 8.5C9.47 117.63 99.8 184.12 99.8 184.12s90.33-66.49 99.11-122.71a53 53 0 0 0 .69-8.5A52.91 52.91 0 0 0 146.69 0z"></path> </svg> <svg class="rainbow fs8" viewBox="0 0 199.6 184.15"> <path fill="#4687BF" d="M146.69 0A52.9 52.9 0 0 0 99.8 28.37 52.92 52.92 0 0 0 0 52.91a53 53 0 0 0 .69 8.5C9.47 117.63 99.8 184.12 99.8 184.12s90.33-66.49 99.11-122.71a53 53 0 0 0 .69-8.5A52.91 52.91 0 0 0 146.69 0z"></path> </svg> <svg class="rainbow fs9" viewBox="0 0 199.6 184.15"> <path fill="#4687BF" d="M146.69 0A52.9 52.9 0 0 0 99.8 28.37 52.92 52.92 0 0 0 0 52.91a53 53 0 0 0 .69 8.5C9.47 117.63 99.8 184.12 99.8 184.12s90.33-66.49 99.11-122.71a53 53 0 0 0 .69-8.5A52.91 52.91 0 0 0 146.69 0z"></path> </svg> <svg class="rainbow fs10" viewBox="0 0 199.6 184.15"> <path fill="#4687BF" d="M146.69 0A52.9 52.9 0 0 0 99.8 28.37 52.92 52.92 0 0 0 0 52.91a53 53 0 0 0 .69 8.5C9.47 117.63 99.8 184.12 99.8 184.12s90.33-66.49 99.11-122.71a53 53 0 0 0 .69-8.5A52.91 52.91 0 0 0 146.69 0z"></path> </svg> <svg class="rainbow fs11" viewBox="0 0 199.6 184.15"> <path fill="#4687BF" d="M146.69 0A52.9 52.9 0 0 0 99.8 28.37 52.92 52.92 0 0 0 0 52.91a53 53 0 0 0 .69 8.5C9.47 117.63 99.8 184.12 99.8 184.12s90.33-66.49 99.11-122.71a53 53 0 0 0 .69-8.5A52.91 52.91 0 0 0 146.69 0z"></path> </svg> <svg class="rainbow fs12" viewBox="0 0 199.6 184.15"> <path fill="#4687BF" d="M146.69 0A52.9 52.9 0 0 0 99.8 28.37 52.92 52.92 0 0 0 0 52.91a53 53 0 0 0 .69 8.5C9.47 117.63 99.8 184.12 99.8 184.12s90.33-66.49 99.11-122.71a53 53 0 0 0 .69-8.5A52.91 52.91 0 0 0 146.69 0z"></path> </svg> <svg class="rainbow fs13" viewBox="0 0 199.6 184.15"> <path fill="#4687BF" d="M146.69 0A52.9 52.9 0 0 0 99.8 28.37 52.92 52.92 0 0 0 0 52.91a53 53 0 0 0 .69 8.5C9.47 117.63 99.8 184.12 99.8 184.12s90.33-66.49 99.11-122.71a53 53 0 0 0 .69-8.5A52.91 52.91 0 0 0 146.69 0z"></path> </svg> <svg class="rainbow fs14" viewBox="0 0 199.6 184.15"> <path fill="#4687BF" d="M146.69 0A52.9 52.9 0 0 0 99.8 28.37 52.92 52.92 0 0 0 0 52.91a53 53 0 0 0 .69 8.5C9.47 117.63 99.8 184.12 99.8 184.12s90.33-66.49 99.11-122.71a53 53 0 0 0 .69-8.5A52.91 52.91 0 0 0 146.69 0z"></path> </svg> <svg class="rainbow fs15" viewBox="0 0 199.6 184.15"> <path fill="#4687BF" d="M146.69 0A52.9 52.9 0 0 0 99.8 28.37 52.92 52.92 0 0 0 0 52.91a53 53 0 0 0 .69 8.5C9.47 117.63 99.8 184.12 99.8 184.12s90.33-66.49 99.11-122.71a53 53 0 0 0 .69-8.5A52.91 52.91 0 0 0 146.69 0z"></path> </svg> <svg class="rainbow fs16" viewBox="0 0 199.6 184.15"> <path fill="#4687BF" d="M146.69 0A52.9 52.9 0 0 0 99.8 28.37 52.92 52.92 0 0 0 0 52.91a53 53 0 0 0 .69 8.5C9.47 117.63 99.8 184.12 99.8 184.12s90.33-66.49 99.11-122.71a53 53 0 0 0 .69-8.5A52.91 52.91 0 0 0 146.69 0z"></path> </svg> <svg class="rainbow fs17" viewBox="0 0 199.6 184.15"> <path fill="#4687BF" d="M146.69 0A52.9 52.9 0 0 0 99.8 28.37 52.92 52.92 0 0 0 0 52.91a53 53 0 0 0 .69 8.5C9.47 117.63 99.8 184.12 99.8 184.12s90.33-66.49 99.11-122.71a53 53 0 0 0 .69-8.5A52.91 52.91 0 0 0 146.69 0z"></path> </svg> <svg class="rainbow fs18" viewBox="0 0 199.6 184.15"> <path fill="#4687BF" d="M146.69 0A52.9 52.9 0 0 0 99.8 28.37 52.92 52.92 0 0 0 0 52.91a53 53 0 0 0 .69 8.5C9.47 117.63 99.8 184.12 99.8 184.12s90.33-66.49 99.11-122.71a53 53 0 0 0 .69-8.5A52.91 52.91 0 0 0 146.69 0z"></path> </svg> <svg class="rainbow fs19" viewBox="0 0 199.6 184.15"> <path fill="#4687BF" d="M146.69 0A52.9 52.9 0 0 0 99.8 28.37 52.92 52.92 0 0 0 0 52.91a53 53 0 0 0 .69 8.5C9.47 117.63 99.8 184.12 99.8 184.12s90.33-66.49 99.11-122.71a53 53 0 0 0 .69-8.5A52.91 52.91 0 0 0 146.69 0z"></path> </svg> <svg class="rainbow fs20" viewBox="0 0 199.6 184.15"> <path fill="#4687BF" d="M146.69 0A52.9 52.9 0 0 0 99.8 28.37 52.92 52.92 0 0 0 0 52.91a53 53 0 0 0 .69 8.5C9.47 117.63 99.8 184.12 99.8 184.12s90.33-66.49 99.11-122.71a53 53 0 0 0 .69-8.5A52.91 52.91 0 0 0 146.69 0z"></path> </svg> <svg class="rainbow fs21" viewBox="0 0 199.6 184.15"> <path fill="#4687BF" d="M146.69 0A52.9 52.9 0 0 0 99.8 28.37 52.92 52.92 0 0 0 0 52.91a53 53 0 0 0 .69 8.5C9.47 117.63 99.8 184.12 99.8 184.12s90.33-66.49 99.11-122.71a53 53 0 0 0 .69-8.5A52.91 52.91 0 0 0 146.69 0z"></path> </svg> <svg class="rainbow fs22" viewBox="0 0 199.6 184.15"> <path fill="#4687BF" d="M146.69 0A52.9 52.9 0 0 0 99.8 28.37 52.92 52.92 0 0 0 0 52.91a53 53 0 0 0 .69 8.5C9.47 117.63 99.8 184.12 99.8 184.12s90.33-66.49 99.11-122.71a53 53 0 0 0 .69-8.5A52.91 52.91 0 0 0 146.69 0z"></path> </svg> <svg class="rainbow fs23" viewBox="0 0 199.6 184.15"> <path fill="#4687BF" d="M146.69 0A52.9 52.9 0 0 0 99.8 28.37 52.92 52.92 0 0 0 0 52.91a53 53 0 0 0 .69 8.5C9.47 117.63 99.8 184.12 99.8 184.12s90.33-66.49 99.11-122.71a53 53 0 0 0 .69-8.5A52.91 52.91 0 0 0 146.69 0z"></path> </svg> <svg class="rainbow fs24" viewBox="0 0 199.6 184.15"> <path fill="#4687BF" d="M146.69 0A52.9 52.9 0 0 0 99.8 28.37 52.92 52.92 0 0 0 0 52.91a53 53 0 0 0 .69 8.5C9.47 117.63 99.8 184.12 99.8 184.12s90.33-66.49 99.11-122.71a53 53 0 0 0 .69-8.5A52.91 52.91 0 0 0 146.69 0z"></path> </svg> <svg class="rainbow fs25" viewBox="0 0 199.6 184.15"> <path fill="#4687BF" d="M146.69 0A52.9 52.9 0 0 0 99.8 28.37 52.92 52.92 0 0 0 0 52.91a53 53 0 0 0 .69 8.5C9.47 117.63 99.8 184.12 99.8 184.12s90.33-66.49 99.11-122.71a53 53 0 0 0 .69-8.5A52.91 52.91 0 0 0 146.69 0z"></path> </svg> <svg class="rainbow fs26" viewBox="0 0 199.6 184.15"> <path fill="#4687BF" d="M146.69 0A52.9 52.9 0 0 0 99.8 28.37 52.92 52.92 0 0 0 0 52.91a53 53 0 0 0 .69 8.5C9.47 117.63 99.8 184.12 99.8 184.12s90.33-66.49 99.11-122.71a53 53 0 0 0 .69-8.5A52.91 52.91 0 0 0 146.69 0z"></path> </svg> </div> 

我本來希望通過在每個元素上使用data屬性來跟蹤當前縮放比例，但是SVG當前也不支持。 因此，我在腳本中使用了一個名為ratio的對象，通過使用特定的類並存儲它們的瞬時scale來跟蹤。 否則，我會為此使用元素的初始索引順序，但是當使用appendTo時會改變。

增長速度可以設置在最高處。