javascript - 正确更改 z-index 以堆叠 SVG-6ren

javascript - 正确更改 z-index 以堆叠 SVG

转载作者：行者123 更新时间：2023-11-28 19:29:37

我的问题是如何堆叠 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

最佳答案

无法使用 z-index 堆叠 SVG。使元素位于顶部的唯一方法是使其在文档顺序中排在最后。这当然可以通过 jQuery 的 appendTo 实现。

根据这个问题，我得出的结论是，您正在寻找不断“成长”的重叠心。我冒昧地使用了 scale 和 requestAnimatioFrame 而不是增加宽度和 setInterval，两者在性能和节省机器方面都更好资源。我删除了 27 个元素中的最后一个，按 25 个元素的增量步骤划分缩放比例要容易得多。我已经自动化了这个过程，所以它不必在样式中定义(除非你想创建一个后备)。

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>

我更愿意通过在每个元素上使用 data 属性来跟踪当前缩放，但 SVG 目前也不支持。因此，我在脚本中使用了一个名为 ratio 的对象，通过使用特定类并存储它们的瞬时 scale 来跟踪。否则我会为此使用元素的初始索引顺序，但在使用 appendTo 时会发生变化。

增长速度可以设置在顶部。

关于javascript - 正确更改 z-index 以堆叠 SVG，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/55332228/

文章推荐： Python设置为/usr/local/bin/python 如何设置为/usr/bin/python

javascript - AngularJS，Ng-repeat 更改/更改 Json 数组的顺序
SO亲爱的 friend 们: 2014 年 3 月 18 日。我正在处理一种情况，在使用 ng-repeat 时，数组内的元素(我从 Json 字符串中获取)更改了原始顺序。需要明确的是，数组中的
javascript - 更改 div 类 onclick --- 并*保存*更改
有很多问题询问如何在 JavaScript 单击处理程序中更改 div 的类，例如，此处:Change Div style onclick .我理解得很好(只需更改 .className)，并且它有效
java - 无法删除、更改、更改...列名称 'number of shares' 带空格
我从access导入了一个数据库到mysql，但其中一个表的列名“股数”带有空格，但我尝试更改、替换甚至删除列名，但失败了。任何人都可以帮助解决这一问题 String UpdateQuary = "U
javascript - iframe css src 更改，如果父 css src 更改
我正在做一个随机的学校元素。目前，我有一个包含两个 CSS 的页面。一种用于正常 View ，一种用于残障人士 View 。此页面还包括两个按钮，它们将更改使用的样式表。 function c
javascript - 更改
文本中的文本我会使用 javascript 更改
元素
我需要使用 javascript 更改 HTML 元素中的文本，但我不知道该怎么做。 ¿有什么帮助吗？我把它定义成这样: Text I want to change. 我正在尝试这样做: docum
javascript - 当我通过 Javascript 更改 ID 的 CSS 类时，我的 jQuery 导航栏没有反射(reflect)更改..？
我在它自己的文件 nav_bar.shtml 中有一个主导航栏，每个其他页面都包含该导航栏。这个菜单栏是一个 jQuery 菜单栏(ApyCom 是销售这些导航栏的公司的名称)。导航栏上的元素如何确定
更改 if 语句
我正在摆弄我的代码，并开始想知道这个变化是否来自: if(array[index] == 0) 对此: if(!array[index] != 0) 可能会影响任何代码，或者它只是做同样的事情而我不需
更改 Windows 控制台大小
我一直在想办法调整控制台窗口的大小。这是我正在使用的函数的代码: #include #include #define WIDTH 70 #define HEIGHT 35 HANDLE wHnd;
vba - 更改 IF 语句以提高效率
我有很多情况会导致相同的消息框警报。有没有比做几个 if 语句更简单/更好的解决方案？ PRODUCTS BOX1 BOX2 BOX3
c# - 更改/重命名命名空间前缀
我有一个包含这些元素的 XELEMENT B Bob Petier 19310227 1 我想像这样转换前缀。 B Bob Pet
mysql - 更改 where 子句的顺序会破坏查询
我使用 MySQL 5.6 遇到了这种情况: 此查询有效并返回预期结果: select * from some_table where a = 'b' and metadata->>"$.countr
r - 检测日期列格式的中断/更改
我想知道是否有人知道可以检测 R 中日期列格式的任何中断的包或函数，即检测日期向量格式更改的位置，例如: 11/2/90 12/2/90 . . . 15/Feb/1990 16/Feb/1990 .
更改 GtkButton 的标签
我希望能够在小部件显示后更改 GtkButton 的标签 char *ButtonStance == "Connect"; GtkWidget *EntryButton = gtk_button_ne
更改 C 中缓冲区的播放速率？
我正在使用 Altera DE2 FPGA 开发板并尝试使用 SD 卡端口和音频线路输出。我正在使用 VHDL 和 C 进行编程，但由于缺乏经验/知识，我在 C 部分遇到了困难。目前，我可以从 SD
java - 更改 JProgressBar
注意到这个链接后: http://www.newscientist.com/blogs/nstv/2010/12/best-videos-of-2010-progress-bar-illusion.h
Ansible:更改=0
我想知道在某些情况下，即使剧本任务已成功执行并且 ok=2，ansible 也会显示“changed=0”。使用 Rest API 和 uri 模块时会发生这种情况。我试图找到解释但没有成功。谁能告诉
iphone - 更改/删除远程通知上的按钮或按钮文本
这个问题已经有答案了: 已关闭12 年前。 Possible Duplicate: add buttons to push notification alert 是否可以在远程通知显示的警报框中指定有
iphone - 更改 "More"选项卡的导航栏颜色？
当您的 TabBarController 中有超过 5 个 View Controller 时，系统会自动为您设置一个“更多” View 。是否可以更改此 View 中导航栏的颜色以匹配我正在使用的颜
path - 更改.AndroidStudioBeta文件夹的位置
如何更改.AndroidStudioBeta文件夹的位置，默认情况下，该文件夹位于Windows中的\ .. \ User \ .AndroidStudioBeta，而不会破坏任何内容？ /编辑：找
Scala:收集不可变状态的更新/更改
我目前正在尝试将更具功能性的编程风格应用于涉及低级(基于 LWJGL)GUI 开发的项目。显然，在这种情况下，需要携带很多状态，这在当前版本中是可变的。我的目标是最终拥有一个完全不可变的状态，以避免状

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城