SVG significa Gráfico vectorial escalable. Se puede usar para hacer gráficos y animaciones como en el lienzo HTML.
El elemento SVG <set> proporciona un medio fácil de establecer el valor de un atributo para una duración específica. Admite todos los tipos de atributos, incluidos aquellos que no se pueden interpolar razonablemente, como strings y valores booleanos.
Sintaxis:
<set attributeName="" value="" />
Atributo:
- a:
- 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.
Ejemplo 1:
html
<!DOCTYPE html> <html> <body> <svg viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg"> <rect id="me" width="10" height="10"> <set attributeName="fill" to="green" /> </rect> </svg> </body> </html>
Producción:
Ejemplo 2:
html
<!DOCTYPE html> <html> <body> <svg width="400" height="200" xmlns="http://www.w3.org/2000/svg"> <a> <text x="50" y="90" text-anchor="middle"> Click Here </text> <set attributeName="href" to="https://youtu.be/Abwl8g65BLQ" /> </a> </svg> </body> </html>
Producción:
Navegadores compatibles:
- Chrome 1 y superior
- Edge 79 y superior
- Firefox 4 y superior
- Safari 3 y superior
- Ópera 12.1 y superior
- Internet Explorer no es compatible