El atributo de rotación muestra la rotación de un elemento animado a medida que viaja a lo largo de una ruta específica en un elemento <animateMotion> .
Sintaxis:
rotate = auto | auto-reverse | number
Valores de atributo: el atributo de rotación acepta los valores mencionados anteriormente y descritos a continuación:
- auto: este valor permite que la rotación del elemento animado cambie dinámicamente a medida que viaja a lo largo de la ruta. En esto, el elemento se alinea a su lado derecho en la dirección de movimiento actual.
- inversión automática: este valor permite que la rotación del elemento animado cambie dinámicamente a medida que viaja a lo largo de la ruta. En esto, el elemento se alinea a su lado izquierdo en la dirección de movimiento actual.
- number: Este valor muestra una rotación constante, que no cambia con la animación.
Los siguientes ejemplos ilustran el uso del atributo de rotación .
Ejemplo 1:
HTML
<!DOCTYPE html> <html> <body> <div style="color: green; margin-left: 40px;"> <h1>GeeksforGeeks</h1> <h4 style="color: black;"> When rotate = 0 & auto </h4> <svg width="400" height="120" viewBox="0 0 380 120" xmlns="http://www.w3.org/2000/svg"> <path d="M10,110 A120,120 -45 0, 1 110 10 A120,120 -45 0, 1 10,110" stroke="green" stroke-width="2" fill="none" id="geek"/> <path fill="red" d="M-5,-5 L10,0 -5,5 0,0 Z"> <animateMotion dur="6s" repeatCount="indefinite" rotate="0"> <mpath href="#geek"/> </animateMotion> </path> <g transform="translate(100, 0)"> <use href="#geek"/> <path fill="green" d="M-5,-5 L10,0 -5,5 0,0 Z"> <animateMotion dur="6s" repeatCount="indefinite" rotate="auto"> <mpath href="#geek"/> </animateMotion> </path> </g> </svg> </div> </body> </html>
Producción:
HTML
<!DOCTYPE html> <html> <body> <div style="color: green; margin-left: 40px;"> <h1>GeeksforGeeks</h1> <h4 style="color: black;"> When rotate = auto-reverse & 200 </h4> <svg width="600" height="120" viewBox="50 0 480 120" xmlns="http://www.w3.org/2000/svg"> <g> <path d="M10,110 A120,120 -45 0, 1 110 10 A120,120 -45 0, 1 10,110" stroke="green" stroke-width="2" fill="none" id="geek"/> <path fill="blue" d="M-5,-5 L10,0 -5,5 0,0 Z"> <animateMotion dur="6s" repeatCount="indefinite" rotate="auto-reverse"> <mpath href="#geek"/> </animateMotion> </path> </g> <g transform="translate(100, 0)"> <path d="M10,110 A120,120 -45 0, 1 110 10 A120,120 -45 0, 1 10,110" stroke="green" stroke-width="2" fill="none" id="geek"/> <path fill="black" d="M-5,-5 L10,0 -5,5 0,0 Z"> <animateMotion dur="6s" repeatCount="indefinite" rotate="200"> <mpath href="#geek"/> </animateMotion> </path> </g> </svg> </div> </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