Animate SVG with CSS

[ghost]

It would be useful to be able to animate SVG properties (like stroke-dashoffset) with CSS keyframe animations. This is already supported by Chrome and Firefox and there are quite a few "how to get this working in IE" questions on Stack Overflow (1, 2, 3).

Simple test case

For the first square, I'm animating stroke-dashoffset with CSS. For the second one, I'm animating it by updating its value on each display refresh.

[martinpesout]

I'm solving the same problem. And it seems that is not possible to do in IEs.

http://caniuse.com/#feat=svg-smil

[molant]

@martinpesout You are talking about different technologies. SMIL is not planned at the moment but we've already shipped a first approach to CSS Animations for SVG elements in the latest preview

[martinpesout]

Ok thanks for your answer. And sorry for my confusion about SMIL.

It's good to see that this feature is already planned. I'm looking at your link and I cannot see for what version of IE is this planned? Is it for IE11 or is it already for the new Spartan browser? Thanks

[molant]

It is for Project Spartan

[mcat]

It looks like the simple test case http://codepen.io/thebabydino/pen/IBiCE/ isn't passing on 10240

But the Edge status page: https://dev.windows.com/en-us/microsoft-edge/platform/status/csstransitionsanimationsforsvgelements indicates CSS SVG animations are supported.

The issue is still open so I understand it to not be fixed but I'm confused as to why that status page seems to indicate that there is support.

[jonathansampson]

@mcat Adding explicit units to all of your values resolves the issue. Instead to 0px instead to 0.

rect {
  fill: transparent;
  stroke: black;
  stroke-dasharray: 10px;
}

.css {
  stroke-dashoffset: 60px;
  animation: ani 1s linear infinite;
}

@keyframes ani { to { stroke-dashoffset: 0px; } }

[jacobrossi]

This isn't the right forum for filing suggestions or bugs for Microsoft Edge. Please see uservoice.microsoftedge.com and connect.microsoft.com/ie

Thanks!