SVG animate the stroke-offset for css no work

Confirmed Issue #8507953

Details

Author
oscar m.
Created
Aug 16, 2016
Privacy
This issue is public.
Found in
  • Microsoft Edge
Found in build #
14.14901
Reports
Reported by 4 people

Sign in to watch or report this issue.

Steps to reproduce

http://codepen.io/chriscoyier/pen/bGyoz

.path {
stroke-dasharray: 1000;
stroke-dashoffset: 1000;
animation: dash 5s linear alternate infinite;
}

@keyframes dash {
from {
stroke-dashoffset: 1000;
}
to {
stroke-dashoffset: 0;
}
}

Attachments

0 attachments

    Comments and activity

    • Microsoft Edge Team

      Changed Assigned To to “Ibrahim O.”

      Changed Status to “Confirmed”

    • Thank you for your feedback. This is a known issue (CSS support on SVG elements - Not supported) and we are currently tracking down this issue in one of our internal bugs which is not publicly accessible. I will go ahead and close this bug as duplicate for now and as a status update this feature will be available in one of our future updates. 

      All the best,
      The MS Edge Team

    • This bug was reported nearly two years ago (and over two years ago here: https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/6493460/). I would kindly know when we can expect a fix for that.

      As of now it is not animatable and therefor still falsely clarified as such here: https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-dashoffset

    You need to sign in to your Microsoft account to add a comment.

    Sign in