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

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

Answer 2

As above, negative values don‘t work for stroke-dashoffset. If you shift your values to positive numbers this should work (you’ll need to shift your initial value too):

.path2 {
  stroke-dasharray: 1500;
}

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

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