Rotating an ID of a loaded svg through snap.svg

Question

I have three circle groups in an svg file (http://traaidmark.com/etc/svg-title-circle.svg) that I need to rotate individually. I have given each circle group an ID that is unique.

I want to use snap svg, and I have managed to so far load the SVG into my container (#svg-title).

Here is the JS I used to load the image:

$(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 );
    }

});

The trouble I face is in animating the circles. I tried using css, but that is simply ignored. I have googled myself blue in the face, and got some info, but I have very little experience with this and I'm unsure about applying this. The snap documentation and examples don't help to alleviate my confusion.

I suspect, if I just get a starting point that made sense to me, I would be able to figure it out!

If anyone can help, even just with a single circle, I would be forever grateful. I have given everything class and ID names as best I understood.

Thanks guys!

Answer 1

You can place css inside an svg with the style tag. I placed this animation in your 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); } }

And it seems to work: jsFiddle. Your small circle isn't squared so is doesn't rotate in the centre.