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

    • In general, animations of such properties on SVG elements should work if units are added:

      .path {
        stroke-dasharray: 1000px;
        stroke-dashoffset: 1000px;
        animation: dash 5s linear alternate infinite;
      }
      
      @keyframes dash {
        from {
          stroke-dashoffset: 1000px;
        }
        to {
          stroke-dashoffset: 0px;
        }
      }
      

      In this particular case, the presence of the stroke-miterlimit attribute seems to be a problem as well, but all works fine when it’s removed (it’s useless for this shape anyway)

    • Accidentally sent that comment too soon - here’s a version of the linked demo that works in Edge https://codepen.io/thebabydino/pen/EpBpoW?editors=1100

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

    Sign in