Javascript 如何堆叠2个svg路径并设置其动画？

我想通过用水填充圆圈并在圆圈内移动我的徽标来设置我的徽标动画。我有两个独立的svg路径。一个是水，第二个是我的标志。 当我试图把他们在div横幅动画我都得到动画，但标志是'看不见'。我试着添加z索引，但没用。 这是我的密码：

.logo{z-索引：1000； 位置：相对；} 横幅{ 边界半径：50%； 宽度：150px； 高度：150像素； 背景：b7c6ce； 溢出：隐藏； 背面可见性：隐藏； 变换：translate3d0，0，0； } 横幅，填充{ 动画名称：fillAction； 动画迭代次数：1； 动画计时功能：立方贝塞尔.2、.6、.8、.4； 动画持续时间：4s； 动画填充模式：正向； } 横幅波形{ 动画名称：waveAction； 动画迭代次数：无限； 动画计时功能：线性； 动画持续时间：0.5s； 宽度：300px； 高度：150像素； 填充：04ACFF； z指数：-1； } @关键帧填充动作{ 0% { 变换：translate0，150px； } 100% { 变换：translate0，-5px； } } @动作关键帧{ 0% { 变换：translate-150px，0； } 100% { 变换：translate0，0； } } 你有两个问题：

徽标位于SVG文件的第一个位置，因此它隐藏在蓝色的水后面。您需要移动它，使其位于水路之后

相对于其他任何东西，徽标都太大了，因此您需要对其进行缩放和移动，使其位于正确的位置并具有正确的大小。为此，我向徽标路径添加了一个变换：

transform="scale(0.3,0.3) translate(30,-30)"

通过这些更改，您可以获得更好的结果

.logo{z-索引：1000； 位置：相对；} 横幅{ 边界半径：50%； 宽度：150px； 高度：150像素； 背景：b7c6ce； 溢出：隐藏； 背面可见性：隐藏； 变换：translate3d0，0，0； } 横幅，填充{ 动画名称：fillAction； 动画迭代次数：1； 动画计时功能：立方贝塞尔.2、.6、.8、.4； 动画持续时间：4s； 动画填充模式：正向； } 横幅波形{ 动画名称：waveAction； 动画迭代次数：无限； 动画计时功能：线性； 动画持续时间：0.5s； 宽度：300px； 高度：150像素； 填充：04ACFF； z指数：-1； } @关键帧填充动作{ 0% { 变换：translate0，150px； } 100% { 变换：translate0，-5px； } } @动作关键帧{ 0% { 变换：translate-150px，0； } 100% { 变换：translate0，0； } }

---

对不起，如果我误解了，但是我在你的例子中找不到任何使用logo类的东西Hi Dale我会纠正的。我必须编辑另一个版本。@Dale_dale12不幸的是，在添加类之后仍然没有运气。是否可以将一个svg图像置于另一个svg图像之上，但以不同的方式设置它们的动画？谢谢@Paul LeBeau我对其进行了一些编辑，下面是最终结果