Comando de línea – revista Smash

En la publicación anterior, revisamos algunos Ejemplo práctico de cómo codificar manualmente SVG. En esta guía, cubrimos los conceptos básicos de los elementos SVG rect,,,,, circle,,,,, ellipse,,,,, line,,,,, polyliney polygon (además g).

Esta vez, resolveremos un tema más avanzado, el poder absoluto del elemento SVG: path. No me malinterpreten; Todavía me quedo con mi punto de vista de que dibujar rutas de imagen mejor en los programas vectoriales que la codificación (a menos que sea el tipo creativo de fabricación de arte visual no lógico en código, puede establecer y crear milagros increíbles; puede que no sea una audiencia para este artículo). Pero hablando de Diagrama técnico y Visualización de datoseste path Los elementos desbloquean varias posibilidades y abren el mundo de SVG codificado a mano.

La sintaxis de la ruta puede ser muy complicada. Lo resolveremos en dos secciones separadas. En la primera parte, estamos aprendiendo sobre Camino recto. En la segunda parte, haremos que la línea se doblaremos, torceremos y giraremos.

Conocimiento y pautas requeridas

notas: Si no está familiarizado con los conceptos básicos de SVG, p. viewBox y la sintaxis básica de elementos simples (rect,,,,, line,,,,, getc.), sugiero leer Mi guía Antes de sumergirse en esto. Tú también deberías Familiarizado consigo mismo <text> Si desea conocer cada línea de código en el ejemplo.

Antes de comenzar, quiero revisar rápidamente cómo codificar SVG usando JavaScript. No me gusta tratar con números y matemáticas, y leer el código SVG que llena los números en cada propiedad me hace perder toda mi comprensión de los números. Al dar nombres de coordenadas y hacer que todas mis matemáticas sean fáciles de analizar y escribir, tengo mejor tiempo en este tipo de código, y creo que usted también lo hará.

El propósito de este artículo es más sobre entender path sintaxis En comparación con la colocación o cómo aprovechar los bucles y otras cosas más básicas. Así que no te dejaré completar la configuración completa de cada ejemplo. En cambio, compartiré fragmentos del código, pero se puede ajustar o simplificar ligeramente de Codepen para que este artículo sea más fácil de leer. Sin embargo, si la pregunta específica sobre el código no es parte del texto en la demostración de CodePen, la parte del comentario está abierta.

Para mantener todos los marcos: los marcos insustituibles, el código está escrito en Vanilla JavaScript (aunque, de hecho, Svitra es su amigo, cuanto más complejo es su SVG, y me lo perdí al escribir algunos de ellos).

Construir con éxito

