Элемент 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
- Сафари
- Опера