El atributo de reinicio se usa para decidir si una animación se reiniciará o no. El atributo es utilizado por los elementos <animate>, <animateColor>, <animateMotion>, <animateTransform> y <set> .
Sintaxis:
restart="always | whenNotActive | never"
Valores de atributo: este atributo acepta tres valores como se mencionó anteriormente y se describe a continuación:
- siempre: Especifica que la animación siempre se puede reiniciar.
- whenNotActive: Especifica que la animación solo se puede reiniciar cuando no está activa. Si uno intenta reiniciar la animación durante su duración activa, esos intentos se ignoran.
- nunca: Especifica que la animación no se puede reiniciar por el tiempo que se carga el documento.
Los siguientes ejemplos ilustran el uso de este atributo:
Ejemplo 1:
HTML
<!DOCTYPE html>
<html>
<body>
<div style="color: green;">
<h1>GeeksforGeeks</h1>
<svg viewBox="0 0 520 200"
xmlns="http://www.w3.org/2000/svg">
<rect y="30" x="10" width="60"
height="60" fill="green">
<animate attributeName="x"
from="10" to="50" dur="1s"
repeatCount="1"
restart="always" />
</rect>
<a id="geeks" style="cursor: pointer;">
<text style="font-size: 10px;" y="10">
On Clicking here, the
animation will restart
</text>
<text style="font-size: 10px;" y="20">
even if it is currently
in animation.
</text>
</a>
</svg>
</div>
<script>
document.getElementById("geeks")
.addEventListener("click", event => {
document.querySelector("animate")
.beginElement();
});
</script>
</body>
</html>
Producción:
Ejemplo 2:
HTML
<!DOCTYPE html>
<html>
<body>
<div style="color: green;">
<h1>GeeksforGeeks</h1>
<svg viewBox="0 0 520 200"
xmlns="http://www.w3.org/2000/svg">
<rect y="30" x="10" width="60"
height="60" fill="green">
<animate attributeName="x"
from="10" to="50" dur="1s"
repeatCount="1"
restart="whenNotActive" />
</rect>
<a id="geeks" style="cursor: pointer;">
<text style="font-size: 10px;" y="10">
On Clicking here, the
animation will only
</text>
<text style="font-size: 10px;" y="20">
restart when it is not
currently active.
</text>
</a>
</svg>
</div>
<script>
document.getElementById("geeks")
.addEventListener("click", event => {
document.querySelector("animate")
.beginElement();
});
</script>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por thacker_shahid y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA