Jump to content


Svg animation is 2 different Length Firefox to Chrome

Moderator Tag

Recommended Posts

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

Link to comment
Share on other sites

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. :)

  • 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.