El atributo by especifica un valor de desplazamiento relativo para un atributo que se modificará durante una animación.
Sintaxis:
by="numbers"
Valores de atributos:
- integers: Entero en el que queremos establecer el atributo by.
Usaremos el atributo by para ajustar el tamaño de la forma.
Ejemplo 1:
HTML
<!DOCTYPE html> <html> <body> <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"> <rect x="5" y="5" width="20" height="20"> <animate attributeName="width" fill="freeze" by="20" dur="4s" /> </rect> </svg> </body> </html>
Producción:
Ejemplo 2:
HTML
<!DOCTYPE html> <html> <body> <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"> <rect x="5" y="5" width="20" height="10"> <animate attributeName="height" fill="freeze" by="10" dur="4s" /> </rect> </svg> </body> </html>
Producción:
