svg animation

Path animation issues in Safari

Certain path animations might look different or even broken in Safari as it doesn’t translate negative values for animating paths as Chrome or Mozilla does.

You can fix this by avoiding the use of negative values for path animations.

Example using negative value:

In this case were used the following values for Offset keyframes:


The length (200.15) -to- 0 - this will animate the self draw.
0 -to- negative length (-200.15) - this will animate the self erase.
Set one keyframe for Dash to 200.15.


This is the case that will generate some issues in Safari for this path animation.

svg animation

The animation should look like this:

svg animation"

Example using positive value:

In this case were used the following values for Offset keyframes:
The length x 3 (600.45) -to- length x 2 (200.30) - this will animate the self draw.
length x 2 (400.30) -to- length (200.15) - this will animate the self erase.
Set one keyframe for Dash to 200.15.
This is the case that will work well in Safari too.

svg animation

The animation should look like this :

svg animation


Still got questions? Send us an email to contact@svgator.com and we will get back to you as soon as we can.