Entre las etiquetas de forma SVG, path es la más poderosa, y mastering path es suficiente para resolver problemas comunes de dibujo.
Veamos primero el uso básico de la etiqueta de camino:
<camino d="M100,100 L200,200 L200,400" relleno = #333" recorrido="#000" />
La etiqueta de camino define el camino a través de la propiedad d, que define la información que consiste en una cadena, y el camino también puede definirse mediante los atributos de relleno y trazo para definir el relleno y el borde.
La información del atributo d en realidad no es complicada, está compuesta por letras y números, los números representan puntos de coordenadas y las letras son responsables de cómo conectar estos puntos. Por ejemplo, en el ejemplo anterior, M representa el punto de partida y L representa una conexión en línea recta, por lo que la información de d puede interpretarse así:
M100,100 -> comienza en el punto de coordenadas (100,100)
L200,200 -> Dibuja una línea recta de (100,100) a (200,200).
L200,400 -> Dibuja una línea recta de (200,200) a (200,400).
En el atributo d de la etiqueta de camino, hay un total de 10 comandos que se pueden usar, y los siguientes 5 comandos son básicos y relativamente sencillos.
M se mueve a (moverse a) coordenadas del punto de inicio x,y
El camino cerrado en Z conecta los puntos de inicio y final del camino en línea recta
Línea L To: El nodo actual está conectado en línea recta al nodo especificado (x,y)
La recta horizontal H x mantiene constante la coordenada y del punto actual, y el eje x se desplaza hacia x, formando una línea horizontal
V la línea vertical y mantiene las coordenadas x del punto actual sin cambios, y el eje y se desplaza a y, formando una línea vertical
M y L
Veamos otro ejemplo de M y L
<camino d="M30,30 L170,30 L30,170 L170,170"></path>
Desde el punto A (30, 30), la línea recta se traza hasta el punto B (170, 30), luego recto hasta el punto C (30, 170), y después recto hasta el punto D (170, 170), formando finalmente un camino en forma de Z.
Efecto de relleno, y Z
<path d="M30,30 L170,30 L30,170 L170,170 M170,90 L190,90 L190,110 L170,110Z" llenar "amarillo"></path>
Hay dos M en esta descripción de camino, así que en un camino aparecen dos caminos relativamente independientes, el primer camino es el mismo que el ejemplo anterior, que es en forma de Z.
El segundo camino es un rectángulo con el comando Z apareciendo en la descripción, indicando que conecta el inicio y el final del camino.
Además, aquí definimos la propiedad de relleno para el camino, y puedes ver que el relleno tendrá efecto independientemente de si el camino está cerrado o no.
H y V
Finalmente, veamos los dos comandos H y V, que en realidad son la abreviatura del comando L cuando el eje x o y permanece sin cambios, así que se describen los dos extremos siguientes y la imagen dibujada es la misma.
<path d="M30,30 L170,30 L30,170 L170,170 M170,90 L190,90 L190,110 L170,110Z" llenar "amarillo"></path>
<path d="M30,30 H170 L30,170 H170 M170,90 H190 V110 H170Z" rellenar "amarillo"></path>
|
Publicado en 14/8/2017 13:15:15
|
|
|