Como path Los elementos dependen de nuestra comprensión de ciertas coordenadas que insertamos en comandos, lo que creo que es mucho más fácil si tenemos alguna orientación visual. Por lo tanto, todos los ejemplos se codificarán además de las representaciones visuales tradicionales viewBox Tener una configuración con origen en la esquina superior izquierda (entonces, el valor 0 0 ${width} ${height}.

También agregué etiquetas de texto para facilitarle que le indique áreas específicas en la cuadrícula.

Tenga en cuenta que recomiendo tener cuidado al agregar texto <text> Elementos en SVG si desea que su texto sea accesible. Si los gráficos dependen de la escalada de texto como el resto del sitio web, es mejor representarlo en HTML. Pero para nuestro ejemplo, esto debería ser suficiente.

Entonces, esto es lo que vamos a dibujar:

Bueno, ahora tenemos un cuadro de vista para cuadrículas visuales. Creo que estamos listos para asistir a la primera sesión con la Bestia.

Ingresar path Y todo lo contrario d propiedad

este <path> Hay un elemento d Atributos, habla su propio idioma. Entonces, interno destás hablando de «comando».

Cuando pienso en non-path relativamente path Elementos, creo que la razón por la que tuvimos que escribir descripciones de dibujo más complejas es: Todos los elementos que no son de patas son caminos ficticios. En el fondo, tienen una forma previa al ritmo, y siempre se representarán en función de algunos parámetros que pase. path No hay forma predeterminada. La lógica de la forma debe estar expuesta a usted, y puede estar perfectamente oculta en todos los demás elementos.

Entendamos estos comandos.

Donde todo comienza: M

El primero es donde comienza cada ruta, M Comando, mueva la pluma a un punto. Este comando coloca su punto de partida, pero No dibujes una cosa. Solo hay un camino M El comando es un auto-delete Al limpiar los archivos SVG.

Requiere dos parámetros: x y y Las coordenadas de su punto de partida.

const uselessPathCommand = `M${start.x} ${start.y}`;

Comandos de línea básicos: M ,,,,, L,,,,, H,,,,, V

Estos son divertidos y fáciles: L,,,,, Hy Vtodo lo cual dibuja una línea desde el punto actual hasta el punto especificado.

L traer Dos argumentoseste x y y La ubicación del punto que desea extraer.

const pathCommandL = `M${start.x} ${start.y} L${end.x} ${end.y}`;

H y VPor otro lado, solo Una discusión Porque simplemente dibujan una línea en una dirección. para Hespecificó x Ubicación, y Vespecificó y Ubicación. Otro valor sugiere.

const pathCommandH = `M${start.x} ${start.y} H${end.x}`;
const pathCommandV = `M${start.x} ${start.y} V${end.y}`;

Para visualizar cómo funciona, creé una función que dibuja la ruta, así como los puntos con etiquetas en la etiqueta, para que podamos ver lo que está sucediendo.

Hay tres líneas en esta imagen. este L El comando se usa para la ruta roja. Comienza con M existir (10,10)luego mueva la diagonal hacia abajo (100,100). El comando es: M10 10 L100 100.

La línea azul es horizontal. Comienza con (10,55) Y debería estar en (100, 55). Podemos usar L Comando, pero tenemos que escribir 55 de nuevo. Entonces, escribimos M10 55 H100y luego SVG sabe mirar hacia atrás y valor M para y valor H.

Para la línea verde, esto es lo mismo, pero cuando usamos V Comando, SVG sabe x valor M para x valor V.

Si comparamos la ruta horizontal del resultado con la misma implementación <line> Elementos, podemos

1. Presta atención a una mayor eficiencia path Si, y
2. Para cualquiera que no hable, se elimina mucho significado path.

Porque, cuando miramos estas cuerdas, una de ellas se llama «línea». Si bien el resto no significa nada fuera de contexto, la línea seguramente atraerá una imagen específica en nuestra mente.

<path d="M 10 55 H 100" />
<line x1="10" y1="55" x2="100" y2="55" />

y Z

En la sección anterior, aprendimos cómo path Puede comportarse <line>esto es genial. Pero puede hacer más. También puede ser como polyline y polygon.

Recuerda cómo estos dos básicamente funcionan, pero polygon Conecte los primeros y últimos puntos, y polyline ¿No es así? este path Los elementos pueden hacer lo mismo. Hay un comando separado que cierra la ruta con una línea, que es Z Orden.

const polyline2Points = `M${start.x} ${start.y} L${p1.x} ${p1.y} L${p2.x} ${p2.y}`;
const polygon2Points  = `M${start.x} ${start.y} L${p1.x} ${p1.y} L${p2.x} ${p2.y} Z`;

Así que veamos que esto está en acción y cree una forma de triángulo repetitiva. Cada momento extraño, está abierto e incluso cerrado cada vez. ¡Muy bien!

Al comparar path relativamente polygon y polylineotras etiquetas nos dicen sus nombres, pero creo que menos personas saben qué es un polígono, en lugar de una línea (o incluso menos de lo que es una línea de múltiples líneas. El argumento que usa estas dos etiquetas path En mi opinión, debido a la débil legibilidad, creo que podría estar de acuerdo en que esto parece una cuerda inútil que le da al elemento SVG.

<path d="M0 0 L86.6 50 L0 100 Z" />
<polygon points="0,0 86.6,50 0,100" />

<path d="M0 0 L86.6 50 L0 100" />
<polyline points="0,0 86.6,50 0,100" />

Comandos relativos: m,,,,, l,,,,, h,,,,, v

Todas las líneas de comandos existen en versiones absolutas y relativas. La diferencia es que el comando relativo es minúscula, p. m,,,,, l,,,,, hy v. El comando relativo siempre es relativo al último punto, entonces x Valor, estás anunciando dx Valor, digamos que es cuántas unidades desea mover.

Antes de ver el ejemplo visualmente, quiero que mire las siguientes tres líneas de comando. Intente no verificar CodePen por adelantado.

const lines = (
  { d: `M10 10 L 10 30 L 30 30`, color: "var(--_red)" },
  { d: `M40 10 l 0 20 l 20 0`, color: "var(--_blue)" },
  { d: `M70 10 l 0 20 L 90 30`, color: "var(--_green)" }
);

Como mencioné, odio que mirar los números no tenga sentido, pero hay un número que tiene un significado bastante constante en la mayoría de los casos: 0. Ver uno 0 Combinado con el comando, lo aprendí Relativo Intenta decirme de inmediato que no pasó nada. Ver l 0 20 Me dice que esta línea se mueve solo a lo largo de un eje en lugar de dos.

Y ver todo el comando de ruta azul, repita 20 El valor me hace sentir que la forma puede tener cierta regularidad. El primer camino se realiza repitiendo algunos 10 y 30. ¿Pero tercero? Como alguien que no puede hacer matemáticas en mi mente, la tercera cadena me es dada No hay nada.

Ahora, es posible que te sorprenda, pero todas dibujan las mismas formas en diferentes lugares.

Entonces, ¿qué tan valiosos podemos reconocer en el camino azul? En mi opinión, no es muy bueno. En algunos casos, es más fácil usar valores relativos que valores absolutos. En otros casos, definitivamente es el rey. Ni mejor ni peor.

Y, en todos los casos, si las variables en unidades de brechas, variables de tamaño de forma y funciones que generan definiciones de ruta llamadas de bucles, los ejemplos anteriores serán más eficientes para que los índices se usen en el índice para calcular correctamente el punto de partida.

Punto de salto: cómo hacer un camino compuesto

Otra cosa muy útil es que no ves lo que ve visualmente en el CodePen anterior, pero tiene algo que ver con la cuadrícula y su código.

Robé la actualización de dibujo de la cuadrícula.

Utilizando los métodos utilizados en ejemplos anteriores, line Para dibujar la malla, la proteína del código anterior representará la malla con 14 elementos separados. Si va a verificar el código final para el último CodePen, notará que solo hay un elemento de ruta en el código .grid grupo.

Parece esto, no parece interesante, pero domina las posibilidades:

<path d="M0 0 H110 M0 10 H110 M0 20 H110 M0 30 H110 M0 0 V45 M10 0 V45 M20 0 V45 M30 0 V45 M40 0 V45 M50 0 V45 M60 0 V45 M70 0 V45 M80 0 V45 M90 0 V45" stroke="currentColor" stroke-width="0.2" fill="none"></path>

Si miramos de cerca, podemos notar que hay múltiples M Orden. Esta es la magia de los caminos compuestos.

desde M/m El comando no está realmente dibujado, solo pon el cursor, un path Puede saltar.

Entonces, cada vez que tenemos múltiples rutas que comparten estilos comunes y no requieren interacciones separadas, podemos encadenarlos para acortar nuestro código.

Próximo

Con este conocimiento, ahora podemos reemplazarlo line,,,,, polyliney polygon y path Comandar y combinarlos en una ruta compuesta. Pero todavía hay mucho que descubrir, porque path No solo proporciona una versión de línea, sino que también nos proporciona una opción de código circles y ellipses Hay espacios abiertos que a veces se doblan, giran y giran. Lo llamamos curva y arcoy discutirlos más explícitamente en la próxima publicación.

Lea más sobre Smashingmag

(GG, YK)