**This month, we’re going to look at using CSS classes with your SVG in order to simplify the JavaScript you have to write when you want to change the style of your objects interactively. Note that we’re still talking only about changes that can be achieved using CSS styles – fill and stroke colors, line thickness and similar. Changing other aspects of your objects – such as the shape of a path – can’t be done simply by using CSS classes.
First of all, what is a CSS class? In short, it’s simply a way to group similar objects for styling purposes, by giving them all the same class name. Consider this super simple SVG file, consisting of one red rectangle (top right).**
Ce mois-ci, nous regarderons l'utilisation des classes du CSS avec votre SVG de façon à simplifier le JavaScript que vous devez écrire quand vous voulez changer interactivement le style de vos objets. Notez que nous ne parlons toujours que des modifications qui peuvent être réalisées en utilisant les styles du CSS - couleurs de remplissage et de contour, épaisseur des lignes et similaires. La modification d'autres aspects de vos objets, tels que la forme d'un chemin, ne peuvent pas être faits juste en utilisant des classes du CSS.
Avant tout, qu'est-ce qu'une classe du CSS ? En bref, c'est simplement une façon de grouper des objets similaires pour des besoins esthétiques, en leur donnant à tous le même nom de classe. Prenons ce fichier SVG super simple, consistant en un rectangle rouge (en haut à droite).
**You’ve seen previously that we can remove the values in the ‘style’ attribute and put them into a
du fichier ; mais vous pouvez aussi appliquer plusieurs classes à un seul objet, en les listant toutes dans l'attribut « class », séparées par des espaces (voici donc la raison pour laquelle les noms de classes ne peuvent pas avoir eux-mêmes des espaces). Supposez que nous ajoutions une autre classe puis modifiions l'attribut du rectangle :
block, not because of the order in which they’re put in the ‘class’ attribute. On the one hand, this is a limitation, in that you can’t trivially change the order in which the classes apply by modifying the attribute – but on the other hand it does mean that you can programmatically alter the content of the class attribute more easily, as you don’t have to worry about preserving the existing order.**
Comme vous pouvez le voir, la classe « important-thing » a été utilisée, donnant au rectangle un remplissage rouge, mais la classe « black-dashes » a modifié le contour. C'est très important de comprendre que « black-dashes » remplace l'autre style, parce qu'elle a été déclarée plus tard dans le bloc
...**
Après avoir sauvegardé, par sécurité, il est préférable de fermer Inkscape avant d'ouvrir le fichier SVG dans un éditeur de texte pour faire les modifications du CSS. Dans ce cas, nous voulons d'abord ajouter quelques classes qui contiendront les styles entre lesquels nous voulons basculer. Pour cette démo, chacun ne contiendra qu'une couleur de remplissage, et j'ajouterai une troisième classe pour le contour. Parce que le contour ne changera pas quand je passerai de l'une à l'autre, je n'ai pas vraiment besoin de lui en ajouter une, mais ça aide à démontrer que les méthodes de classList fonctionnent toujours même quand on utilise plus d'une classe. Voici le code qui est ajouté après la balise ouvrante :
...
**Now we need to find each in the file and remove the fill, stroke and stroke-width properties from the ‘style’ attribute (or remove the corresponding attributes, if Inkscape has been configured to use presentation attributes rather than CSS styles). If you save the file at this point, and re-open it in Inkscape, you should see that the buttons now have an unset fill and stroke, with a default stroke width of 1. Quit Inkscape without making any changes.
Back in the text editor, add a ‘class’ attribute to each so that they use the classes defined above for one of the fill colors, and the stroke. Here’s an abridged example of how one of them might look:
**
Maintenant, nous devons trouver tous les du fichier pour supprimer de l'attribut style le remplissage, le contour et les propriétés de largeur du trait (ou de supprimer les attributs correspondants si Inkscape a été configuré pour utiliser des attributs de présentation plutôt que les styles du CSS). Si vous sauvegardez le fichier à ce moment-là et que vous le rouvrez dans Inkscape, vous devriez voir que les boutons ont maintenant un remplissage et un contour indéfinis, avec une largeur du contour par défaut égale à 1. Quittez Inkscape sans faire aucune modification.
Revenez dans l'éditeur de texte et ajoutez un attribut « class » à chaque de sorte qu'ils utilisent les classes définies au-dessus pour chacune des couleurs de remplissage et pour le contour. Voici une vue abrégée de ce à quoi devrait ressembler l'un d'eux :
**At this point, Inkscape still claims the rectangles have an unset fill and stroke. But we can preview our work by opening the file in a web browser, which honours the class and style work we’ve done, and displays our buttons with a red background and thick black border. We could add the script directly in the SVG file with a text editor but, since this is an Inkscape column, that’s where we’re going to add our JavaScript code. Just take care not to change any styles when you open the file.
With the file open in Inkscape, we’ll need to add an onclick handler to each element. Our first example is going to be a simple one-liner that just toggles the ‘blue’ class on and off. Because of the inheritance model in CSS, this will have the effect of overriding the ‘red’ class, so toggling will switch from red to blue and back. Right-click on the first button, select ‘Object Properties’ and expand the ‘Interactivity’ section of the dialog. In the ‘onclick’ field, type this:
this.classList.toggle('blue');**
À ce stade, Inkscape continue d'affirmer que les rectangles ont un remplissage et un contour indéfinis. Mais vous pouvez visualiser votre travail en ouvrant le fichier dans un navigateur Internet, qui fait honneur au travail que nous avons fait sur la classe et le style et affiche nos boutons avec un fond rouge et une épaisse bordure noire. Nous pourrions ajouter le script directement dans le fichier SVG avec un éditeur de texte, mais, comme c'est un article sur Inkscape, c'est là que nous allons pour ajouter notre code en JavaScript. Prenez juste soin de ne changer aucun style quand vous ouvrez le fichier.
Le fichier étant ouvert dans Inkscape, nous avons besoin d'ajouter un gestionnaire de « onclick » pour chaque élément. Notre premier exemple ne fera qu'une ligne, pour activer/désactiver la classe « blue ». Du fait du modèle d'héritage dans le CSS, ceci aura pour effet de remplacer la classe « red », de sorte que le va-et-vient se fera entre le bleu et le rouge. En faisant un clic droit sur le premier bouton, sélectionnez « Propriétés de l'objet » et agrandissez la section Interactivité du dialogue. Dans le champ « onclick », saisissez ceci :
this.classList.toggle('blue');
**You can save the file, load it in a web browser, and confirm that it works, if you wish. For our second and third options we want more than just a single line of code, so we’ll create a pair of functions as embedded scripts. We’ll call them ‘toggle1’ and ‘toggle2’, and pass ‘this’ as a handle to the element that was clicked on. Add this line to the ‘onclick’ field in the object properties for the second button – and add an equivalent for ‘toggle2’ to the third button:
toggle1(this);
That’s the code to call the functions when the buttons are clicked, but now we need the functions themselves. Open the Document Properties and select the Scripting > Embedded Scripts tab. Click the ‘+’ button to add a new script, select it from the list, and put the toggle1 function in the Content area (top right).**
Vous pouvez sauvegarder le fichier, le charger dans un navigateur Internet et confirmer que ça marche, si vous le voulez. Pour nos deuxième et troisième options, nous voulons plus qu'une simple ligne de code ; aussi, nous créons une paire de fonctions en tant que scripts incorporés. Nous les appellerons « toggle1 » et « toggle2 » et passerons « this » comme référence pour l'élément sur lequel nous avons cliqué. Pour le second bouton, ajoutez cette ligne dans le champ « onclick » dans les propriétés de l'objet et ajoutez l'équivalent pour « toggle2 » au troisième bouton.
toggle1(this);
C'est le code pour appeler les fonctions quand les boutons sont cliqués mais, maintenant, nous avons besoin des fonctions elles-mêmes. Ouvrez les Propriétés du document et dans Programmation, sélectionnez l'onglet Programmes incorporés. Cliquez sur le bouton « + » pour ajouter un nouveau script à la liste ; sélectionnez-le dans la liste et mettez la fonction toggle1 dans la zone Contenu (voir en haut à droite).
**Here (bottom right) is the code for toggle2. You can either add this function after toggle1, or put it into a separate script section by clicking the ‘+’ and selecting the new entry.
Save the file, open it in your browser, and you should be able to click each button to toggle it from red to blue.
Look back over the code, and try to understand the differences between these three approaches. The first is the simplest, and will work in most cases where you just have to turn a class on or off from a single location in the code. The second is more useful if there are other bits of code that could interfere with the content of the class attribute, as the extra check to confirm if it currently contains the class or not makes it more robust. The third method is rarely used, but might be handy if you need to replace an entire class to avoid inheriting any properties from it. Usually I’d recommend reorganising your classes to avoid this problem, but the replace() method is worth knowing about in case that’s not an option.**
Voici, à droite en bas, le code pour toggle2. Vous pouvez, soit ajouter cette fonction après toggle1, soit la mettre dans une section de script séparée en cliquant sur « + » et en sélectionnant une nouvelle entrée.
Sauvegardez le fichier, ouvrez-le dans votre navigateur et vous devriez pouvoir cliquer sur chaque bouton pour le faire passer alternativement en rouge ou en bleu.
Retournez regarder le code et essayez de comprendre les différences entre ces trois approches. La première est la plus simple et elle fonctionnera dans la plupart des cas où vous avez juste à activer/désactiver une classe à une seul endroit dans le code. La seconde est plus utile s'il y a d'autres bouts de code qui pourraient interférer avec le contenu de l'attribut class, car la vérification supplémentaire pour confirmer s'il contient actuellement la classe ou non, la rend plus robuste. La troisième méthode est rarement utilisée, mais elle peut s'avérer pratique si vous avez besoin de remplacer une classe entière pour éviter tout héritage de propriété venant d'elle. Habituellement, je recommanderais de réorganiser vos classes pour éviter ce problème, mais la méthode replace() vaut d'être connue dans le cas où on n'a pas le choix.
**You may notice that clicking on the text, rather than the background, of the button does not cause the class toggle to occur. Furthermore the text is still selectable, which is not something you would usually want in a button. Next time we’ll take a look at these issues to see how we can make a click on one object affect a completely different one.**
Vous pouvez noter qu'en cliquant sur le texte du bouton, plutôt que sur son fond, le basculement de la classe n'intervient pas. De plus, le texte est toujours sélectionnable, ce qui n'est pas ce que vous voulez habituellement sur un bouton. La prochaine fois, nous nous pencherons sur ces problèmes pour voir comment nous pouvons faire pour qu'un clic sur un objet affecte un tout autre objet.