Spec-Zone.ru › SVG

конец

Атрибут end определяет конечное значение для анимации, которое может ограничивать активную продолжительность.

Вы можете использовать этот атрибут со следующими элементами SVG:

  • <animate>
  • <animateMotion>
  • <animateTransform>
  • <set>

Примечания по использованию

Значение по умолчанию Нет
Значение <end-value-list>
Анимируемо Нет

<end-value-list> представляет собой список значений, разделённых точкой с запятой. Каждое значение может быть одним из следующих:

<offset-value>

Это значение определяет значение-таймер, которое представляет точку во времени, относительную к началу документа SVG (обычно событие load или DOMContentLoaded). Отрицательные значения допустимы.

<syncbase-value>

Это значение определяет syncbase и необязательный смещение от этого syncbase. Время окончания анимации элемента определяется относительно начала или активного окончания другой анимации.

Допустимое значение syncbase состоит из ссылки на идентификатор другого элемента анимации, за которой следует точка и либо begin или end, чтобы определить, нужно ли синхронизироваться с началом или активным концом указанного элемента анимации. Необязательное значение смещения, как определено в <offset-value>, может быть добавленным.

<event-value>

Это значение определяет событие и необязательное смещение, которые определяют время окончания анимации элемента. Время окончания анимации определяется относительно времени срабатывания указанного события.

Допустимое значение event состоит из идентификатора элемента, за которым следует точка и одно из поддерживаемых событий для этого элемента. Все допустимые события (не обязательно поддерживаемые всеми элементами) определяются спецификациями DOM и HTML. К ним относятся:

  • focus
  • blur
  • focusin
  • focusout
  • activate
  • auxclick
  • click
  • dblclick
  • mousedown
  • mouseenter
  • mouseleave
  • mousemove
  • mouseout
  • mouseover
  • mouseup
  • wheel
  • beforeinput
  • input
  • keydown
  • keyup
  • compositionstart
  • compositionupdate
  • compositionend
  • load
  • unload
  • abort
  • error
  • select
  • resize
  • scroll
  • beginEvent
  • endEvent
  • repeatEvent

Необязательное значение смещения, как определено в <offset-value>, может быть добавленным.

<repeat-value>

Это значение определяет квалифицированное событие повтора. Время окончания анимации элемента определяется относительно момента, когда событие повтора активируется с указанным значением итерации.

Допустимое значение повтора состоит из идентификатора элемента, за которым следует точка и функции repeat(), где целое значение указывает количество повторений в качестве параметра. Необязательное значение смещения, как определено в <offset-value>, может быть добавленным.

<accessKey-value>

Это значение определяет клавишу доступа, которая должна активировать окончание анимации. Анимация элемента закончится, когда пользователь нажмёт указанную клавишу.

Допустимое значение accessKey состоит из функции accessKey(), где символом для ввода будет параметр. Необязательное значение смещения, как определено в <offset-value>, может быть добавленным.

<wallclock-sync-value>

Это значение определяет время окончания анимации как реальное время часов.

Допустимое значение wallclock-sync состоит из функции wallclock(), где значение времени будет параметром. Синтаксис времени основан на синтаксисе, определённом в ISO 8601.

indefinite

Окончание анимации будет определяться вызовом метода SVGAnimationElement.endElement().

Примеры

Пример смещения

html
<svg
  width="120"
  height="120"
  viewBox="0 0 120 120"
  xmlns="http://www.w3.org/2000/svg"
  version="1.1">
  <!-- animated rectangles -->
  <rect x="10" y="35" height="15" width="0">
    <animate
      attributeType="XML"
      attributeName="width"
      to="100"
      begin="0s"
      end="8s"
      fill="freeze" />
  </rect>

  <rect x="10" y="60" height="15" width="0">
    <animate
      attributeType="XML"
      attributeName="width"
      to="75"
      begin="0s"
      end="6s"
      fill="freeze" />
  </rect>

  <rect x="10" y="85" height="15" width="0">
    <animate
      attributeType="XML"
      attributeName="width"
      to="50"
      begin="0s"
      end="4s"
      fill="freeze" />
  </rect>

  <!-- grid -->
  <text x="10" y="20" text-anchor="middle">0s</text>
  <line x1="10" y1="25" x2="10" y2="105" stroke="grey" stroke-width=".5" />
  <text x="35" y="20" text-anchor="middle">2s</text>
  <line x1="35" y1="25" x2="35" y2="105" stroke="grey" stroke-width=".5" />
  <text x="60" y="20" text-anchor="middle">4s</text>
  <line x1="60" y1="25" x2="60" y2="105" stroke="grey" stroke-width=".5" />
  <text x="85" y="20" text-anchor="middle">6s</text>
  <line x1="85" y1="25" x2="85" y2="105" stroke="grey" stroke-width=".5" />
  <text x="110" y="20" text-anchor="middle">8s</text>
  <line x1="110" y1="25" x2="110" y2="105" stroke="grey" stroke-width=".5" />

  <line x1="10" y1="30" x2="110" y2="30" stroke="grey" stroke-width=".5" />
  <line x1="10" y1="105" x2="110" y2="105" stroke="grey" stroke-width=".5" />
