在悬停时使用CSS动画部分SVG

Question

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

我有另一个菜单图标，我在悬停时动画整个图标，但我在这里要求的只需要移动一部分......

Answer 1

您可以通过为内部svg元素提供ID来定位它们，然后您可以使用css选择它们。

我做了这个简短的小提示，以展示如何选择正确的元素。我没有包括关键帧，因为我不是一个带css的动画大师。

http://jsfiddle.net/Z6zKd/

<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>

的CSS：

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