Javascript 正确更改堆叠SVG的z索引

我的问题是如何堆叠通过间隔不断改变宽度和高度的

SVG

说明：

一旦svg#1达到特定的宽度和高度，它将被重置 到

0

，并且应该是具有更高

z指数的

SVG
#2的
z索引将低于
SVG
#1，
SVG
#3的
z索引将低于
SVG
#2

SVG
#27的
z索引将低于
SVG
#26。一旦SVG达到特定高度，它将重置，并且应该
高于SVG的z指数

这应该通过间隔进行循环

这是我当前的代码，但我不知道上面场景的流程：


函数getRandomColor（）{
变量字母='0123456789ABCDEF'；
var color='#'；
对于（变量i=0；i<6；i++）{
颜色+=字母[Math.floor（Math.random（）*16）]；
}
返回颜色；
}
设置间隔（myMethod，10）；
函数myMethod（）
{
if（parseFloat（jQuery（'.fs1'）.css（'width'））>=5400）{
jQuery（'.fs1'）.css（'width'，0）；
jQuery（'.fs1'）.css（'height'，0）；
jQuery（'.fs1 path'）.attr（'fill'，getRandomColor（））；
}
否则{
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（））；
}
否则{
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（））；
}
否则{
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（））；
}
否则{
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（））；
}
否则{
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（））；
}
否则{
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（））；
}
否则{
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（））；
}
否则{
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（））；
}
否则{
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（））；
}
否则{
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（））；
}
否则{
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（））；
}
否则{
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（））；
}
否则{
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（））；
}
否则{
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（））；
}
否则{
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（））；
}
否则{
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（））；
}
否则{
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（））；
}
否则{
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（））；
}
否则{
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（'.fs2