Ruta <path> de SVG

El elemento de path se utiliza para definir un elemento universal de forma. Todas las formas básicas se pueden crear con el elemento de path. El elemento <path> de SVG se utiliza para dibujar formas avanzadas compuestas por líneas rectas, arcos, curvas, etc., con o sin relleno. Este elemento <path> puede ser el más avanzado y más universal de todos los elementos de SVG. También puede ser el más difícil de dominar.

Editor de SVG en línea -　 SVG se puede editar en línea, y según SVG se puede convertir en código fuente

Path

Ejemplo de SVG <path> Ejemplo simple:

<svg　xmlns="http://www.w3.org/2000/svg"
　　　　xmlns:xlink="http://www.w3.org/1999/xlink">
　　　　<path    d="M50,50
　　　　　　　　　　　　　A30,30 0 0 ,1　35,20
　　　　　　　　　　　　　L100,100
　　　　　　　　　　　　　M110,110
　　　　　　　　　　　　　L100,0"
　　　　　　　　　　style="stroke:#660000;　fill:none;/>　　　　
</svg>

El resultado después de ejecutar es el siguiente:

Observe cómo la imagen contiene un arco y dos líneas, y cómo la segunda línea no está conectada con el primer arco y la línea.

Todos los dibujos con elementos <path> se especifican en el atributo d. El atributo d contiene comandos de dibujo. En el ejemplo superior, M representa el comando "Move to" (mover a), A representa el comando "Arc" (arco), y L representa el comando "Line" (línea). Estos comandos se proporcionan al pincel virtual. Este pincel puede moverse, dibujar formas, etc.

Configuración y movimiento del pincel

<path>el primer comando de dibujo debe ser siempre el comando de movimiento. Antes de poder dibujar cualquier cosa, debes mover el pincel a algún lugar. Esto se realiza con el comando M. A continuación se muestra un ejemplo simple:

<svg　xmlns="http://www.w3.org/2000/svg"
　　　　xmlns:xlink="http://www.w3.org/1999/xlink">
　　　　<path    d="M50,50"
　　　　　　　　　　style="stroke:#660000;　fill:none;/>
</svg>

Este ejemplo mueve el pincel virtual a50,50 punto. El siguiente comando de dibujo comenzará desde ese punto.

línea

Dibujar una línea es uno de los comandos más simples que se pueden proporcionar al elemento <path>. Se completa con los comandos L y l (l minúscula) para dibujar una línea:

<svg　xmlns="http://www.w3.org/2000/svg"
　　　　xmlns:xlink="http://www.w3.org/1999/xlink">
　　　　<path    d="M50,50　　　　　　　　　　　　　L100,100"
　　　　　　　　　　style="stroke:#660000;　fill:none;/>
</svg>

Este ejemplo comienza desde el punto50,50 (punto del comando M) hasta el punto100,100 (punto del comando L) después de ejecutar la imagen:

La diferencia entre los comandos L y l es que la versión mayúscula (L) dibuja una línea hasta el punto absoluto transmitido al comando, mientras que la versión minúscula (l) dibuja una línea hasta el punto relativo transmitido al comando. El punto relativo es el punto antes del inicio de la línea, más los coordenadas dados del comando l. Dibujar una línea desde el punto
Si el pincel virtual está50,50, y utiliza l100,100 comandos, la línea se dibujará como50+100,50+100=150,150. Sin importar la posición del pincel virtual, utilizando L100,100 comandos puede dibujar una línea recta con precisión hasta100,100

El comando de dibujo mueve el punto virtual del pincel

La forma de la ruta siempre se dibuja desde el último punto virtual de pincel hasta el nuevo punto. Cada comando de dibujo tiene un punto final. Después de ejecutar el comando, el punto virtual del pincel se encuentra en el punto final del comando de dibujo. El siguiente comando de dibujo comenzará desde ese punto.

arco

Dibujar un arco usando el elemento <path> se realiza mediante los comandos A y a. Al igual que con las líneas, el comando mayúscula (A) utiliza coordenadas absolutas como su punto final, mientras que el comando minúscula (a) utiliza coordenadas relativas (relativas al punto de partida). A continuación se muestra un ejemplo:

<svg　xmlns="http://www.w3.org/2000/svg"
　　　　xmlns:xlink="http://www.w3.org/1999/xlink">
　　　　<path    d="M50,50　　　　　　　　　　　　　A30,50 0 0 ,1　100,100"
　　　　　　　　　　style="stroke:#660000;　fill:none;/>
</svg>

El resultado después de ejecutar es el siguiente:

