Commandes de ligne

Dans un article précédent, nous avons examiné certains Exemples pratiques de la façon de coder SVG à la main. Dans ce guide, nous avons couvert les bases des éléments SVG rect, circle, ellipse, line, polylineet polygon (et aussi g).

Cette fois-ci, nous allons aborder un sujet plus avancé, la puissance absolue des éléments SVG: path. Ne vous méprenez pas; Je tiens toujours à mon point que les chemins d’image sont mieux dessinés dans les programmes vectoriels que codés (à moins que vous ne soyez le type de créatif qui fabrique de l’art visuel non logique en code – alors allez-y et créez des merveilles impressionnantes; vous n’êtes probablement pas le public de cet article). Mais quand il s’agit de dessins techniques et visualisations de donnéesle path Element déverrouille un large éventail de possibilités et ouvre le monde des SVG codés à la main.

La syntaxe du chemin peut être vraiment complexe. Nous allons y attaquer en deux parties distinctes. Dans ce premier épisode, nous apprenons tout sur Chemins droits et angulaires. Dans la deuxième partie, nous allons faire des lignes, des lignes, se tordre et tourner.

Connaissances et structure de guide requises

Note: Si vous n’êtes pas familier avec les bases de SVG, comme le sujet de viewBox et la syntaxe de base des éléments simples (rect, line, get ainsi de suite), je recommande de lire Mon guide avant de plonger dans celui-ci. Tu devrais aussi Familiarisez-vous avec <text> Si vous souhaitez comprendre chaque ligne de code dans les exemples.

Avant de commencer, je veux récapituler rapidement la façon dont je code SVG à l’aide de JavaScript. Je n’aime pas faire face aux chiffres et aux mathématiques, et la lecture du code SVG avec des numéros remplis dans chaque attribut me fait perdre toute compréhension de celui-ci. En donnant des coordonnées et en ayant tous mes mathématiques faciles à analyser et à écrire, j’ai un bien meilleur moment avec ce type de code, et je pense que vous aussi.

Le but de cet article est plus sur compréhension path syntaxe qu’il s’agit de faire le placement ou de tirer parti des boucles et d’autres choses plus fondamentales. Ainsi, je ne vous ferai pas exécuter toute la configuration de chaque exemple. Je vais plutôt partager des extraits du code, mais ils peuvent être légèrement ajustés à partir du codep ou simplifié pour rendre cet article plus facile à lire. Cependant, s’il existe des questions spécifiques sur le code qui ne fait pas partie du texte dans les démos de codepen, la section des commentaires est ouverte.

Pour garder tout ce framework, le code est écrit en JavaScript Vanilla (cependant, vraiment, TypeScript est votre ami, plus votre SVG devient compliqué, et je l’ai manqué lors de l’écriture de certains d’entre eux).

Configuration pour réussir

