Différences

Ci-dessous, les différences entre deux révisions de la page.

--- issue149:inkscape [2019/10/02 08:19] – d52fr
+++ issue149:inkscape [2019/10/08 16:17] (Version actuelle) – auntiee
@@ Ligne 11: / Ligne 11: @@
 </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 avec une manière 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 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 l'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 en tant qu'enfants ; aussi, nous allons nous concentrer cette fois-ci sur ce genre de structure. Voici le fichier SVG que nous devons créer comme point de départ :
 <svg
@@ Ligne 35: / Ligne 35: @@
 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 cotenu, en utilisant les outils de développeur du navigateur Web, comme nous le fîmes la dernière fois. Aussi, souvegardez le fichier, chargez-le das le navigateur, ouvrez les outils du développeur, 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. En fait, 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");
@@ Ligne 41: / Ligne 41: @@
 svg.innerHTML = '<rect id="s1" x="10" y="10" width="50" height="50" fill="red" />';
-Cette approche « innerHTML » est simple et peut créer des structures incorporées complexes, mais elle ne retourne aucune « manette » avec laquelle nous pourrions manipuler le contenu créé. Et que faire maintenant si nous voulons que le carré rouge devienne bleu ? Nous aurons besoin de faire quelque chose comme cela, en nous appuyant sur lefait que nousa vons donner un ID (identifiant ) au carré :
+Cette approche « innerHTML » est simple et peut créer des structures imbriquées complexes, mais elle ne retourne aucune « manette » avec laquelle nous pourrions manipuler le contenu créé. Et que faire maintenant si nous voulons que le carré rouge devienne bleu ? Nous aurons besoin de faire quelque chose comme ceci, en nous appuyant sur le fait que nous avons donné un ID (identifiant) au carré :
 var square1 = document.querySelector("#s1");
@@ Ligne 55: / Ligne 55: @@
 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 prolixe 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 utiliser 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");
-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.
@@ Ligne 72: / Ligne 72: @@
 </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 arangement 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 avez 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 avons 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>
@@ Ligne 84: / Ligne 84: @@
 If you’re familiar with HTML and CSS, you might imagine that you could override this ordering using the “z-index” CSS property. Unfortunately, that approach doesn’t work for SVG. The SVG2 spec does add z-index but, as with many of the useful additions in SVG2, no browser yet supports it. Currently, if you want to put things into a particular stacking order, you have no choice but to rearrange the content of your SVG document.**
+Le <rect> bleu, avec l'ID « s1 » est le premier dans le document et il est donc tracé en premier. Le <rect> jaune « s2 » arrive en second et il est dessiné en second. SVG utilise ce qui est appelé le « painter's model » (modèle du peintre) dans lequel les objets les plus récents sont peints par-dessus les objets les plus anciens ; ainsi, le carré jaune est affiché sur le carré bleu.
+Si vous êtes habitué au HTML et au CSS, vous pourriez imaginer que vous pourriez outrepasser cet ordre en utilisant la propriété « z-index » du CSS. Malheureusement, cette approche ne fonctionne pas avec le SVG. La spécif. SVG2 ajoute bien la z-index, mais, comme beaucoup d'ajouts de SVG2, aucun navigateur ne la supporte encore. Actuellement, si vous voulez placer les choses dans un certain ordre, vous n'avez que le choix de réorganiser le contenu de votre document SVG.
 **So how would we go about putting the blue square on top of the yellow one? It’s a two step operation: first we remove the blue square from the document, but keep it hanging around in memory; then we insert it back into the document, at the end. Given that we’ve already assigned the blue <rect> to the “square1” variable, we can use these two lines of JavaScript to achieve our goal:
@@ Ligne 90: / Ligne 94: @@
 svg.appendChild(square1);**
+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 ; 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();
+svg.appendChild(square1);
 **So now we know how to add an object to the top of the image, and how to move an object from a lower level up to the top. What about inserting a new object at the top of the document, so that it appears right at the bottom of the stack? If appendChild() adds it to the end of the document, surely insertChild() will put it at the start?
@@ Ligne 96: / Ligne 106: @@
 svg.insertBefore(square3, square2);**
+Ainsi, maintenant, nous savons comment ajouter un objet sur le dessus d'une image, et comment déplacer cet objet de dessous vers le dessus. Et si on insérait un nouvel objet  en haut du document, de sorte qu'il apparaisse juste en bas de la pile ? Si appendChild() l'ajoute à la fin du document, il serait logique que insertChild() le mettra en tête, non ?
+Oh-là ! Ce n'est pas si bon. Le problème est qu'il n'y a pas de méthode appelée inserChild(), en dépit de son utilité présumé. À la place, nous devons insérer le nœud dans le document avec une autre référence de nœud - autrement dit, nous devons spécifier que nous voulons l'insérer avant le premier enfant existant. Étant donné que notre carré jaune est le premier du document, et que, pour lui, nous avons déjà une manette avec la variable « square2 », nous pouvons lancer la ligne suivante de JavaScript dans la console pour injecter « square3 » dans le parent « svg », avant « square2 » :
+svg.insertBefore(square3, square2);
 **This is great when you’ve already got a handle to the first child element, but that’s not always the case. Perhaps it was inserted dynamically by some other code, or you’ve just lost track of which element is which. You can always append a new node at the end of the parent’s list of children, so it would be useful to have an equivalent bit of code to insert a new node at the start of the list. Every XML element has a “firstElementChild” property that can be used to retrieve a handle to its first child (skipping any text content) without needing to know anything more about it. We can use this to insert another element at the bottom of the stack (top right).
 There’s still a bit of a gap between the yellow and the blue squares. Time to insert an element in the middle of the list of child nodes. As a reminder of where we stand at the moment, switching to the “Inspector” (Firefox) or “Elements” (Chrome) tab in the developer tools will show you the current state of your XML document:**