Este ejemplo comienza desde el punto50,50 hasta el punto100,100 (último especificado en el comando A) para dibujar una curva.
El radio del arco se establece mediante los dos primeros parámetros definidos en el comando A. El primer parámetro es rx (el radio en la dirección x), y el segundo parámetro es ry (el radio en la dirección y). Al establecer el mismo valor para rx y ry se produce un arco. Al establecer valores diferentes para rx y ry se produce un arco elíptico. En el ejemplo superior, rx se establece30, ry establecido como50
0.-El tercer parámetro establecido en el comando A es la rotación del eje x (x-axis

rotation). En comparación con el eje x normal, esto establecerá la rotación del eje x del arco. En el ejemplo anterior, la rotación del eje x se estableció en 0. La mayoría de las veces, no es necesario cambiar este parámetro.-un ejemplo de arco con el indicador de gran arco (large-arc-cuarto y quinto parámetros son el indicador de gran arco (large-un ejemplo de arco con el indicador de gran arco (large-flag) parámetros. El indicador de gran arco (large4flag) determina si se dibujará el arco más pequeño o más grande que cumple con el punto de partida, el punto final y rx y ry. A continuación, se muestra un-un ejemplo de arco con el indicador de gran arco (large-arc-flag) y el indicador de escaneo (sweep

<svg    width="500"    altura="12flag) diferentes combinaciones:
　　　　<path    d="M40,20 ", style = "stroke: #00ff00; stroke30,30 ">　60,70 0 0,0-ancho:2; fill:none; "></path>
　　　　<path    d="M40,20 ", style = "stroke: #00ff00; stroke30,30 ", style = "stroke: #ff0000; stroke　10 ", style = "stroke: #cccc00; stroke　60,7,0-ancho:2; fill:none; "></path>
　　　　<path    d="M40,20 ", style = "stroke: #00ff00; stroke30,30 ", style = "stroke: #ff0000; stroke　1,1　60,70 0-ancho:2; fill:none; "></path>
　　　　<path    d="M40,20 ", style = "stroke: #00ff00; stroke30,30 0 0 ,1　60,70 " style = "stroke: #0000ff; stroke-ancho:2; fill:none; "></path>
</svg>

El resultado después de ejecutar es el siguiente:

se puede40,20 hasta el punto60,70 dibujar cuatro arcos diferentes. Un arco largo, un arco pequeño y cada uno de los pequeños/Las dos versiones espejo del arco grande. La marca de arco grande determina si se dibujará el arco grande o pequeño. El indicador de escaneo determina si el arco se reflejará alrededor del eje de línea de inicio a final. En realidad, el indicador de escaneo controla la dirección de dibujo del arco (horario o antihorario), produciendo el efecto de "reflejo".

El primer arco dibujado es el arco amarillo. Establecer el indicador de gran arco a 0 significa que se dibujará el arco posible más pequeño. El indicador de escaneo también se establece en 0, lo que significa que el arco no se reflejará. A continuación, se muestra el arco amarillo:

El segundo arco dibujado es el arco rojo. Establecer el indicador de gran arco a1lo que significa que se dibujará el arco más grande posible, en el rango de40,20 a60,70. A continuación, se muestra juntos los arcos amarillos y rojos para ilustrar las diferencias:

las arcos verdes y azules (provenientes de los cuatro arcos del ejemplo anterior) son iguales a los arcos amarillos y rojos, pero se dibujan con el indicador de escaneo (sweep-se establece como1Esto significa que dibujarán el mismo arco circular, pero se reflejarán en el eje de línea de inicio a final.

Curva cuadrática de Bézier

Se puede usar el elemento <path> para dibujar una curva Bezier cuadrática. Dibujar una curva Bezier cuadrática se realiza mediante los comandos Q y Q. Al igual que con las líneas, el comando en mayúsculas (Q) utiliza coordenadas absolutas como su punto final, mientras que el comando en minúsculas (q) utiliza coordenadas relativas (relativas al punto de partida). A continuación, se muestra un ejemplo simple de curva cuadrática:

<svg　xmlns="http://www.w3.org/2000/svg"
　　　　xmlns:xlink="http://www.w3.org/1999/xlink"><path　d="M50,50    Q50,100　100,100"　
　　　　　　estilo="trazo:    #006666;    relleno:none;/></svg>

El resultado después de ejecutar es el siguiente:

Este ejemplo dibuja una curva Bezier cuadrática desde50,50 hasta el punto100,100, el punto de control es50,200. El primer parámetro configurado en el comando Q es el punto de control.

Los puntos de control atraen la curva como un imán. Cuanto más cerca de un punto de control está un punto de la curva, más hacia adentro se arrastra el punto de control, lo que significa que está más cerca del punto de control. A continuación, se muestran algunos ejemplos de puntos de control dibujados en la imagen:

En realidad, si dibujas una línea desde el punto de partida hasta el punto de control, y luego otra línea desde el punto de control hasta el punto final, la línea que está en el medio entre las dos líneas es la tangente de la curva. Aquí hay una imagen que ilustra esto:

Curva Bezier de tercer grado

Se dibuja una curva Bezier de tercer grado usando los comandos C y c. La curva Bezier de tercer grado es similar a la curva Bezier cuadrática, excepto que tienen dos puntos de control en lugar de uno. Al igual que las líneas, el comando en mayúsculas (C) usa coordenadas absolutas como su punto final, y el comando en minúsculas (c) usa coordenadas relativas (relativas al punto de partida):

<path    d="M50,50    C75,80　125,20　150,50"
　　　　　　estilo="trazo:    #006666;    relleno:none;/>

Esta es la imagen del resultado de dibujar los puntos de control, y el resultado después de ejecutar es el siguiente.

Puedes usar una curva Bezier de tercer grado para crear curvas avanzadas:

Cierre de la ruta

El elemento <path> tiene un comando rápido para cerrar la ruta, lo que significa que desde el último punto dibujado se vuelve al primer punto con una línea. Este comando es Z (o z)-No hay diferencia entre las órdenes de cierre en mayúsculas y minúsculas):

<svg　xmlns="http://www.w3.org/2000/svg"
　　　　xmlns:xlink="http://www.w3.org/1999/xlink"><path　d="M50,50    L100,50    L100,100    Z"
　　　　estilo="trazo:    #006666;    relleno:none;/></svg>

El resultado después de ejecutar es el siguiente:

Comandos combinados

Puedes combinar comandos de ruta en el mismo elemento <path>. A continuación, se muestra un ejemplo:

<svg    width="500"    altura="225">
　　　　<path    d="M100,100    L150,100    a50,25　0    0,0　150,100    q50,-50　70,-170    Z"    estilo="trazo:    #006666;    relleno:    none;"></path>
</svg>

Este ejemplo dibuja una línea recta, una arco circular, una curva Bezier cuadrática y cierra la ruta con una línea que vuelve al punto de partida. A continuación, se muestra la imagen generada:

Rellenar la ruta

Puedes usar la propiedad CSS de relleno para rellenar la ruta. A continuación, se muestra un ejemplo:

<svg　xmlns="http://www.w3.org/2000/svg"
　　　　xmlns:xlink="http://www.w3.org/1999/xlink"><path　d="M100,100    L150,100    L150,150    Z"
　　　　　　estilo="trazo:    #0000cc;
　　　　　　　　　　　　　trazo-ancho:　2px;    relleno:    #ccccff;/></svg>

El resultado después de ejecutar es el siguiente:

Ten en cuenta que el interior de la forma está relleno con un azul pálido.

Marcadores

Puedes usar marcadores en el elemento <path>. Los marcadores son pequeños símbolos ubicados en el punto de partida, en el medio y en el final de la ruta, que se utilizan para mostrar la dirección de la ruta. Por ejemplo, en el punto de partida hay un círculo o un cuadrado, y en el final hay una flecha.

Atajos de símbolos

Si necesita usar el mismo comando una y otra vez, puede omitir la letra del comando y solo proporcionar un grupo adicional de parámetros, como si el comando estuviera allí. Este es un ejemplo:

<svg　xmlns="http://www.w3.org/2000/svg"
　　　　xmlns:xlink="http://www.w3.org/1999/xlink"><path　d="M10,10　　　l100,0　　0,50　　-100,0　　0,-50"
　　　　　　style="stroke:　#000000;　fill:none;"　/></svg>

Este ejemplo muestra cómo se pasan otros parámetros al comando l, como si cada parámetro tuviera un l antes. Esto también se aplica a otros comandos de path. A continuación se muestra la imagen generada:

Comandos de Path de SVG completos

A continuación se muestra el　pathElementoLista de posibles comandos de pluma.Cada comando consta de una letra y un grupo de números (coordenadas, etc.), que son los parámetros del comando.Los comandos en mayúscula suelen interpretar los parámetros de coordenadas como coordenadas absolutas.Los comandos en minúscula suelen interpretar los parámetros de coordenadas en relación con la posición actual de la pluma.