Вращение идентификатора загруженного svg через snap.svg

Question

У меня есть три группы кругов в файле svg (http://traaidmark.com/etc/svg-title-circle.svg), которые мне нужно повернуть отдельно. Я дал каждой группе кругов уникальный идентификатор.

Я хочу использовать snap svg, и до сих пор мне удалось загрузить SVG в мой контейнер (# svg-title).

Вот JS я использовал для загрузки изображения:

$(document).ready(function(){ 

    var s = Snap("#svg-title"); 
    Snap.load("http://traaidmark.com/etc/svg-title-circle.svg", onSVGLoaded) ; 

    function onSVGLoaded(data){ 
     s.append(data); 
    } 

}); 

Проблема я лицо в анимировать круги. Я пробовал использовать css, но это просто игнорируется. Я столкнулся с голубым лицом по лицу, и получил информацию о, но у меня мало опыта с этим, и я не уверен в применении этого. Документация и примеры оснастки не помогают облегчить мое замешательство.

Я подозреваю, что если я просто получу отправную точку, которая имеет смысл для меня, я смогу понять это!

Если кто-нибудь может помочь, даже с одним кругом, я буду навсегда благодарен. Я дал все имена классов и идентификаторов, насколько я понял.

Спасибо, ребята!

Answer 1

Вы можете разместить css внутри svg с тегом стиля. Я поместил эту анимацию в вашем SVG:

#svg-big-circle { 
    -webkit-animation:spin 4s linear infinite; 
    -moz-animation:spin 4s linear infinite; 
    animation:spin 4s linear infinite; 
    -webkit-transform-origin: 50% 50%; 
    -moz-transform-origin: 50% 50%; 
    transform-origin: 50% 50%; 
} 

@-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } } 
@-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } } 
@keyframes spin { 100% { transform: rotate(360deg); } } 

И это, кажется, работает: jsFiddle. Ваш маленький круг не квадрат, поэтому он не вращается в центре.