[svgwg] Provide ability to control animation direction for SVG animation elements (#881)

mahozad has just created a new issue for https://github.com/w3c/svgwg:

== Provide ability to control animation direction for SVG animation elements ==
### Spec: [SVG Animations Level 2](https://svgwg.org/specs/animations/)

When setting an animation to loop (repeat), using `repeatCount` for example, there is no way to:
  - Define how the looping should behave (start from the beginning, reverse, etc.)
  - Define the delay for the start of the next loop (different from the initial start delay)

In CSS, there is a property called [`animation-direction`](https://developer.mozilla.org/en-US/docs/Web/CSS/animation-direction)
which can be used to set the pattern of a repeating animation (`normal`, `alternate`, `reverse`, etc.).

Currently, the workaround for SVG animations requires us to define TWO separate animation elements like this:

```xml
<animate id="eclipse-anim-1" fill="freeze" attributeName="cx" to="20" dur="1000ms" begin="3s; eclipse-anim-2.end + 5s"/>
<animate id="eclipse-anim-2" fill="freeze" attributeName="cx" to="33" dur="1000ms" begin="eclipse-anim-1.end + 5s" />
```

See this related Stack Overflow post: [How to loop SVG animation sequence?](https://stackoverflow.com/q/3629987/8583692)

And here is an example animated SVG image using the workaround:

![icon](https://user-images.githubusercontent.com/29678011/167115379-2eff60bd-405d-420d-87b9-cee7057ab3fe.svg)


Please view or discuss this issue at https://github.com/w3c/svgwg/issues/881 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Friday, 6 May 2022 10:41:32 UTC