| Les deux révisions précédentesRévision précédente | Dernière révisionLes deux révisions suivantes |
| issue149:inkscape [2019/10/06 08:36] – d52fr | issue149:inkscape [2019/10/06 15:02] – andre_domenech |
|---|
| </svg>** | </svg>** |
| |
| La dernière fois, nous avons regardé différentes façons d'utiliser le Javascript pour modifier dynamiquement votre fichier SVG dans un navigateur Web. Nous finîmes par une façon verbeuse de créer un élément SVG, régler ses attributs et le rattacher à un élément existant. Dans ce numéro, nous prendrons ces mêmes idées pour base et nous en ferons encore plus avec nos éléments - aussi, relisez tout de suite l'article du mois dernier si vous avez besoin de vous rafraîchir la mémoire avant de nous y atteler. | La dernière fois, nous avons regardé différentes façons d'utiliser le Javascript pour modifier dynamiquement votre fichier SVG dans un navigateur Web. Nous finîmes par une façon verbeuse de créer un élément SVG, régler ses attributs et le rattacher à un élément existant. Dans ce numéro, nous prendrons ces mêmes idées pour base et nous en ferons encore plus avec nos éléments, aussi, relisez tout de suite l'article du mois dernier si vous avez besoin de vous rafraîchir la mémoire avant de nous y atteler. |
| |
| Notre fichier test de la dernière fois était constitué principalement d'un élément SVG <text> - choisi parce que c'est un des rares éléments SVG contenant du texte et je voulais montrer comment vous pourriez faire pour obtenir et paramétrer un tel contenu. Cependant, la plupart des éléments SVG ont, soit aucun contenu, soit d'autres éléments vus comme leurs enfants ; aussi, nous allons nous concentrer cette fois-ci sur ce genre de structure. Voici le fichier SVG que nous aurons besoin de créer comme point de départ : | Notre fichier test de la dernière fois était constitué principalement d'un élément SVG <text> - choisi parce que c'est un des rares éléments SVG contenant du texte et je voulais montrer comment vous pourriez faire pour obtenir et paramétrer un tel contenu. Cependant, la plupart des éléments SVG ont, soit aucun contenu, soit d'autres éléments vus comme leurs enfants ; aussi, nous allons nous concentrer cette fois-ci sur ce genre de structure. Voici le fichier SVG que nous aurons besoin de créer comme point de départ : |
| square1.setAttribute("fill", "blue");** | square1.setAttribute("fill", "blue");** |
| |
| Bon. J'admets que c'est un fichier SVG assez réduit, même au regard des normes de cette série, mais c'est parce qu'il n'a, pour l'instant, aucun contenu. Pour ce faire, nous allons créer dynamiquement tout le contenu, en utilisant les outils de développement du navigateur Web, comme nous le fîmes la dernière fois. Aussi, sauvegardez le fichier, chargez-le dans le navigateur, ouvrez les outils de développement, passez sur l'onglet Console et effacez tous les messages. Ouf ! Maintenant que nous sommes prêts à agir, commençons par créer un carré en utilisant l'approche « simple » de la fois dernière : | Bon. J'admets que c'est un fichier SVG assez réduit, même au regard des normes de cette série, mais c'est parce qu'il n'a, pour l'instant, aucun contenu. Pour ce faire, nous allons créer dynamiquement tout le contenu, en utilisant les outils de développement du navigateur Web, comme nous l'avons fait la dernière fois. Aussi, sauvegardez le fichier, chargez-le dans le navigateur, ouvrez les outils de développement, passez sur l'onglet Console et effacez tous les messages. Ouf ! Maintenant que nous sommes prêts à agir, commençons par créer un carré en utilisant l'approche « simple » de la fois dernière : |
| |
| var svg = document.querySelector("svg"); | var svg = document.querySelector("svg"); |
| I’ll spare you a screenshot – I’m sure you can guess what it looks like now.** | I’ll spare you a screenshot – I’m sure you can guess what it looks like now.** |
| |
| L'approche de plus longue haleine que nous avons pris la dernière fois nous donne un objet Javascript représentant notre élément que nous pouvons utiliser ensuite pour paramétrer tous les attributs. Mais nous pouvons laisser cette manette en attente pour un usage ultérieur, si nous le souhaitons. Ajoutons un autre carré rouge, en utilisant cette fois la méthode « verbeuse » (ci-dessous) : | L'approche de plus longue haleine que nous avons prise la dernière fois nous donne un objet Javascript représentant notre élément que nous pouvons utiliser ensuite pour paramétrer tous les attributs. Mais nous pouvons laisser cette manette en attente pour un usage ultérieur, si nous le souhaitons. Ajoutons un autre carré rouge, en utilisant cette fois la méthode « verbeuse » (ci-dessous) : |
| |
| Maintenant, si nous voulons changer la couleur du second carré, nous pouvons utiliser simplement la variable « square2 » (carré2) que nous avons utilisé pour le créer, même si il a déjà été ajouté à la page : | Maintenant, si nous voulons changer la couleur du second carré, nous pouvons utiliser simplement la variable « square2 » (carré2) que nous avons utilisée pour le créer, même si il a déjà été ajouté à la page : |
| |
| square2.setAttribute("fill", "yellow"); | square2.setAttribute("fill", "yellow"); |
| |
| Je vous épargne une copie d'écran - Je suis sûr que vous pouvez deviner à quoi il ressemble maintenant. | Je vous épargne une copie d'écran. Je suis sûr que vous pouvez deviner à quoi il ressemble maintenant. |
| |
| **So far, we’ve mostly revised the content from last month, but in doing so you’ve got a nice arrangement of two squares, a yellow one on top of a blue one. But why are they in that order? Why isn’t the blue one on top? You might think it’s because we created the blue one first, and the yellow one second – and to some extent you’d be right. But there is a little more to it than that. | **So far, we’ve mostly revised the content from last month, but in doing so you’ve got a nice arrangement of two squares, a yellow one on top of a blue one. But why are they in that order? Why isn’t the blue one on top? You might think it’s because we created the blue one first, and the yellow one second – and to some extent you’d be right. But there is a little more to it than that. |
| </svg>** | </svg>** |
| |
| Jusque là, nous avons révisé les points du numéro précédent, mais, en le faisant, nous avons réalisé un bel arrangement de deux carrés, un jaune superposé à un bleu. Mais pourquoi sont-ils dans cet ordre ? Vous pourriez penser que c'est parce que nous avons créé le bleu d'abord, puis le jaune ; et, dans une certaine mesure, vous auriez raison. Mais il y a un petit peu plus que ça. | Jusque-là, nous avons révisé les points du numéro précédent, mais, en le faisant, nous avons réalisé un bel arrangement de deux carrés, un jaune superposé à un bleu. Mais pourquoi sont-ils dans cet ordre ? Vous pourriez penser que c'est parce que nous avons créé le bleu d'abord, puis le jaune ; et, dans une certaine mesure, vous auriez raison. Mais il y a un petit peu plus que ça. |
| |
| La raison n'est pas que nous ayons créé les carrés dans un certain ordre chronologique, mais plutôt qu'ils sont dans la structure XML dans un ordre spécifique. Quand nous avons ajouté le second carré, nous avons utilisé la méthode appendChild(), qui l'insère comme l'enfant le plus récent du parent sélectionné ; aussi, notre structure XML ressemble finalement en gros à ceci : | La raison n'est pas que nous ayons créé les carrés dans un certain ordre chronologique, mais plutôt qu'ils sont dans la structure XML dans un ordre spécifique. Quand nous avons ajouté le second carré, nous avons utilisé la méthode appendChild(), qui l'insère comme l'enfant le plus récent du parent sélectionné ; aussi, notre structure XML ressemble finalement en gros à ceci : |
| svg.appendChild(square1);** | svg.appendChild(square1);** |
| |
| Aussi, comment ferons-vous pour placer le carré bleu sur le jaune ? C'est une opération en 2 étapes : d'abord, nous retirons le carré bleu du document, mais en le gardant en mémoire dans un coin ; puis, nous le ré-insérons dans le document, à la fin. Étant donné que nous avons déjà attribué le <rect> bleu à la variable « square1 », nous pouvons utiliser ces deux lignes de Javascript pour atteindre notre objectif : | Aussi, comment ferons-nous pour placer le carré bleu sur le jaune ? C'est une opération en 2 étapes : d'abord, nous retirons le carré bleu du document, mais en le gardant en mémoire dans un coin ; puis, nous le ré-insérons dans le document, à la fin. Étant donné que nous avons déjà attribué le <rect> bleu à la variable « square1 », nous pouvons utiliser ces deux lignes de Javascript pour atteindre notre objectif : |
| |
| square1.remove(); | square1.remove(); |
| square5.setAttribute("y", 20);** | square5.setAttribute("y", 20);** |
| |
| Pour changer un peu, nous n'allons pas créer un nouveau carré ce coup-ci ; à la place, nous créerons une copie d'un carré existant. En termes de navigateur, nous allons créer un « clone » du nœud, mais ne le confondez pas avec le concept de clone d'Inkscape - ce sont deux choses complètement différentes (Les clones d'Inkscape sont en fait créés comme des éléments <use> du SVG). D'abord, clonons notre carré violet - que nous avons déjà assigné à la variable « square4 » - et assignons le clone à une variable au nom très recherché : | Pour changer un peu, nous n'allons pas créer un nouveau carré ce coup-ci ; à la place, nous créerons une copie d'un carré existant. En termes de navigateur, nous allons créer un « clone » du nœud, mais ne le confondez pas avec le concept de clone d'Inkscape, ce sont deux choses complètement différentes (Les clones d'Inkscape sont en fait créés comme des éléments <use> du SVG). D'abord, clonons notre carré violet - que nous avons déjà assigné à la variable « square4 » - et assignons le clone à une variable au nom très recherché : |
| |
| var square5 = square4.cloneNode(true); | var square5 = square4.cloneNode(true); |
| You’ll also note that I’ve changed the ID of the cloned element. We’re about to put it back into the same document and, although browsers don’t enforce it, the XML rules specifically prohibit duplicate IDs in a single document. For the sake of correctness, therefore, we change the ID while the cloned node is still just a fragment in memory that hasn’t yet been inserted into the SVG.** | You’ll also note that I’ve changed the ID of the cloned element. We’re about to put it back into the same document and, although browsers don’t enforce it, the XML rules specifically prohibit duplicate IDs in a single document. For the sake of correctness, therefore, we change the ID while the cloned node is still just a fragment in memory that hasn’t yet been inserted into the SVG.** |
| |
| Tout ce que nous avions à faire était d'appeler la méthode cloneNode() du nœud que nous voulions dupliquer. Le paramètre « true » (vrai) assure que, non seulement nous clonons le nœud même, mais tous les descendants qu'il pourrait avoir - si nous avions passé « false » (faux), nous n'aurions eu qu'une copie du seul nœud. Dans notre cas, le résultat est identique, car nos <rect> n'ont pas d'enfants. Mais dans le cas du clonage d'un élément <text> ou <g>, où le contenu interne est tout aussi important, sinon plus, que le nœud lui-même, vous pourriez voir pourquoi le choix de « true » est la solution la plus sure. | Tout ce que nous avions à faire était d'appeler la méthode cloneNode() du nœud que nous voulions dupliquer. Le paramètre « true » (vrai) assure que, non seulement nous clonons le nœud même, mais tous les descendants qu'il pourrait avoir ; si nous avions passé « false » (faux), nous n'aurions eu qu'une copie du seul nœud. Dans notre cas, le résultat est identique, car nos <rect> n'ont pas d'enfants. Mais dans le cas du clonage d'un élément <text> ou <g>, où le contenu interne est tout aussi important, sinon plus, que le nœud lui-même, vous pourriez voir pourquoi le choix de « true » est la solution la plus sûre. |
| |
| Vous noterez aussi que j'ai changé l'ID de l'élément cloné. Nous sommes sur le point de le réintégrer dans le même document, et, bien que les navigateurs ne l'imposent pas, les règles du XML interdisent spécifiquement de dupliquer les ID dans un document unique. Par conséquent, par correction, nous changeons l'ID alors que le nœud cloné n'est encore qu'un petit rien en mémoire, qui n'a pas encore été inséré dans le SVG. | Vous noterez aussi que j'ai changé l'ID de l'élément cloné. Nous sommes sur le point de le réintégrer dans le même document, et, bien que les navigateurs ne l'imposent pas, les règles du XML interdisent spécifiquement de dupliquer les ID dans un document unique. Par conséquent, par correction, nous changeons l'ID alors que le nœud cloné n'est encore qu'un petit rien en mémoire, qui n'a pas encore été inséré dans le SVG. |
| svg.insertBefore(square5, svg.lastElementChild);** | svg.insertBefore(square5, svg.lastElementChild);** |
| |
| Pour insérer le clone, nous allons simplement utiliser la même méthode insertBefore() utilisée précédemment. Mais, cette fois, notre élément de référence (celui avant lequel sera faite l'insertion) sera le <rect> bleu. Bien sûr, nous pourrions utiliser la référence que nous lui avons déjà donné (square1), ou obtenir une nouvelle référence en utilisant document.querySelector(), mais, à la place, nous allons faire quelque chose de plus universel. Nous avons déjà vu précédemment une solution générique pour une insertion avant le premier enfant ; maintenant, nous allons écrire un peu de code tout aussi universel pour une insertion juste avant le dernier enfant : | Pour insérer le clone, nous allons simplement utiliser la même méthode insertBefore() utilisée précédemment. Mais, cette fois, notre élément de référence (celui avant lequel sera faite l'insertion) sera le <rect> bleu. Bien sûr, nous pourrions utiliser la référence que nous lui avons déjà donnée (square1), ou obtenir une nouvelle référence en utilisant document.querySelector(), mais, à la place, nous allons faire quelque chose de plus universel. Nous avons déjà vu précédemment une solution générique pour une insertion avant le premier enfant ; maintenant, nous allons écrire un peu de code tout aussi universel pour une insertion juste avant le dernier enfant : |
| |
| svg.insertBefore(square5, svg.lastElementChild); | svg.insertBefore(square5, svg.lastElementChild); |
| Souvenez-vous que le dernier enfant est celui qui est dessiné tout au-dessus (le carré bleu) ; donc, une insertion juste avant le dernier enfant met en fait le carré violet cloné sous le carré bleu dans l'ordre d'empilement. | Souvenez-vous que le dernier enfant est celui qui est dessiné tout au-dessus (le carré bleu) ; donc, une insertion juste avant le dernier enfant met en fait le carré violet cloné sous le carré bleu dans l'ordre d'empilement. |
| |
| Les propriétés « firstElementChild » et « lastElementChild » sont des raccourcis utiles, mais vous ne souhaiterez pas toujours utiliser le premier ou le dernier enfant comme référence. Pour les besoins d'usages plus généraux, les nœuds XML ont une propriété « children » (enfants) qui retourne la collection de tous les enfants. Une « collection », pour ce qu'elle vaut, peut être décrite comme un objet qui est un peu comme un tableau mais suffisamment différente pour nous agacer. Ainsi, ne vous attendez pas à avoir accès à toutes les méthodes des tableaux, mais vous pouvez lire la propriété « length » (longueur), et faire référence individuellement aux nœuds enfants en utilisant une syntaxe avec des crochets : | Les propriétés « firstElementChild » et « lastElementChild » sont des raccourcis utiles, mais vous ne souhaiterez pas toujours utiliser le premier ou le dernier enfant comme référence. Pour les besoins d'usage plus généraux, les nœuds XML ont une propriété « children » (enfants) qui retourne la collection de tous les enfants. Une « collection », pour ce qu'elle vaut, peut être décrite comme un objet qui est un peu comme un tableau, mais suffisamment différente pour nous agacer. Ainsi, ne vous attendez pas à avoir accès à toutes les méthodes des tableaux, mais vous pouvez lire la propriété « length » (longueur), et faire référence individuellement aux nœuds enfants en utilisant une syntaxe avec des crochets : |
| |
| // Combien des nœuds enfants y a-t-il ? | // Combien des nœuds enfants y a-t-il ? |
| svg.children[2].remove(); | svg.children[2].remove(); |
| |
| Enlever l'avant-dernier nœud, quelque soit leur nombre | Enlever l'avant-dernier nœud, quel que soit leur nombre |
| |
| svg.children[svg.children.length - 2].remove(); | svg.children[svg.children.length - 2].remove(); |
| With the JS you’ve learnt so far, you have enough knowledge to write some code that will move objects around the canvas, as well as up and down in the z-order. You can use document.querySelector() to get a JS handle to an element in your drawing, and setAttribute() to dynamically change its parameters. Next time, we’ll look at how you might use some of these features to animate your SVG image.** | With the JS you’ve learnt so far, you have enough knowledge to write some code that will move objects around the canvas, as well as up and down in the z-order. You can use document.querySelector() to get a JS handle to an element in your drawing, and setAttribute() to dynamically change its parameters. Next time, we’ll look at how you might use some of these features to animate your SVG image.** |
| |
| En se souvenant que les index des tableaux (et des collections) commencent à zéro, il devrait être clair que le troisème enfant à 2 comme index. Pour cette même raison, l'index du dernier enfant est toujours « children.length – 1 » ; ainsi, l'avant-dernier nœud sera « children.length – 2 ». Bien sûr, s'il y a moins de deux nœuds présents, cet appel échouera - un vrai programme commencerait par vérifier la longueur, avant d'essayer d'enlever l'avant-dernier. | En se souvenant que les index des tableaux (et des collections) commencent à zéro, il devrait être clair que le troisième enfant a 2 comme index. Pour cette même raison, l'index du dernier enfant est toujours « children.length – 1 » ; ainsi, l'avant-dernier nœud sera « children.length – 2 ». Bien sûr, s'il y a moins de deux nœuds présents, cet appel échouera ; un vrai programme commencerait par vérifier la longueur, avant d'essayer d'enlever l'avant-dernier. |
| |
| Regardez tout ceci à la façon d'Inkscape : quand vous déplacez des choses vers le haut ou le bas dans l'ordre d'empilement, dans Inkscape, ou déplacez des calques entiers vers le haut ou le bas, ce que vous faîtes vraiment , c'est d'enlever les nœuds du document avant de les ré-insérer à un autre endroit. Si vous avez sélectionné plusieurs éléments, ou un groupe de calques contenant beaucoup d'éléments différents, ils doivent tous être enlevés puis réinsérés. Si vous vous êtes jamais demandé pourquoi Inkscape prend tant de temps pour coller quelque chose, vous percevez maintenant à quel point ce processus est effectivement impliqué ! | Regardez tout ceci à la façon d'Inkscape : quand vous déplacez des choses vers le haut ou le bas dans l'ordre d'empilement, dans Inkscape, ou déplacez des calques entiers vers le haut ou le bas, ce que vous faites vraiment , c'est d'enlever les nœuds du document avant de les ré-insérer à un autre endroit. Si vous avez sélectionné plusieurs éléments, ou un groupe de calques contenant beaucoup d'éléments différents, ils doivent tous être enlevés puis réinsérés. Si vous vous êtes jamais demandé pourquoi Inkscape prend tant de temps pour coller quelque chose, vous percevez maintenant à quel point ce processus est effectivement impliqué ! |
| |
| Avec le JS que vous avez appris jusqu'à maintenant, vous en connaissez assez pour écrire du code qui déplacera des objets sur le canevas, ainsi que dans l'ordre d'empilement. Vous pouvez utiliser document.querySelector() pour disposer d'une manette JS sur un élément de votre dessin et setAttribute() pour modifer dynamiquement ses paramètres. La prochaine fois, nous regarderons comment vous pourriez utiliser certaines de ces focntionnalités pour animer votre image SVG. | Avec le JS que vous avez appris jusqu'à maintenant, vous en connaissez assez pour écrire du code qui déplacera des objets sur le canevas, ainsi que dans l'ordre d'empilement. Vous pouvez utiliser document.querySelector() pour disposer d'une manette JS sur un élément de votre dessin et setAttribute() pour modifer dynamiquement ses paramètres. La prochaine fois, nous regarderons comment vous pourriez utiliser certaines de ces focntionnalités pour animer votre image SVG. |
| |
