Unexpected SVG behavior on IE/Edge

[Ali Farooq 7 Likes (Newbie)]

Hello!

I'm trying to do a simple animation. In this animation the hour hand and the minute hand of the clock animates to mimic a clock.  Everything is working as expected in all browsers except Internet Explorer/ Egde (surprise surprise). The problem I'm facing is that Internet Explorer/ Edge is not honoring the transform origin property being applied on the hour and minute hand of the clock.

Anyone else faced a similar problem before? Oddly enough I've made many complex animations using GSAP but Internet Explorer never behaved like this.

See the Pen vepRVa by Ali_Farooq_ (@Ali_Farooq_) on CodePen

[PointC 8,599 Likes (Superhero)]

Hi @Ali Farooq

 

Please try it with svgOrigin instead. That should make IE/Edge behave. (I just eyeballed the coordinates so you may have to tweak them a bit)

 

clockTl.to(minuteHand, 5, { svgOrigin: "-151 292", rotation: "+=720" });
clockTl.to(hourHand, 5, { svgOrigin: "-151 292", rotation: "+=70" }, 0);

 

See the Pen NaXLgN by PointC (@PointC) on CodePen

Hopefully that helps. Happy tweening.

[Jonathan 5,176 Likes (Superhero)]

Hello @Ali Farooq and Welcome to the GreenSock Forum!

 

Seems @PointC beat me to the punch. So here is the svgOrigin docs reference:

 

CSSPlugin Docs - svgOrigin: https://greensock.com/docs/Plugins/CSSPlugin#svgOrigin

 

Happy Tweening

[Ali Farooq 7 Likes (Newbie)]

Thanks guys! didn't know about the svg origin property. This will definitely get me on the right track.

[GreenSock 8,117 Likes (Superhero)]

Yep, that looks like an odd Edge bug related to how it reports the getBBox() (the bounding box) of <line> elements. Of course the solution @PointC offered is excellent, or you could convert those <line> elements to <path> elements. In fact, if you've got MorphSVGPlugin, it'll automate that for you - simply call: 

 

MorphSVGPlugin.convertToPath("line");

 

But for lines, it's super easy to manually convert those coordinates. Just format it in the "d" attribute like  x1,y1,x2,y2 and slap an "M" at the beginning. Here's a forked version that seems to work fine for me in Edge:

 

See the Pen b967c0b3df2134e1ce1ca8c32322c4f1 by GreenSock (@GreenSock) on CodePen