| Les deux révisions précédentesRévision précédente | |
| issue149:inkscape [2019/10/06 15:02] – andre_domenech | issue149:inkscape [2019/10/08 16:17] (Version actuelle) – auntiee |
|---|
| </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 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 | <svg |
| 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 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 : | 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"); | var svg = document.querySelector("svg"); |
| svg.innerHTML = '<rect id="s1" x="10" y="10" width="50" height="50" fill="red" />'; | 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 le fait que nous avons donné 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"); | var square1 = document.querySelector("#s1"); |
| 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 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) : | 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 utilisée 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 : |
| 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 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> | <svg> |
| 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.** | 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, aussi il est tracé en premier. le <rect> jaune « s2 » arrive en second, donc 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 ; aussi, le carré jaune est affiché sur le carré bleu. | 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 pouvez casser cet ordre en utilisant la propriété « z-index » du CSS. Malheureusement, cette approche ne fonctionne pas avec le SVG. La spécif. SVG2 a bien ajouté 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. | 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: | **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: |
| svg.appendChild(square1);** | 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 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 ; 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(); |
| svg.insertBefore(square3, square2);** | svg.insertBefore(square3, square2);** |
| |
| Ainsi, maintenant, nous savons comment ajouter un objet sur le dessus d'une page, et comment déplacer cet objet de dessous vers le dessus. Et si on insérait un nouvel objet sur le dessus du document, de sorte qu'il apparaisse juste en bas de la pile ? Si appendChild() l'ajoute à la fin du document, sûrement que insertChild() le mettra en tête ? | 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 ? |
| |
| Ouh-ouh ! Ce n'est pas si bon. Le problème est qu'il n'y a pas de méthode appelée inserChild(), sans même savoir si ça a beaucoup d'intérêt. À 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 de Javascript suivante dans la console pour injecter « square3 » dans le parent « svg », avant « square2 » : | 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); | svg.insertBefore(square3, square2); |
| 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:** | 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 que vous ayez déjà mis 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 est lequel. 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 sur lui. Nous pouvons utiliser ceci pour insérer un autre élément enfant en bas de la pile (en haut à droite). | 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 y a encore 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. | 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: | **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: |
| 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 - qui reste 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 sûre. | 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. | 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. |
| 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 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. | 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 à 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 la complexité de ce processus ! |
| |
| 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'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. |
| |
