Анимировать части SVG с CSS на hover

Question

У меня есть значок меню в svg, где я хочу, чтобы часть значка отображалась при наведении, а не на весь значок. Как настроить таргетинг на анимацию ключевого кадра при наведении курсора на значок?

У меня есть еще одно меню-значок, где я оживляющий всю икону на парении, но один я спрашиваю здесь нужно только одна часть его, чтобы двигаться ...

Answer 1

Вы можете предназначаться внутренние элементы SVG давая им идентификаторы, а затем вы можете выбрать их с помощью 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; 
}