SVGAnimationElement: beginEvent 事件
SVGAnimationElement 接口的 beginEvent 事件在元素的本地时间线开始播放时触发。每次元素开始其活动持续时间（即，当它重新开始时，但不是重复时）都会引发此事件。
此事件可能在正常（即，计划或交互式）时间线播放过程中引发，也可能在元素通过 DOM 方法开始时引发。
此事件不可取消，也不会冒泡。
语法
在诸如 addEventListener() 之类的方法中使用事件名称，或设置事件处理程序属性。
js
addEventListener("beginEvent", (event) => { })
onbegin = (event) => { }
事件类型
事件属性
TimeEvent.detail只读-
一个
long，指定有关事件的一些详细信息，具体取决于事件的类型。对于此事件类型，表示动画的重复次数。 TimeEvent.view只读-
一个 WindowProxy，标识生成事件的窗口。
示例
动画圆
html
<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>
css
ul {
height: 100px;
border: 1px solid #dddddd;
overflow-y: scroll;
padding: 10px 30px;
}
js
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);
});
事件处理程序属性等效项
请注意，您也可以使用 onbegin 事件处理程序属性为 begin 事件创建事件监听器。
js
animateElem.onbegin = () => {
console.log("beginEvent fired");
};
规范
| 规范 |
|---|
| Scalable Vector Graphics (SVG) 2 # BeginEvent |
浏览器兼容性
加载中…