SVGAnimationElement: repeatEvent event

在此页

范例
规范
浏览器兼容性
另请参阅
相关话题

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.

注意 : 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.

冒泡	No
可取消	No
接口	`TimeEvent`
事件处理程序特性	`onrepeat`

范例

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 事件处理程序特性：

animateElem.onrepeat = () => {
  console.log('repeatEvent fired');
}

规范

规范	状态	注释
Scalable Vector Graphics (SVG) 2 The definition of 'repeatEvent' in that specification.	候选推荐	初始定义

浏览器兼容性

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. 更新 GitHub 上的兼容性数据

	桌面						移动
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet
`repeatEvent` event	Chrome Yes	Edge 79	Firefox Yes	IE No	Opera Yes	Safari Yes	WebView Android Yes	Chrome Android Yes	Firefox Android ?	Opera Android ?	Safari iOS ?	Samsung Internet Android Yes

在此页

范例

Animated circle

Event handler property equivalent

规范

浏览器兼容性

图例

另请参阅

元数据

相关话题