Comme le path Element repose sur notre compréhension de certaines des coordonnées que nous branchons sur les commandes, je pense que c’est beaucoup plus facile si nous avons un peu d’orientation visuelle. Ainsi, tous les exemples seront codés en plus d’une représentation visuelle d’un traditionnel viewBox Configuration avec l’origine dans le coin supérieur gauche (donc, valeurs sous la forme de 0 0 ${width} ${height}.

J’ai également ajouté des étiquettes de texte pour vous faciliter la pointe vers des zones spécifiques de la grille.

Veuillez noter que je recommande de faire attention lors de l’ajout de texte dans le <text> Élément dans SVG si vous souhaitez que votre texte soit accessible. Si le graphique repose sur la mise à l’échelle du texte comme le reste de votre site Web, il serait préférable de le faire rendre via HTML. Mais pour nos exemples ici, cela devrait être suffisant.

C’est donc ce que nous allons comploter en plus:

Très bien, nous avons maintenant une grille de visualisation de Viewbox. Je pense que nous sommes prêts pour notre première session avec la bête.

Entrer path Et le tout-puissant d Attribut

Le <path> L’élément a un d attribut, qui parle sa propre langue. Alors, à l’intérieur dvous parlez en termes de «commandes».

Quand je pense à non-path contre path Éléments, j’aime à penser que la raison pour laquelle nous devons écrire des instructions de dessin beaucoup plus complexes est la suivante: Tous les éléments non chemins ne sont que des chemins plus stupides. En arrière-plan, ils ont une forme de chemin pré-dessin qu’ils rendront toujours en fonction de quelques paramètres que vous transmettez. Mais path n’a aucune forme par défaut. La logique de forme doit vous être exposée, alors qu’elle peut être soigneusement cachée pour tous les autres éléments.

Apprenons ces commandes.

Où tout commence: M

Le premier, où commence chaque chemin, est le M Commande, qui déplace le stylo à un point. Cette commande place votre point de départ, mais c’est ne dessine pas une seule chose. Un chemin avec juste un M la commande est un auto-delete Lors du nettoyage des fichiers SVG.

Il faut deux arguments: le x et y coordonnées de votre position de départ.

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

Commandes de ligne de base: M , L, H, V

Ce sont amusants et faciles: L, Het VTous dessinent une ligne du point actuel au point spécifié.

L prendre des prises deux argumentsle x et y positions du point sur lequel vous souhaitez dessiner.

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

H et Vd’un autre côté, ne prends que un argument Parce qu’ils ne font que dessiner une ligne dans une seule direction. Pour Hvous spécifiez le x positionner, et pour Vvous spécifiez le y position. L’autre valeur est implicite.

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

Pour visualiser comment cela fonctionne, j’ai créé une fonction qui dessine le chemin, ainsi que des points avec des étiquettes dessus, afin que nous puissions voir ce qui se passe.

Nous avons trois lignes dans cette image. Le L La commande est utilisée pour le chemin rouge. Ça commence par M à (10,10)alors se déplace en diagonale à (100,100). La commande est: M10 10 L100 100.

La ligne bleue est horizontale. Ça commence à (10,55) et devrait se terminer à (100, 55). Nous pourrions utiliser le L commande, mais nous devons écrire 55 encore. Donc, au lieu de cela, nous écrivons M10 55 H100puis SVG sait regarder en arrière y valeur M pour y valeur H.

C’est la même chose pour la ligne verte, mais lorsque nous utilisons le V Commande, SVG sait se référer au x valeur M pour x valeur V.

Si nous comparons le chemin horizontal résultant avec la même implémentation dans un <line> élément, nous pouvons

1. Remarquez combien plus efficace path peut être, et
2. Supprimer pas mal de sens pour quiconque ne parle pas path.

Parce que, en regardant ces cordes, l’une d’elles est appelée «ligne». Et tandis que le reste ne signifie rien de son contexte, la ligne évoque définitivement une image spécifique dans nos têtes.

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

Faire des polygones et des polylines avec Z

Dans la section précédente, nous avons appris comment path peut se comporter comme <line>ce qui est plutôt cool. Mais cela peut faire plus. Il peut aussi agir comme polyline et polygon.

Rappelez-vous comment ces deux fonctionnent la même chose, mais polygon relie le premier et le dernier point, tandis que polyline ne fait pas? Le path L’élément peut faire la même chose. Il y a une commande distincte pour fermer le chemin avec une ligne, qui est le Z commande.

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`;

Voyons donc cela en action et créons une forme de triangle répétitive. Chaque fois, il est ouvert, et à chaque fois, il est fermé. Assez soigné!

Quand il s’agit de comparer path contre polygon et polylineles autres tags nous parlent de leurs noms, mais je dirais que moins de gens savent ce qu’est un polygone par rapport à ce qu’est une ligne (et probablement encore moins sait ce qu’est une polyligne. L’argument pour utiliser ces deux balises path car la lisibilité est faible, à mon avis, et je suppose que vous conviendrez probablement que cela ressemble à des niveaux égaux de chaîne dénuée de sens donnée à un élément 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" />

Commandes relatives: m, l, h, v

Toutes les commandes de ligne existent dans des versions absolues et relatives. La différence est que les commandes relatives sont en minuscules, par exemple, m, l, het v. Les commandes relatives sont toujours relatives au dernier point, donc au lieu de déclarer un x valeur, vous déclarez un dx Valeur, disant que c’est combien d’unités vous déplacez.

Avant de regarder visuellement l’exemple, je veux que vous regardiez les commandes à trois lignes suivantes. Essayez de ne pas regarder au préalable le Codepen.

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)" }
];

Comme je l’ai mentionné, je déteste regarder les nombres sans signification, mais il y a un nombre dont la signification est assez constante dans la plupart des contextes: 0. Voir un 0 En combinaison avec une commande, je viens d’apprendre des moyens relatif parvient à me dire instantanément que rien ne se passe. Vision l 0 20 En soi, je me dit que cette ligne se déplace le long d’un seul axe au lieu de deux.

Et en regardant toute cette commande Blue Path, la répétition 20 La valeur me donne le sentiment que la forme pourrait avoir une certaine régularité. Le premier chemin fait un peu de cela en répétant 10 et 30. Mais le troisième? En tant que personne qui ne peut pas faire de mathématiques dans ma tête, cette troisième chaîne me donne rien.

Maintenant, vous pourriez être surpris, mais ils dessinent tous la même forme, juste à différents endroits.

Alors, dans quelle mesure est-il précieux que nous puissions reconnaître la régularité dans le chemin bleu? Pas très, à mon avis. Dans certains cas, aller avec la valeur relative est plus facile qu’une valeur absolue. Dans d’autres cas, l’Absolu est le roi. Ni n’est meilleur ni pire.

Et, dans tous les cas, cet exemple précédent serait beaucoup plus efficace s’il était configuré avec une variable pour l’espace, une variable pour la taille de forme et une fonction pour générer la définition de chemin qui est appelée à partir d’une boucle afin qu’elle puisse prendre l’index pour calculer correctement le point de début.

Points de saut: comment faire des chemins composés

Une autre chose très utile est quelque chose que vous ne voyez pas visuellement dans le code précédent, mais il se rapporte à la grille et à son code.

Je me suis glissé dans une mise à jour de dessin de la grille.

Avec la méthode utilisée dans des exemples antérieurs, en utilisant line Pour dessiner la grille, le code de code ci-dessus aurait rendu la grille avec 14 éléments distincts. Si vous allez inspecter le code final de ce dernier codepen, vous remarquerez qu’il n’y a qu’un seul élément de chemin dans le .grid groupe.

Cela ressemble à ceci, ce qui n’est pas amusant à regarder mais tient le secret de la façon dont il est possible:

<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 nous examinons de près, nous pouvons remarquer qu’il y a plusieurs M Commandes. C’est la magie des chemins composés.

Depuis le M/m Les commandes ne dessinent pas réellement et ne placent pas le curseur, un path peut avoir des sauts.

Ainsi, chaque fois que nous avons plusieurs chemins qui partagent un style commun et n’ont pas besoin d’avoir des interactions distinctes, nous pouvons simplement les enchaîner ensemble pour rendre notre code plus court.

Venir ensuite

Armés de ces connaissances, nous sommes maintenant en mesure de remplacer line, polylineet polygon avec path commandes et les combiner dans des chemins composés. Mais il y a tellement plus à découvrir parce que path Ne propose pas seulement des versions de lignes à l’étranger mais nous donne également la possibilité de coder circles et ellipses qui ont un espace ouvert et peuvent parfois aussi se plier, se tordre et tourner. Nous nous référerons à ceux courbes et arcset discutez-en plus explicitement dans le prochain article.

Lire plus approfondie sur SmashingMag

(GG, YK)