在悬停状态下使用CSS设置SVG部分的动画

我在svg中有一个菜单图标，其中我希望图标的一部分在悬停时动画化，而不是整个图标。悬停图标时，如何使用关键帧动画设定目标

---

我有另一个菜单图标，我正在悬停时为整个图标设置动画，但我在这里问的那个图标只需要移动其中的一部分…

您可以通过给内部svg元素id来定位它们，然后您可以使用css来选择它们

我制作了这个小提琴来展示如何选择正确的元素。我没有包括关键帧，因为我不是css动画大师

<svg width="100px" height="100px">
   <rect id="rectangle" width="100px" height="100px" fill="#000"></rect>
   <rect x="30px" id="subrectangle" width="50px" height="50px" fill="#DDD"></rect>
</svg>

svg:hover #subrectangle{
   transform: rotate(60deg);
   transition: all 0.5s;
   fill: #FFF;
   left: 50px;
}