El atributo keyPoints especifica la duración de una animación. Los elementos que usan este atributo incluyen: <animate>, <animateColor>, <animateMotion>, <animateTransform> y <set>.
Sintaxis:
keyPoints = [;<number>]*
Valores de atributo: el atributo keyPoints acepta los valores mencionados anteriormente y descritos a continuación
- [;<número>]*: Es una lista de números entre 0 y 1 separados por punto y coma.
Nota: El valor predeterminado para el atributo keyPoints es ninguno .
Los siguientes ejemplos ilustran el uso del atributo keyPoints .
Ejemplo 1:
HTML
<!DOCTYPE html> <html> <body> <h1 style="color: green; margin-left: 35px;"> GeeksforGeeks </h1> <svg viewBox="-50 0 1020 120" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <path d="M 10 10 H 90 V 90 H 10 L 10 10" stroke="green" fill="none" id="geek"/> <circle r="3" fill="green"> <animateMotion dur="3s" repeatCount="indefinite" keyPoints="0;0.5;1" keyTimes="0;0.15;1" calcMode="linear"> <mpath xlink:href="#geek"/> </animateMotion> </circle> </svg> </body> </html>
Producción:
Ejemplo 2:
HTML
<!DOCTYPE html> <html> <body> <h1 style="color: green; margin-left: 35px;"> GeeksforGeeks </h1> <svg viewBox="-30 40 1020 120" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <path d="M50,50 Q50,100 100,100" stroke="green" fill="none" id="geek"/> <circle r="5" fill="green"> <animateMotion dur="3s" repeatCount="indefinite" keyPoints="0;0.5;1" keyTimes="0;0.15;1" calcMode="linear"> <mpath xlink:href="#geek"/> </animateMotion> </circle> </svg> </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