Hey there!
I'm having an issue rotating an SVG element from its center. I know that it's one of GSAP's strengths to take care of the complexity behind transform-origin for SVGs and I never had this issue before.
Basically I have an infographic SVG that has 4 main circles with illustrations and I want to rotate them a bit on hover with this:
jQuery("g#weight-lifting-p, g#sprinting-p, g#cardio-p, g#walking-p").hover(
function() {
TweenMax.to(jQuery(this), 0.2, {rotation:15, transformOrigin:"50% 50%", ease:Back.easeOut});
},
function() {
TweenMax.to(jQuery(this), 0.2, {rotation: 0, transformOrigin:"50% 50%", ease:Back.easeOut});
}
);
The strangest thing is that it works for g#weight-lifting-p, g#sprinting-p, but the other 2 won't rotate from their center in Chrome and Safari. All 4 work perfectly in Firefox and I can't tell for IE because I don't have any way to test it there. They rotate with a transform-origin that's wrong.
It almost feel like something is wrong with my SVG that confuses GSAP or Chrome/Safari? I exported the SVG from Illustrator. I had a designer create it and it works with a legacy version of Illustrator, but I put the finishing touches and did the SVG export from the latest Illustrator CC. I tried exporting with different options, still no luck. I also looked into the SVG code around one shape that works fine and one that has issues, but everything seems consistent.
My SVG starts out like this
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 19.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 612 1010.4" style="enable-background:new 0 0 612 1010.4;" xml:space="preserve">
And I use jQuery to load the SVG like this:
jQuery( document ).ready(function() {
jQuery("#staging").load('http://paleoleap.com/infographics/exercise-infographic2.svg',function(response){
I'm not sure if I'm doing something wrong, but like I said it's the first time that this happens, because normally doing any transforms from a transform-origin of 50% 50% works like a charm with GSAP.
If anybody has any idea why this is happening I would greatly appreciate.
Seb