El elemento SVG <descartar> permite a los autores especificar el momento en que se descartarán elementos particulares, lo que reduce los recursos requeridos por un agente de usuario SVG. Esto es particularmente útil para ayudar a los visores de SVG a conservar la memoria mientras muestran documentos de ejecución prolongada.
Implementación:
El ancho y la altura representan el área del lienzo en el que se producirá la animación.
<svg width="1000" height="1000">
cx representa el eje X, cy representa el eje Y, r representa el color y el relleno representa el color dentro del círculo.
<circle id="circle2" cx="100" cy="300" r="190" fill="green"
El atributo de inicio define cuándo debe comenzar una animación o cuándo debe descartarse un elemento.
El elemento <discard> puede aparecer dondequiera que esté el elemento <animate> . Permite a los desarrolladores especificar el momento en que se descartarán elementos particulares.
El elemento animateTransform anima un atributo de transformación en su elemento de destino, lo que permite que las animaciones controlen la traducción, el escalado, la rotación o el sesgo.
El elemento SVG <animateMotion> proporciona una forma de definir cómo se mueve un elemento a lo largo de una ruta de movimiento.
Ejemplo 1: Círculo giratorio en un punto.
HTML
<!DOCTYPE html> <html> <head> <title>GeeksForGeeks-Discard</title> </head> <body> <svg width="800" height="600"> <circle id="circle2" cx="400" cy="300" r="100" fill="none" stroke="green" stroke-width="70" stroke-dasharray="15 15"> <animateTransform attributeName="transform" type="rotate" begin="1s" dur="10s" from="0 400 300" to="-720 400 300"/> <discard begin="2s"/> </circle> </svg> </body> </html>
Producción:
Ejemplo 2: Rotación en Círculo relleno alrededor del lienzo.
HTML
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>GeeksForGeeks-Discard</title> </head> <body> <svg width="1000" height="1000"> <circle id="circle2" cx="100" cy="300" r="190" fill="green" stroke="green" stroke-width="70" stroke-dasharray="3 3"> <animateTransform attributeName="transform" type="rotate" begin="1s" dur="10s" from="0 400 300" to="-720 400 300"/> <discard begin="5s"/> </circle> </svg> </body> </html>
Producción:
Navegadores compatibles: los siguientes navegadores son compatibles con este elemento SVG:
- Cromo
- Borde
- Firefox
- explorador de Internet
- Safari
- Ópera
Publicación traducida automáticamente
Artículo escrito por ayushcoding100 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA