Javascript 如何在另一个SVGpath的两侧对齐SVG图像？

我正在尝试用HTML CSS和JS制作一个动画，蜜蜂可以带着蜂巢的一部分飞行。当我想让蜜蜂在蜂巢的两端时，问题来了（粉红色代表蜜蜂，其余部分代表蜂巢的一部分，这是为了理解而不是实际的标记。代码附在图片下方）因为我对每一个蜂巢都使用SVG，每一个蜂巢块都作为SVG路径，蜜蜂都是完整的SVG图像，我不知道如何显示两端都有蜜蜂的蜂巢块，所以我尝试使用display:flex；但它不起作用 谁能告诉我怎么做？代码是

下面是带有SVG元素的HTML和CSS，我已经对HTML中的每个蜂巢片段进行了评论

/*@导入url（'https://fonts.googleapis.com/css2?family=Roboto:wght@300；400；500；700；900&display=swap'）*/
*，：：之前，：：之后{
保证金：0；
填充：0；
框大小：边框框；
}
身体{
字体系列：Roboto；
}
/*.集装箱{
边框：2件纯黑；
填充：10px；
} */
.标题{
/*边框：2倍实心rgb（255,179,0）*/
宽度：100%；
填充：.5em.5em；
}
.标题包装{
显示器：flex；
对齐项目：居中；
证明内容：之间的空间；
填充：.5em 1.5em；
/*边框：2件纯蓝*/
宽度：90%；
保证金：自动；
}
.网站名称{
/*边框：2倍纯红*/
左边距：2米；
字号：2.3em；
字体大小：400；
}
.地盘业权范围{
字号：750；
颜色：#E47700；
}
.导航{
/*边框：2倍纯色品红*/
右边距：2米；
/*自对准：柔性端*/
宽度：45%；
}
美国海军{
显示器：flex；
列表样式：无；
字号：1.5em；
证明内容：之间的空间；
}
/*李国荣先生{
右边距：1.5em；
} */
李丽娜先生{
文字装饰：无；
颜色：黑色；
字号：500；
填充：6px；
}
.nav ul li a:悬停{
颜色：白色；
背景#FEBD33；
边界半径：50px；
过渡：放松；
}
/*用JS去做吧*/
.主动{
边界半径：50px；
背景色：#FEBD33；
颜色：白色；
填充：0 12px；
}
.英雄{
边框：2倍纯红；
高度：100vh；
字体系列：poppins；
}
.英雄包装{
/*边框：2件纯色热粉色*/
宽度：80%；
保证金：0自动；
边缘顶部：130像素；
显示器：flex；
证明内容：之间的空间；
对齐项目：居中；
}
.网站信息{
/*位置：相对位置；
顶部：155px；
左：10.9em*/
显示：内联块；
宽度：25em；
线高：28px；
/*边框：2件纯色丽贝卡紫色*/
}
.网站信息标题{
字号：3em；
/*边框：2件纯色丽贝卡紫色*/
}
.网站信息文本{
字体大小：25px；
字号：600；
边缘顶部：6px；
/*边框：2件纯色丽贝卡紫色*/
}
.站点信息btn{
字体大小：1.3em；
边界半径：50px；
填充：.3em.5em；
边界：无；
背景色：#33BC00；
颜色：白色；
边缘顶端：19像素；
/*边框：2件纯色丽贝卡紫色*/
}
.英雄蜂巢{
位置：相对位置；
顶部：0px；
左：0px；
/*右：1em*/
/*显示：内联块*/
宽度：300px；
高度：300px；
边框：2件纯色丽贝卡紫色；
}
svg{
边框：2倍纯红；
宽度：28.5em；
高度：25公分；
/*浮动：左*/
/*左边距：0*/
/*显示：内联块*/
位置：静态；
顶部：0px；
左：0；
/*溢出：隐藏*/
/*浮动：对*/
}
#b-peice-1、#b-peice-2、#b-peice-3
#b-peice-4、#b-peice-5、#b-peice-6、，
#b-peice-7{
变换：translateY（px）；
位置：绝对位置；
}
/*蜜蜂翅膀飞翔动漫*/
#小翼{
/*动画：小翅膀无限交替*/
动画：检查.09s无限交替；
/*动画名称：勾选；
动画持续时间：1s；
动画迭代次数：无限*/
/*变换：旋转（10度）*/
}
#大翼{
动画：检查.09s无限交替；
}
@关键帧检查{
0%{
变换：旋转（0度）；
}
50%{
变换：旋转（-3deg）；
}
100%{
变换：旋转（3deg）；
}
}
.蜜蜂{
显示器：flex；
变换：旋转（50度）；
宽度：250px；
}

文件

蜜蜂
嗡嗡声







蜜蜂
嗡嗡声
商标

我们提供纯净的水
森林蜜蜂和蜂蜜
保护我们的环境

阅读更多
height: 48
width: 344
x: 0
y: 288

<use xlink:href="#theBee" width="62.4" height="38.4" x="344" y="288" />