<animate>
Элемент SVG <animate> позволяет анимировать атрибут элемента со временем.
Пример
<svg viewBox="0 0 10 10" xmlns="http://www.w3.org/2000/svg"> <rect width="10" height="10"> <animate attributeName="rx" values="0;5;0" dur="10s" repeatCount="indefinite" /> </rect> </svg>
Примечания по использованию
Этот элемент реализует интерфейс SVGAnimateElement.
Вопросы доступности
Мигающая и вспыхивающая анимация может быть проблематична для людей с когнитивными проблемами, такими как синдром дефицита внимания и гиперактивности (СДВГ). Кроме того, некоторые виды движений могут быть триггером для вестибулярных расстройств, эпилепсии, мигрени и светобоязни.
Рассмотрите возможность предоставления механизма для приостановки или отключения анимации, а также использование CSS-запроса для уменьшения движения или эквивалентного указателя пользователя Sec-CH-Prefers-Reduced-Motion для создания дополнительного опыта для пользователей, которые выразили предпочтение без анимации.
- Создание безопасной веб-анимации для чувствительности к движению · Статья An A List Apart
- Введение в запрос среды с уменьшенным движением | CSS-Tricks
- Адаптивный дизайн для движения | WebKit
- MDN Понимание WCAG, объяснения к руководящим принципам 2.2
- Понимание критерия успеха 2.2.2 | W3C Понимание WCAG 2.0
Спецификации
| Спецификация |
|---|
| Анимации SVG уровня 2 # AnimateElement |
Совместимость с браузерами
| Рабочие столы | Мобильные | ||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Opera | Safari | Chrome Android | Firefox для Android | Opera Android | Safari на iOS | Samsung Internet | WebView Android | |
animate |
2 | ≤79 | 4 | 9 | 3.1 | 18 | 4 | 10.1 | 2 | 1.0 | 4 |
attributeName |
2 | 79 | 4 | 15 | 4 | 18 | 4 | 14 | 3.2 | 1.0 | 4.4 |
attributeType |
2 | 79 | 4 | 15 | 4 | 18 | 4 | 14 | 3.2 | 1.0 | 4.4 |
dur |
2 | 79 | 4 | 15 | 4 | 18 | 4 | 14 | 3.2 | 1.0 | 4.4 |
fill |
2 | 79 | 4 | 15 | 3.1 | 18 | 4 | 14 | 2 | 1.0 | 4.4 |
from |
2 | 79 | 4 | 15 | 4 | 18 | 4 | 14 | 3.2 | 1.0 | 4.4 |
href |
50 | 12 | 51 | 37 | 12.1 | 50 | 51 | 37 | 12.2 | 5.0 | 50 |
repeatCount |
2 | 79 | 4 | 15 | 4 | 18 | 4 | 14 | 3.2 | 1.0 | 4.4 |
systemLanguage |
2 | 79 | 12 | ≤12.1 | 3.1 | 18 | 14 | ≤12.1 | 2 | 1.0 | 4.4 |
to |
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/Element/animate
