How can we improve the Microsoft Edge developer experience?

Support CSS Animation and Transition for SVG Properties on SVG Elements

Support CSS Animations and Transitions for SVG Properties on SVG Elements like:
stroke-dashoffset, stroke-dasharray, fill, stroke and so on.

Example Animation CSS that should work:

.svg {
animation:svg-animation 1.5s ease-in-out infinite;
}

@-webkit-keyframes svg-animation {
0% {
stroke-dasharray: 1, 50;
stroke-dashoffset: 0;
}
100% {
stroke-dasharray: 50, 150;
stroke-dashoffset: -100;
}
}

Currently this example is working in all browsers except in Edge.
I am not really sure if this is feature is SMIL, but since the animations are declared in CSS this shouldnt be really SMIL.

Would be nice to get some feedback.

Best regards,
Rene

306 votes
Vote
Sign in
Check!
(thinking…)
Reset
or sign in with
  • facebook
  • google
    Password icon
    Signed in as (Sign out)
    You have left! (?) (thinking…)
    Rene shared this idea  ·   ·  Flag idea as inappropriate…  ·  Admin →

    1 comment

    Sign in
    Check!
    (thinking…)
    Reset
    or sign in with
    • facebook
    • google
      Password icon
      Signed in as (Sign out)
      Submitting...
      • Rene commented  ·   ·  Flag as inappropriate

        By the way, the keyframes rule should also work without the -webkit- prefix or any other prefix.

      Feedback and Knowledge Base