Last time, we looked at some different ways to use JavaScript to modify your SVG file dynamically in a web browser. We concluded with a verbose way to create a new SVG element, set its attributes, and append it to an existing element. In this instalment, we’ll build on those same ideas to do even more with our elements – so go ahead and re-read last month’s column if you need a refresher before we plough on. Our test file last time was made up primarily of an SVG <text> element – picked because it’s one of the few SVG elements that has text content within it, and I wanted to demonstrate how you might go about getting and setting such content. Most SVG elements, however, have either no content or only other elements as their children, so that’s the sort of structure we’ll focus on this time. Here’s the SVG file you’ll need to create as a starting point: <svg xmlns=“http://www.w3.org/2000/svg” viewBox=“0 0 100 100”> </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.
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
xmlns=“http://www.w3.org/2000/svg”
viewBox=“0 0 100 100”>
</svg>
Okay, that’s admittedly a pretty terse SVG file, even by the standards of this series, but that’s because it doesn’t actually have any content. Instead we’re going to create all the content dynamically, using the browser’s developer tools as we did last time. So save the file, load it into a browser, open the developer tools, switch to the Console tab, and clear any existing messages. Phew! Now that we’re ready to proceed, let’s begin by creating a square using the ‘simple’ approach from last time: var svg = document.querySelector(“svg”); svg.innerHTML = '<rect id=“s1” x=“10” y=“10” width=“50” height=“50” fill=“red” />'; This ‘innerHTML’ approach is simple, and can create complex nested structures, but it doesn’t return a ‘handle’ that we can use to further manipulate the created content. What if we now want our red square to be blue? We’ll need to do something like this, relying on the fact that we gave the square an ID: var square1 = document.querySelector(“#s1”); 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. 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”);
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 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”);
square1.setAttribute(“fill”, “blue”);
The more long-winded approach we took last time gives us a JavaScript object representing our element which we then use to set all the attributes. But we can hang on to that handle to use later on, if we wish. Let’s add another red square, this time using the verbose method (below): Now if we want to change the color of the second square, we can simply use the same ‘square2’ variable we used when creating it, even though it’s now been added to the page: square2.setAttribute(“fill”, “yellow”); I’ll spare you a screenshot – I’m sure you can guess what it looks like now.
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 :
square2.setAttribute(“fill”, “yellow”);
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. The reason isn’t that we created the squares in a particular chronological order, but rather that they ended up in the XML structure in a particular document order. When we added the second square we used the appendChild() method, which inserts it as the last child of the selected parent, so our XML structure ends up looking roughly like this: <svg> <rect id=“s1” /> <rect id=“s2” /> </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.
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>
<rect id="s1" /> <rect id="s2" />
</svg>
The blue <rect>, with ID “s1” is first in the document, so it gets drawn first. The yellow <rect> (“s2”) is second in the document, so gets drawn second. SVG uses what’s called the “painter’s model” in which later objects in the document are painted on top of earlier objects – so the yellow square is rendered on top of the blue square. 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: square1.remove(); 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? Uh-oh! That’s not so good. The problem is that there’s no XML method called insertChild(), regardless of how much sense it would make. Instead, you have to insert your node into the document before another reference node – in other words, you have to specify that you want to insert it before the existing first child. Given that our yellow square is first in the document, and we already have a handle to it in our “square2” variable, we can run the following JavaScript line in the console to inject “square3” into the “svg” parent, before “square2”: 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: var square5 = square4.cloneNode(true); square5.id = “s5”; 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: 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. The “firstElementChild” and “lastElementChild” properties are useful shortcuts, but you don’t always want to use the first or last child as your reference point. For more general purpose requirements, XML nodes have a “children” property, which returns a collection of all the children. A “collection”, for what it’s worth, can be described as an object that’s a bit like an array except different enough to be annoying. So don’t expect to have access to all the array methods, but you can read the “length” property, and reference individual child nodes using a square bracket syntax: How many child nodes are there? console.log(svg.children.length); Remove the third one svg.children[2].remove(); Remove the penultimate node, regardless of how many there are 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! 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 ! 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.