SVG CSS3 Animation with SVG saved from Illustrator

[th4d]

Hey all,

I’m working on animating some illustrations that were created by a teammate in Adobe Illustrator. Started working on the first one and I’m already running into some goofy issues.

I’ve saved the file from Illustrator using the default SVG settings. I am trying to spin a gear in the illustration. I initially had this working by saving a separate SVG file for the gear, but I would really like to keep everything together in one SVG file. What I’m seeing instead of the gear spinning in place, it spins around in a circle formation and I’m not sure why. I’ve tried using CSS3 animations and also the Snap.svg library and they produce the same result:

http://codepen.io/thadbloom/pen/lpBCq

If anyone has any ideas as to what might be causing this, I would greatly appreciate any feedback!

Thanks!

[Paulie_D]

#topGear {
    @include animation(spin 2s infinite linear);
        transform-origin:50% 50%;
}

http://codepen.io/Paulie-D/pen/trnpd

[th4d]

Aha!

Thanks Paulie, I was assuming that there was something wrong in my SVG file.

[Paulie_D]

I admit I’m not sure if those values will work generally…but I think so.

Try another and see. :)

EDIT – apparently they do

http://codepen.io/Paulie-D/pen/xljnq

[Author]

Posts