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 Firefox does.

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

Negative values for the dash-offset property are often used to create a self-erasing effect. As you can see in the example below where 100.58 is the path's length, the curved line will draw itself from the first keyframe to the second one, and it will erase itself from the second keyframe to the third one. For this, we've used a negative value.

You can avoid the use of negative values for the dash-offset property if you replace them with multiples of the path's length. The example below is the same animation, but only with positive values:

Practically, we took the path's length and used multiples of it for the dash-offset property in this order:

x3 - x2 - x1

To make things easier, we've added a multiplier:


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