dur

Атрибут dur указывает простое время анимации.

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

Пример

html

<svg viewBox="0 0 220 150" xmlns="http://www.w3.org/2000/svg">
  <rect x="0" y="0" width="100" height="100">
    <animate
      attributeType="XML"
      attributeName="y"
      from="0"
      to="50"
      dur="1s"
      repeatCount="indefinite" />
  </rect>
  <rect x="120" y="0" width="100" height="100">
    <animate
      attributeType="XML"
      attributeName="y"
      from="0"
      to="50"
      dur="3s"
      repeatCount="indefinite" />
  </rect>
</svg>

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

Значение	`<clock-value>` \| `media` \| `indefinite`
Значение по умолчанию	`indefinite`
Анимируемо	Нет

<clock-value>: Это значение определяет длительность простого времени. Значение должно быть больше 0 и может быть выражено часами (h), минутами (m), секундами (s) или миллисекундами (ms). Можно комбинировать эти представления времени для создания сложных продолжительностей, таких как hh:mm:ss.iii или mm:ss.iii.
media: Это значение задаёт простое время как внутреннюю продолжительность медиаданных. Это допустимо только для элементов, которые определяют медиаданные. (Для элементов анимации атрибут будет проигнорирован, если указано media).
indefinite: Это значение задаёт простое время как неопределённое.

Примечание: Интерполяция не будет работать, если простое время неопределённое (хотя это может быть полезно для элементов <set>).

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

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

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

	Рабочий стол					Мобильные устройства
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox для Android	Opera Android	Safari на iOS	Samsung Internet	WebView Android
`dur`	2	79	4	15	4	18	4	14	3.2	1.0	4.4

© 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/dur