Spec-Zone.ru › SVG

end

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

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

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

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

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

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

<offset-value>

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

<syncbase-value>

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

Допустимое значение 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().

Примеры

>

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

<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>

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

<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"
    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" 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>

Пример клавиши доступа

<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" 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–2025 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/end

Spec-Zone.ru

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