[Problem rotating an SVG element on its center]

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!

[Problem rotating an SVG element on its center]

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?

[Problem rotating an SVG element on its center]

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!

[Problem rotating an SVG element on its center]

Hi sebzzzn 

 

welcome to GSAP forum ! 

 

pls make a Codepen Demo available for your questions : How to Create a CodePen Demo

Thanks @Diaco!

 

Here's the CodePen:

 

See the Pen pjJaBR by sebzzz (@sebzzz) on CodePen

[Problem rotating an SVG element on its center]

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