SVG stroke-dashoffset not working on safari

Question

Stroke-dashoffset is not working on safari even if I add -webkit- prefix. please help me. Thanks!....

Here is my sample code....

#path1 {
  stroke-dasharray: 500;
  -webkit-animation: dash 2s ease;
  animation: dash 2s ease;
  display:inline-block;
}
.path2 {
  stroke-dasharray: 500;
  -webkit-animation: dash 2s ease;
  animation: dash 2s ease;
  display:inline-block;
}

@keyframes dash {
  from {
  stroke-dashoffset: -500;
  }
}

@-webkit-keyframes dash {
  from {
  stroke-dashoffset: -500;
  }
}

Answer 1

It’s not that "Safari doesn't support negative `stroke-dashoffset", per the accepted answer. Safari is actually following the spec. Chrome, Firefox, etc are breaking with the spec, possibly because they realized the spec was poorly defined.

Here is the SVG spec's definition of stroke-dashoffset. Some things to note:

1. Positive stroke-dashoffset values do not march the dash line forward, from the start of the path to the end of the path: they move it backwards. This is because it's defined as "the distance into the dash pattern where the path starts", rather than "how far along the path the pattern starts" as you would think.
2. Negative stroke-dashoffset values do not march the dash line backward, exactly. That is, crossing over from > 0 to < 0 does not always continue the smooth march of dashes. The true behavior is peculiar✝ and appears unpredictable on the surface.

In short, dashoffset works nothing like you'd expect. And you should probably avoid negative values if at all possible to avoid confusion.

Solution

The common way to get around this is to just remove the negative sign and reverse the animation, which usually (possibly always?) should result in the desired effect:

#path {
  stroke-dasharray: 500;
  animation: dash 2s ease reverse;
}

@keyframes dash {
  from {
    stroke-dashoffset: 500;
  }
}

Discussion✝

I believe the confusion ultimately stems from ambiguity in this line in the spec:

where s is the sum of the dash array values.

Does "dash array values" mean the values provided by the user in the attribute? Or does it refer to the array of values after being processed, with odd-length arrays being repeated to yield even-length arrays (eg stroke-dasharray="10" becomes stroke-dasharray="10 10"). Safari seems to interpret it as the former, Chrome and Firefox the latter.

For example, with stroke-dasharray="10", the spec says stroke-dashoffset="-1" will look the same as stroke-dashoffset="9" per the spec. But in Chrome and Firefox, it will look the same as stroke-dashoffset="19". However, if you set stroke-dasharray="10 10", the spec seems to behave as you would hope.

Answer 2

Safari does not support negative stroke-dashoffset......