How to make an SVG arrow flip that will work on all browsers?

[iamacatperson]

I am trying to make an arrow flip horizontally using SVGMorph... however, it doesn't look like it's flipping. I tried changing the ShapeIndex but there's none that will make the flip look natural.

 

Codepen: 

 

Is there a better technique to do an SVG flip that will work on all browsers?

See the Pen dGbOLZ by anon (@anon) on CodePen.

[Diaco]

Hi iamacatperson 

 

pls try shapeIndex:-1

 

btw , in this case you can have visually same tween with this :

TweenMax.to("#left",1,{scaleX:-1,transformOrigin:'100% 0%'}); // or transformOrigin:'right'

[Carl]

Diaco, is exactly right about using scale instead.

 

Using morphSVG please make sure to hide the right arrow like: http://codepen.io/GreenSock/pen/ZQzaZX