</svg>

Пример события

html
<svg
  width="120"
  height="120"
  viewBox="0 0 120 120"
  xmlns="http://www.w3.org/2000/svg"
  version="1.1"
  xmlns:xlink="http://www.w3.org/1999/xlink">
  <!-- animated rectangle -->
  <rect x="10" y="35" height="15" width="0">
    <animate
      attributeType="XML"
      attributeName="width"
      from="0"
      to="100"
      begin="0s"
      end="endButton.click"
      dur="8s"
      repeatCount="indefinite"
      fill="freeze" />
  </rect>

  <!-- trigger -->
  <rect
    id="endButton"
    style="cursor:pointer;"
    x="19.5"
    y="62.5"
    rx="5"
    height="25"
    width="80"
    fill="#EFEFEF"
    stroke="black"
    stroke-width="1" />

  <text x="60" y="80" text-anchor="middle" style="pointer-events:none;">
    Click me.
  </text>

  <!-- grid -->
  <text x="10" y="20" text-anchor="middle">0s</text>
  <line x1="10" y1="25" x2="10" y2="55" stroke="grey" stroke-width=".5" />
  <text x="35" y="20" text-anchor="middle">2s</text>
  <line x1="35" y1="25" x2="35" y2="55" stroke="grey" stroke-width=".5" />
  <text x="60" y="20" text-anchor="middle">4s</text>
  <line x1="60" y1="25" x2="60" y2="55" stroke="grey" stroke-width=".5" />
  <text x="85" y="20" text-anchor="middle">6s</text>
  <line x1="85" y1="25" x2="85" y2="55" stroke="grey" stroke-width=".5" />
  <text x="110" y="20" text-anchor="middle">8s</text>
  <line x1="110" y1="25" x2="110" y2="55" stroke="grey" stroke-width=".5" />

  <line x1="10" y1="30" x2="110" y2="30" stroke="grey" stroke-width=".5" />
  <line x1="10" y1="55" x2="110" y2="55" stroke="grey" stroke-width=".5" />
</svg>

Пример accesskey

html
<svg
  width="120"
  height="120"
  viewBox="0 0 120 120"
  xmlns="http://www.w3.org/2000/svg"
  version="1.1"
  xmlns:xlink="http://www.w3.org/1999/xlink">
  <!-- animated rectangles -->
  <rect x="10" y="35" height="15" width="0">
    <animate
      attributeType="XML"
      attributeName="width"
      from="0"
      to="100"
      begin="0s"
      end="accessKey(e)"
      dur="8s"
      repeatCount="indefinite"
      fill="freeze" />
  </rect>

  <!-- trigger -->
  <text x="60" y="80" text-anchor="middle" style="pointer-events:none;">
    Hit the "s" key
  </text>

  <!-- grid -->
  <text x="10" y="20" text-anchor="middle">0s</text>
  <line x1="10" y1="25" x2="10" y2="55" stroke="grey" stroke-width=".5" />
  <text x="35" y="20" text-anchor="middle">2s</text>
  <line x1="35" y1="25" x2="35" y2="55" stroke="grey" stroke-width=".5" />
  <text x="60" y="20" text-anchor="middle">4s</text>
  <line x1="60" y1="25" x2="60" y2="55" stroke="grey" stroke-width=".5" />
  <text x="85" y="20" text-anchor="middle">6s</text>
  <line x1="85" y1="25" x2="85" y2="55" stroke="grey" stroke-width=".5" />
  <text x="110" y="20" text-anchor="middle">8s</text>
  <line x1="110" y1="25" x2="110" y2="55" stroke="grey" stroke-width=".5" />

  <line x1="10" y1="30" x2="110" y2="30" stroke="grey" stroke-width=".5" />
  <line x1="10" y1="55" x2="110" y2="55" stroke="grey" stroke-width=".5" />
</svg>

Этот пример встроен в iframe. Для активации событий клавиш, сначала необходимо нажать на него.

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

Спецификация
SVG Анимации Уровень 2
# EndAttribute

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

Spec-Zone.ru

Настройки Оффлайн Что нового Помощь О нас
Spec-Zone .ru
спецификации, руководства, описания, API