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