Svg animation is 2 different Length Firefox to Chrome

[odell]

Hows it going. This is my first post so hello. I came across this problem that I cant seem to fix on my own. Im animating SVG rect transform properties and the width of the rectangle is a different length on Firefox than it is on Chrome. I may have read incorrect but from what I understand, although not a full recommendation, they do support inline SVG transforms. If someone could take a quick look and give an explanation to what Im doing wrong or some solid references that would be greatly appreciated.  I made a quick codepen of just the logo. Everything is fine in codepen but not when I test it locally with Firefox.

 

Also I know I'd probably have much less trouble and this same animation can probably be achieved in a much more simple way  had I either gone the clip-path route or pseudo elements, but I was already pretty deep and figured I'd try and see this all the way through and if all fails then take the easy way out. Also any constructive criticism or suggestions please give. 

 

 

 

 

 

See the Pen PowJEZR#code-area by trendstar (@trendstar) on CodePen

[GreenSock]

Welcome to the forums, @odell

 

It looks like you've got an <svg> nested inside of an <svg> and some browsers apparently don't honor transforms applied to those. For example, if you try changing the translateX, Chrome won't do anything at all whereas Firefox will move it. I wouldn't recommend building your assets that way. I'd probably avoid nested <svg> elements. 

 

You'll also get better performance if you avoid units like rem (I noticed you used that a lot). px is fastest for SVG stuff. It's not "wrong" to use a different unit - I'm just offering a suggestion. 

 

svgOrigin can't be %-based either. It's always px-based. 

[odell]

Makes sense. Thanks.