The repeatEvent
event of the SVGAnimationElement
interface is fired when the element's local timeline repeats. It will be fired each time the element repeats, after the first iteration.
Note: Associated with the repeatEvent
event is an integer that indicates which repeat iteration is beginning; this can be found in the detail
property of the event object. The value is a 0-based integer, but the repeat event is not raised for the first iteration and so the observed values will be >= 1. This is supported in Firefox, but not in Chrome.
Bubbles | No |
---|---|
Cancelable | No |
Interface | TimeEvent |
Event handler property | onrepeat |
Examples
Animated circle
<svg xmlns="http://www.w3.org/2000/svg" width="300px" height="100px"> <title>SVG SMIL Animate with Path</title> <circle cx="0" cy="50" r="50" fill="blue" stroke="black" stroke-width="1"> <animateMotion path="M 0 0 H 300 Z" dur="5s" repeatCount="indefinite" /> </circle> </svg> <hr> <ul> </ul>
ul { height: 100px; border: 1px solid #ddd; overflow-y: scroll; padding: 10px 30px; }
let svgElem = document.querySelector('svg'); let animateElem = document.querySelector('animateMotion'); let list = document.querySelector('ul'); animateElem.addEventListener('beginEvent', () => { let listItem = document.createElement('li'); listItem.textContent = 'beginEvent fired'; list.appendChild(listItem); }) animateElem.addEventListener('repeatEvent', (e) => { let listItem = document.createElement('li'); let msg = 'repeatEvent fired'; if(e.detail) { msg += '; repeat number: ' + e.detail; } listItem.textContent = msg; list.appendChild(listItem); })
Event handler property equivalent
Note that you can also create an event listener for the repeat
event using the onrepeat
event handler property:
animateElem.onrepeat = () => { console.log('repeatEvent fired'); }
Specifications
Specification | Status | Comment |
---|---|---|
Scalable Vector Graphics (SVG) 2 The definition of 'repeatEvent' in that specification. |
Candidate Recommendation | Initial definition |
Browser compatibility
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
repeatEvent event | Chrome Full support Yes | Edge Full support 79 | Firefox Full support Yes | IE No support No | Opera Full support Yes | Safari Full support Yes | WebView Android Full support Yes | Chrome Android Full support Yes | Firefox Android ? | Opera Android ? | Safari iOS ? | Samsung Internet Android Full support Yes |
Legend
- Full support
- Full support
- No support
- No support
- Compatibility unknown
- Compatibility unknown