Путь внутри svg не вращается правильно

Question

Я хочу сделать простой эффект, когда путь SVG вращается внутри другого пути. Код просто:

#lens { 
animation: roll 2s infinite; 

    } 
    @keyframes roll { 
     0% {transform: rotate(0deg);} 
     100% {transform: rotate(360deg);} 
    } 

Идея заключается в том, чтобы сделать глаз, вращающийся вокруг оси, но вместо этого он продолжает вращаться вокруг всего SVG. Трудно объяснить, но вы поймете проблему, как только взглянете на этот шаблон jsfiddle: https://jsfiddle.net/faster223/6d45ck42/

Глаз должен оставаться неподвижным на одном месте при вращении.

Пожалуйста, помогите, пока я полностью не сломал себе голову.

Answer 1

Вам нужно добавить transform-origin: 50% 50%; в #lens так это выглядит следующим образом:

#lens { 
    animation: roll 2s infinite; 
    transform-origin: 50% 50%; 
} 
@keyframes roll { 
    0% {transform: rotate(0deg);} 
    100% {transform: rotate(360deg);} 
}