Jump to content

Search In
  • More options...
Find results that contain...
Find results in...

SVG Scale in Safari doesn't translate properly

Recommended Posts

Hey there,


I've got this SVG map of some counties. in it, I have some markers, that serve a purpose on a live site, however I can't seem to get the little markers to line up properly in Safari only. I pasted it into a codepen with minimal code, and see that it is indeed the case on my Safari, but not on either Firefox or Chrome. Can anyone help me get those lined up for Safari users?

See the Pen zaKexg by schnoodly (@schnoodly) on CodePen

Link to comment
Share on other sites

hmmm... I haven't done anything with <use> in quite some time as it can be a bit of pain. I'm seeing the same problem in Safari and MS Edge.  I'm not 100% sure why they behave that way, but it has nothing to do with GSAP. I'd highly recommend cloneNode so you have actual DOM elements instead of the shadow-root.


Here's a super simple demo with 4 symbols (just a circle) that should each scale from the center. It works fine in FF and Chrome, but Safari and Edge don't produce the expected results.


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

If you want to stay with symbols and <use>, I'd recommend setting a viewBox for your symbol and a width/height attribute on the clones. You could then animate the width and height instead of scale. That should work in all browsers. Something like this:


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


Here's a thread that may prove useful for you.

Hopefully that helps a bit. Happy tweening.



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