dur

Базовая поддержка Широко доступно

Эта функция хорошо зарекомендовала себя и работает на многих устройствах и во многих версиях браузеров. Она доступна во всех браузерах с ⁨января 2020⁩ года.

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

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

Пример

<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: Это значение задаёт простую длительность, равную intrinsic-длительности медиа. Оно допустимо только для элементов, определяющих медиа. (Для элементов анимации атрибут будет проигнорирован, если указано media.)
indefinite: Это значение задаёт бесконечную простую длительность.

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

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

Спецификация
SVG Animations Level 2> # DurAttribute>

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

	Настольные					Мобильные
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox for Android	Opera Android	Safari on IOS	Samsung Internet	WebView Android	WebView on iOS
`dur`	2	79	4	15	4	18	4	14	3.2	1.0	4.4	3.2

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