Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
sebzzzn

Problem rotating an SVG element on its center

Recommended Posts

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

Link to comment
Share on other sites

for next time pls provide Simple demo as Possible ,

 

I'm not surprised , the problem come from your svg markup

 

pls remove all path tag with this className : .st39

  • Like 4
Link to comment
Share on other sites

for next time pls provide Simple demo as Possible ,

 

I'm not surprised , the problem come from your svg markup

 

pls remove all path tag with this className : .st39

Ahh, you're right-on. That fixes it. Thanks so much!

 

If you can let me know what these paths were and how I can look for them if it happens again? Is it illustrator that introduces problematic paths?

 

Thanks again!

Link to comment
Share on other sites

The problem is that you've got <path> elements that are...well...weird. They have a "move" command but then nothing else. So the browser reports the bounds of that path as starting at 0,0 of the SVG canvas. Here's a reduced test case:

<svg>
    <g id="walking-p">
        <circle class="st30" cx="111.1" cy="249.2" r="82.1"/>
        <path class="st39" d="M77.7,227.9"/> <!-- PROBLEM! -->
    </g>
</svg>

Now try asking the browser for that <g> element's bounds:

console.log(document.getElementById("walking-p").getBBox());

Now remove that funky <path> (which really isn't visible anyway) and run that JavaScript again. Big difference, right? 

 

So technically GSAP was doing its job and spinning things around its center according to how the browser was reporting it.

 

Make more sense now? 

  • Like 4
Link to comment
Share on other sites

The problem is that you've got <path> elements that are...well...weird. They have a "move" command but then nothing else. So the browser reports the bounds of that path as starting at 0,0 of the SVG canvas. Here's a reduced test case:

<svg>
    <g id="walking-p">
        <circle class="st30" cx="111.1" cy="249.2" r="82.1"/>
        <path class="st39" d="M77.7,227.9"/> <!-- PROBLEM! -->
    </g>
</svg>
Now try asking the browser for that <g> element's bounds:

console.log(document.getElementById("walking-p").getBBox());
Now remove that funky <path> (which really isn't visible anyway) and run that JavaScript again. Big difference, right? 

 

So technically GSAP was doing its job and spinning things around its center according to how the browser was reporting it.

 

Make more sense now?

 

Thanks for the answer Jack! Makes a lot of sense. I wonder how these paths got in there in the first place and if it was introduced from the designer who worked on the file or illustrator itself doing something weird to it. I'm wondering also if there's an easy way to spot that quickly in the future if it happens. I guess look for paths that have move commands and nothing else?

Link to comment
Share on other sites

Yeah, here's a quick crack at it:

function killFunkySVG() {
    var funkySVGExp = /[achlmrqstv]/ig,
        paths = document.querySelectorAll("path"),
        i = paths.length,
        commands;

    while (--i > -1) {
        commands = (paths[i].getAttribute("d") + "").match(funkySVGExp);
        if (commands && commands.length < 2) {
            console.log("found bad path: ", paths[i]);
            paths[i].parentNode.removeChild(paths[i]);
        }
    }
}
killFunkySVG();

When you run that function first, it should dump any paths that have only one command in them. Does that help at all? 

  • Like 4
Link to comment
Share on other sites

Yeah, here's a quick crack at it:

 

 

function killFunkySVG() {
    var funkySVGExp = /[achlmrqstv]/ig,
        paths = document.querySelectorAll("path"),
        i = paths.length,
        commands;

    while (--i > -1) {
        commands = (paths[i].getAttribute("d") + "").match(funkySVGExp);
        if (commands && commands.length < 2) {
            console.log("found bad path: ", paths[i]);
            paths[i].parentNode.removeChild(paths[i]);
        }
    }
}
killFunkySVG();
When you run that function first, it should dump any paths that have only one command in them. Does that help at all?

 

Yes, that is super helpful, thanks so much Jack!

Link to comment
Share on other sites

Jack .. that killFunkySVG() function is the biscuits and gravy! All one command paths have been put on notice! :)

  • Like 2
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×