Properly changing the z-index for stacking SVG

问题: My question is how I can stack SVG which are constantly changing width and height via interval? Explanation: Once svg #1 reaches a specific width and height, it will be...

问题:

My question is how I can stack SVG which are constantly changing width and height via interval?

Explanation:

Once svg #1 reaches a specific width and height, it will be reset to 0 and should be the one with a higher z-index.

SVG #2 will have a lower z-index than SVG #1, SVG #3 will have a lower z-index than SVG #2.

SVG #27 will have a lower z-index than SVG #26. Once SVG #27 reached a specific height, it will reset and should have higher z-index than SVG #1

This should loop via interval.

This is my current code but I don't know the flow of the scenario above:

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


回答1:

It's not possible to stack SVG using z-index. The only approach to get an element to be on top is to make it last in the document order. That is possible with jQuery's appendTo of course.

From the question I concluded that you were after a continous flow of "growing" overlapping hearts. I've taken the liberty to use scale and requestAnimatioFrame instead of increasing the width and setInterval, both are much better for performance and sparing the machine resources. I removed the last of the 27 elements, it was a lot easier to divide scaling by incremental steps of 25 elements. I've automated the process so it doesn't have to be defined in the style (unless you want to create a fallback).

Codepen

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>

I would have preferred to keep track of the current scaling by using a data attribute on each element but that is not currently supported for SVG either. So I've used an object named ratio in the script to keep track by using the specific classes and storing their momentary scale. I would otherwise have used the order of the initial indexing of the elements for this but that changes when using appendTo.

The speed of growth can be set at the top.

  • 发表于 2019-03-27 18:08
  • 阅读 ( 229 )
  • 分类:sof

条评论

请先 登录 后评论
不写代码的码农
小编

篇文章

作家榜 »

  1. 小编 文章
返回顶部
部分文章转自于网络,若有侵权请联系我们删除