El atributo de ruta define una ruta de texto o se muestra la ruta de movimiento junto con los caracteres de un texto o se anima un elemento de referencia, respectivamente. Los elementos que usan este atributo incluyen: <animateMotion> y <textPath>.
Sintaxis:
path = path-data
Valores de atributo: el atributo de ruta acepta los valores mencionados anteriormente y descritos a continuación
- path-data: Tiene dos valores diferentes, es decir, puede definir una ruta de texto o la ruta de movimiento junto con los glifos que se renderizarán o animarán, respectivamente.
Nota: Su valor por defecto se considera normal.
Los siguientes ejemplos ilustran el uso del atributo de ruta .
Ejemplo 1:
HTML
<!DOCTYPE html> <html> <body> <h1 style="color: green; margin-left: 10px;"> GeeksforGeeks </h1> <svg viewBox="0 10 500 100" xmlns="http://www.w3.org/2000/svg"> <path fill="green" d = "M10, 90 Q90, 90 90, 45 Q90, 10 50, 10 Q10, 10 10, 40 Q10, 70 45, 70 Q70, 70 75, 50" /> <text> <textPath path = "M10, 90 Q90, 90 90, 45 Q90, 10 50, 10 Q10, 10 10, 40 Q10, 70 45, 70 Q70, 70 75, 50"> It is a Compute Science Portal </textPath> </text> </svg> </body> </html>
Producción:
Ejemplo 2:
HTML
<!DOCTYPE html> <html> <body> <h1 style="color: green; margin-left: 80px;"> GeeksforGeeks </h1> <svg viewBox="0 15 700 200" xmlns="http://www.w3.org/2000/svg"> <path fill="none" stroke="green" d = "M 100, 100 m -75, 0 a 75, 75 0 1, 0 150, 0 a 75, 75 0 1, 0 -150, 0" /> <circle r="5" fill="green"> <animateMotion dur="5s" repeatCount="indefinite" path="M 100, 100 m -75, 0 a 75, 75 0 1, 0 150, 0 a 75, 75 0 1, 0 -150,0" /> </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