Элемент SVG <animate>
Опубликовано: 25 Февраля, 2022
SVG - это масштабируемая векторная графика. Его можно использовать для создания графики и анимации, как в холсте HTML.
Элемент <animate> SVG используется для анимации атрибута или свойства элемента с течением времени. Обычно он вставляется внутри элемента, который мы хотим оживить.
Синтаксис:
<animate attributeName = "" values = "" dur = "" repeatCount = "" />
Атрибуты:
- Атрибуты анимации: атрибуты, используемые для создания эффектов анимации, атрибутов времени экспозиции, атрибутов событий, атрибутов значений и т. Д.
- Глобальные атрибуты: используются некоторые глобальные атрибуты, такие как основные атрибуты, атрибуты стиля и т. Д.
Ниже приведены несколько примеров указанного выше элемента:
Example 1:
<!DOCTYPE html> < html > < body > < svg viewBox = "0 0 50 50" > < rect width = "10" height = "10" fill = "green" > < animate attributeName = "rx" values = "0;20;0" dur = "2s" repeatCount = "10" /> </ rect > </ svg > </ body > </ html > |
Выход:
Example 2:
<!DOCTYPE html> < html > < body > < h1 style = "color:green" > GeeksforGeeks </ h1 > < h2 > SVG animate element </ h2 > < svg viewBox = "0 0 50 50" > < rect width = "7" height = "7" fill = "green" > < animate attributeType = "CSS" attributeName = "opacity" from = "1" to = "0" dur = "4s" repeatCount = "indefinite" /> </ rect > </ svg > </ body > </ html > |
Выход:
Поддерживаемые браузеры: этот элемент SVG поддерживает следующие браузеры:
- Хром
- Край
- Fire Fox
- Сафари
- Опера