SVG significa Gráfico vectorial escalable. La ruta del elemento SVG se usa para definir una ruta que comienza desde una posición y termina en una posición particular. La ruta SVG se puede usar para crear cualquier forma básica.
Sintaxis:
<path d="Shape of path using keyword like M, L, C etc."
pathLength="Length of path"
stroke="stroke color name"
fill="color name">
</path>
Atributos: Este elemento acepta cuatro atributos como se mencionó anteriormente y se describe a continuación:
- d: Se utiliza para definir la forma del camino.
- M: Se utiliza para mover un punto a una ubicación determinada.
- L: Se utiliza para hacer una línea a un punto.
- C: Se utiliza para hacer una curva a un punto.
- pathLength: Se utiliza para definir la longitud total de la ruta.
- trazo: Se utiliza para definir el color del trazo.
- relleno: Se utiliza para definir el color de relleno del SVG.
A continuación se dan algunos ejemplos para una mejor comprensión del elemento SVG <ruta>.
Ejemplo 1:
HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <svg viewBox="500 500 "> <!--Moving point to M10 10 200 200 making a line to 10 200 200 10 --> <path d="M 10 10 200 200 L 10 200 L200 10"> </path> </svg> </body> </html>
Producción:
Ejemplo 2:
HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <h1 style="color:green">GeeksforGeeks SVG Path</h1> <svg viewBox="500 500"> // Creating a rectangle starting point is 10, 10 // Making a line to 10 100 // Moving point to 10 100 // Making line to 100 100 // Moving point to 100 100 // Making line to 100 10 // Moving point to 100 10 // Making line to 10 10 --> <path d="M 10 10 L10 100 M10 100 L100 100 M100 100 L100 10 M100 10 L10 10" stroke="black"> </path> </svg> </body> </html>
Producción: