SVGAnimationElement: событие beginEvent

Событие beginEvent интерфейса SVGAnimationElement срабатывает, когда локальная временная шкала элемента начинает воспроизводиться. Оно будет генерироваться каждый раз, когда элемент начинает активную длительность (то есть при повторном запуске, но не при повторении).

Оно может срабатывать как во время нормального (т.е. запланированного или интерактивного) воспроизведения временной шкалы, так и в случае, если элемент был запущен с помощью метода DOM.

Это событие не отменяется и не распространяется.

Синтаксис

Используйте имя события в методах, таких как addEventListener(), или задайте обработчик события.

addEventListener("beginEvent", (event) => {});

onbegin = (event) => {};

Тип события

Тип TimeEvent. Наследуется от Event.

Свойства события

TimeEvent.detail Только для чтения: Значение, которое указывает некоторую детальную информацию о событии, зависящую от типа события. Для этого типа события указывает номер повторения анимации.
TimeEvent.view Только для чтения: Объект WindowProxy, идентифицирующий окно, из которого было сгенерировано событие.

Примеры

Анимированный круг

<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);
});

Эквивалент свойства обработчика события

Обратите внимание, что вы также можете создать обработчик события для события begin с помощью свойства обработчика события onbegin.

animateElem.onbegin = () => {
  console.log("beginEvent fired");
};

Спецификации

Спецификация
Scalable Vector Graphics (SVG) 2 # BeginEvent

Совместимость с браузерами

	Рабочие столы					Мобильные устройства
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox для Android	Opera Android	Safari на iOS	Samsung Internet	WebView Android
`beginEvent_event`	35 31–35 Свойство обработчика события `onbegin` не поддерживается.	79	93 6–93 Свойство обработчика события `onbegin` не поддерживается.	22 18–22 Свойство обработчика события `onbegin` не поддерживается.	10 Свойство обработчика события `onbegin` не поддерживается.	35 31–35 Свойство обработчика события `onbegin` не поддерживается.	93 6–93 Свойство обработчика события `onbegin` не поддерживается.	22 18–22 Свойство обработчика события `onbegin` не поддерживается.	10 Свойство обработчика события `onbegin` не поддерживается.	3.0 2.0–3.0 Свойство обработчика события `onbegin` не поддерживается.	37 4.4.3–37 Свойство обработчика события `onbegin` не поддерживается.

См. также

© 2005–2024 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/API/SVGAnimationElement/beginEvent_event