- From: Mahdi Hosseinzadeh via GitHub <sysbot+gh@w3.org>
- Date: Fri, 06 May 2022 10:41:30 +0000
- To: public-svg-issues@w3.org
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