I've been trying to scale my logo on my website so it fills the background. The idea is that the whole browser viewport should "dive" into the center of the logo. To do this I made an SVG file of the logo and included jQuery SVG in my site.
I've begun to get the hang of jQuery SVG animation, but I can't get the whole thing to scale from the center. While researching I came across the idea that one should translate the SVG as it scales, but I haven't quite figured out the algorithm or how to use it with jQuery animate.
If someone can provide an answer I'd be most grateful.
The project is located here (along with the current state of the animation): http://danieldunderfelt.com
This is really just a CSS problem. In the beginning, you're using
position: absolute;
top: 50%;
left: 50%;
margin: -60px 0 0 -50px;
to center the section containing the little svg. That's the old classic negative margin trick.
The problem is, when you scale the svg up, you also need to way increase the negative margins, to half of the new (larger) height and width, which you haven't done yet. Either that, or animate the top value to zero so it isn't pushing things down. It's not an svg-specific problem. You need to animate both the scale of your element and the css values that are positioning it on the page. Right now you're only doing the first.
I would suggest using margin: auto for the horizontal centering of your section. Save yourself some work. Then set both the top and the top-margin so that things are where you want them at the end of the animation.
P.S. I'm not sure you need jquery-svg for any of this. Just write the svg inline in markup, and use jquery animate() for your animated css change.