The beginEvent
event of the SVGAnimationElement
interface is fired when the element local timeline begins to play. It will be raised each time the element begins the active duration (i.e., when it restarts, but not when it repeats).
It may be raised both in the course of normal (i.e. scheduled or interactive) timeline play, as well as in the case that the element was begun with a DOM method.
Bubbles | No |
---|---|
Cancelable | No |
Interface | TimeEvent |
Event handler property | onbegin |
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 begin
event using the onbegin
event handler property:
animateElem.onbegin = () => { console.log('beginEvent fired'); }
Specifications
Specification | Status | Comment |
---|---|---|
Scalable Vector Graphics (SVG) 2 The definition of 'beginEvent' 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 | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
beginEvent 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