SVG significa Gráfico vectorial escalable. Se puede usar para hacer gráficos y animaciones como en el lienzo HTML.
El elemento SVG <animate> se utiliza para animar un atributo o propiedad de un elemento a lo largo del tiempo. Normalmente se inserta dentro del elemento que queremos animar.
Sintaxis:
<animate attributeName="" values="" dur="" repeatCount="" />
Atributos:
- Atributos de animación: atributos utilizados para dar efectos de animación, atributos de tiempo de exposición, atributos de eventos y atributos de valor, etc.
- Atributos globales: algunos atributos globales utilizados como atributos centrales y atributos de estilo, etc.
A continuación se dan algunos ejemplos del elemento anterior:
Ejemplo 1:
html
<!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>
Producción:
Ejemplo 2:
html
<!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>
Producción:
Navegadores compatibles: los siguientes navegadores son compatibles con este elemento SVG:
- Chrome 2 y superior
- Edge 79 y superior
- Firefox 4 y superior
- Safari 4 y superior
- Ópera 9 y superior
- Internet Explorer no es compatible