Как вращать часть SVG?

Question

Я пытаюсь создать изображение SVG, где при наведении курсора на часть изображения он анимирует другие части изображения. Это гитарная педаль, которая, когда вы наводите на нее курсор, горит, и диски вращаются. Однако я не могу понять, как вращать диски, не снимая диски с педали. Любая помощь будет высоко ценится !!

Вот пример этого:

https://codepen.io/SHINZOC/pen/vYEaooM

    .lo { transition: .1s;}
    .lo:hover {opacity: 0;}
    #Light_off:hover + #Dials {
    transform: rotate(45deg);
    transform-origin: center center;
     }

Answer 1

Измените CSS на

.lo { transition: .1s;}
.lo:hover {opacity: 0;}
#Light_off:hover + #Dials {
transform: rotate(45deg);
transform-origin: center center;
transform-box:fill-box;
 }

, поскольку вы хотите вращаться вокруг поля заполнения, а не поля просмотра.