**Last time, we used a linked JavaScript file to create an SVG file containing a circle that changes color when a button is pressed, when loaded into a web browser. This time, we’ll extend that simple example to show how the combination of SVG and JavaScript is ideal for animated demonstrations, by implementing a set of traffic lights. Our lights are the sort of thing that might appear on an educational site, or in a museum: they’ll cycle through the sequence of colors (red, red and amber, green, amber, red) once when the button is clicked. But first, we need some traffic lights:
For simplicity, I’ve based this on the file I created for the previous instalment. That means the red light already has an ID (“redCircle”), and the JS file is already linked. I’ve duplicated the red circle to create the amber and green ones, giving them corresponding IDs of “amberCircle” and “greenCircle”. Because the JS is linked, and the red circle has the same ID as last time, loading the file into a web browser draws the lights okay, and clicking the button toggles the red light to green and back. Clearly there’s more work to be done, but at least the fundamentals are in place.**
La dernière fois, nous avons utilisé un fichier JavaScript lié pour créer un fichier SVG contenant un cercle qui change de couleur quand on appuie sur un bouton, lorsqu'il est chargé dans un navigateur Web. Cette fois-ci, nous prolongerons cet exemple simple pour montrer comment la combinaison de SVG et de JavaScript est idéale pour des démonstrations animées, en mettant en œuvre des feux tricolores. Nos feux sont la sorte de chose qui peut apparaître sur un site d'éducation ou dans un musée : ils vont se succéder dans une séquence de couleurs (rouge (red), rouge et jaune (amber), vert (green), jaune, rouge), une fois quand on clique sur le bouton. Mais, d'abord, nous avons besoin de feux tricolores :
Par simplicité, comme base pour ceux-ci, j'ai pris le fichier créé dans l’article précédent. Cela signifie que la lumière rouge a déjà un ID (« redCircle ») et que le fichier JS est déjà lié. J'ai dupliqué le cercle rouge pour créer les jaune et vert, en leur donnant des ID qui correspondent, « amberCircle » et « greenCircle ». Comme le fichier JS est lié et que le cercle rouge a le même ID que la dernière fois, le chargement du fichier dans le navigateur dessine bien les feux, et un clic sur le bouton fait passer le feu du rouge au vert et vice-versa. Clairement, il reste encore beaucoup de travail à faire, mais les fondamentaux sont en place.
**For this demo, we want the dull colored lights to turn bright at the correct times. Let’s forget about the timing for now, and deal with the colors first. With a variation on our existing code, we could easily set each light to a specific color by targeting it using its ID, then setting the “style.fill” property directly. A better approach, in this case, is to use classes. We can set a class for each light onto some ancestor object, and use CSS to apply the right fill. Since classes can be combined, we don’t need a “red-and-amber” class; we can just set the “red” and “amber” classes at the same time.
But before we get too far ahead of ourselves, we need to set some default colors in CSS, so that we can override them later using classes. Open the file in a text editor, and find the **
Pour cette démo, nous voulons que les couleurs ternes des feux deviennent vives aux bons moments. Oublions le séquencement temporel pour l'instant, et occupons-nous d'abord des couleurs. En modifiant notre code existant, nous pourrions facilement paramétrer chaque feu à une couleur particulière en utilisant leurs ID, puis en réglant la propriété « style.fill » directement. L'utilisation des classes est, dans notre cas, une meilleure approche. Nous pouvons paramétrer une classe pour chaque feu sur le même objet ancêtre et utiliser le CSS pour appliquer le bon remplissage. Comme les classes peuvent être combinées, nous n'avons pas besoin d'une classe « rouge et jaune » ; nous pouvons simplement régler les classes « red » et « amber » en même temps.
Mais avant de nous engager trop loin, nous avons besoin de paramétrer des couleurs par défaut dans le CSS, afin de pouvoir ensuite les remplacer en utilisant les classes. Ouvrez le fichier dans un éditeur de texte et trouvez la section
**Don’t worry if there’s already content in your **
Ne vous inquiétez-pas si du contenu existe déjà dans votre bloc
**Each of these rules is similarly structured, and can be read as “set this fill color for the element with a specific ID, but only if one of its ancestors has a specific class”. With this method we can set classes of “red”, “amber” and “green” on some ancestor element of the lights, such as the parent layer, or even on the root