+C'est super quand il y a déjà une manette au premier élément enfant, mais ce n'est pas toujours le cas. Il a peut-être été inséré dynamiquement par un autre code, ou vous avez simplement perdu le fil de quel élément il s'agit. Vous pouvez toujours ajouter un nouveau nœud à la fin de la liste des enfants d'un parent ; aussi, il serait utile de disposer d'un bout de code équivalent pour insérer un nouveau nœud au début de la liste. Chaque élément XML a une propriété « firstElementChild » (premier élément enfant) qui peut être utilisée pour retrouver une manette pour le premier enfant (en sautant tout le contenu textuel) sans avoir besoin d'en savoir plus. Nous pouvons utiliser cela pour insérer un autre élément enfant en bas de la pile (en haut à droite).
+Il reste toujours un peu d'espace entre les carrés jaune et bleu. C'est le moment d'insérer un élément au milieu de la liste des nœuds enfants. Pour se souvenir où nous en sommes actuellement, passez sur l'onglet « Inspecteur » (Firefox) ou « Elements » (Chrome) dans les outils de développement pour voir l'état actuel de votre document XML.
 **To mix things up a little, we’re not going to create a brand new square this time – instead we’ll create a copy of an existing one. In browser terms, we’re going to create a “clone” of the node, but don’t confuse it with Inkscape’s concept of clones – the two are completely different things (Inkscape’s “clones” are actually implemented as SVG <use> elements). First, let’s clone our purple square – which we’ve still got assigned to the “square4” variable – and assign the clone to a highly-imaginatively named variable:
@@ Ligne 107: / Ligne 127: @@
 square5.setAttribute("x", 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 - qui reste assigné à la variable « square4 » - et assignons le clone à une variable au nom très recherché :
+var square5 = square4.cloneNode(true);
+square5.id = "s5";
+square5.setAttribute("x", 20);
+square5.setAttribute("y", 20);
 **All we needed to do was call the cloneNode() method of the node we wish to duplicate. The “true” parameter ensures that we clone not only the node itself, but any descendants it may have – if we had passed “false” instead, we would get only a duplicate of the node itself. In this case, the results are identical, since our <rect> has no children. But consider cloning a <text> or <g> element, where the content inside is just as important as the node itself, and you can see why passing “true” is usually the safest option.
 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 notre <rect> n'a 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.
 **To insert the clone, we’re just going to use the same insertBefore() method we used earlier. But, this time, our reference element (the one we’re inserting before) will be the blue <rect>. Of course we could use the reference we already have to it (square1), or get a fresh reference using document.querySelector(), but instead, we’re going to do something more generic. We’ve already seen a generic way to insert before the first child, now we’re going to write some equally generic code to insert just before the last child:
@@ Ligne 116: / Ligne 147: @@
 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é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);
 **As a reminder, the last child is the one that’s drawn on top (the blue square), so inserting just before the last child actually puts the cloned purple square below the blue square in the z-order.
@@ Ligne 132: / Ligne 167: @@
 svg.children[svg.children.length - 2].remove();**
+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'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 ?
+console.log(svg.children.length);
+// Enlever le troisième
+svg.children[2].remove();
+Enlever l'avant-dernier nœud, quel que soit leur nombre
+svg.children[svg.children.length - 2].remove();
 **Remembering that array (and collection) indexes start at zero, it should be clear why the third child has an index of 2. For the same reason the index of the last child is always “children.length – 1”, so the penultimate node will be “children.length – 2”. Of course if there are fewer than two child nodes present, this call will fail – a real program would have to check the length first, before trying to remove the penultimate child.
-Consider all this in terms of Inkscape: when you move things up and down in the z-order within Inkscape, or move entire layers up and down, what you’re actually doing is removing nodes from the document and reinserting them at a different position. If you’ve got multiple items selected, or a group or layer containing lots of other items, they all have to be removed and reinserted. If you ever find yourself wondering why Inkscape is taking a long time to paste something, now you’ve got an idea of how involved this process actually is!**
+Consider all this in terms of Inkscape: when you move things up and down in the z-order within Inkscape, or move entire layers up and down, what you’re actually doing is removing nodes from the document and reinserting them at a different position. If you’ve got multiple items selected, or a group or layer containing lots of other items, they all have to be removed and reinserted. If you ever find yourself wondering why Inkscape is taking a long time to paste something, now you’ve got an idea of how involved this process actually is!
+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 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 enfant 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 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 la complexité de ce processus !
-**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.**
+Avec le JS que vous avez appris jusqu'ici, 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.