SVG Scale in Safari doesn't translate properly

[schnoodle]

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

[PointC]

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.