| Les deux révisions précédentesRévision précédente | |
| issue144:inkscape [2019/05/10 14:20] – auntiee | issue144:inkscape [2019/05/13 15:44] (Version actuelle) – andre_domenech |
|---|
| 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).** | 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. | 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). | 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). |
| Dans ce cas, j'ai utilisé le nom de classe « important-thing », car le style d'un filet rouge autour d'un fond rouge sombre suggère qu'il pourrait être utilisé pour indiquer des éléments importants. Mais la classe peut être tout ce que vous voulez, en se limitant à la seule utilisation de caractères alphanumériques, de traits de soulignement et de tirets. Notez que vous ne pouvez pas utiliser des espaces dans les noms de classe, pour des raisons qui s'éclairciront plus loin. | Dans ce cas, j'ai utilisé le nom de classe « important-thing », car le style d'un filet rouge autour d'un fond rouge sombre suggère qu'il pourrait être utilisé pour indiquer des éléments importants. Mais la classe peut être tout ce que vous voulez, en se limitant à la seule utilisation de caractères alphanumériques, de traits de soulignement et de tirets. Notez que vous ne pouvez pas utiliser des espaces dans les noms de classe, pour des raisons qui s'éclairciront plus loin. |
| |
| Dans ce fichier exemple, nous n'avons pas gagné grand-chose en utilisant les classes. Le résultat final est le même, que nous utilisions un attribut de style ou l'un des trois sélecteurs du CSS que nous avons vu, parce qu'il n'y a dans le fichier qu'un seul élément qui peut être affecté. Mais, que se passe-t-il si nous ajoutons un second élément à notre fichier : | Dans ce fichier exemple, nous n'avons pas gagné grand-chose en utilisant les classes. Le résultat final est le même, que nous utilisions un attribut de style ou l'un des trois sélecteurs du CSS que nous avons vus, parce qu'il n'y a dans le fichier qu'un seul élément qui peut être affecté. Mais que se passe-t-il si nous ajoutons un second élément à notre fichier ? : |
| |
| <circle | <circle |
| Ceci est un type d'objet différent ; aussi, traiter son esthétique via un <style> utilisant le sélecteur d'élément « rect » ne fonctionnera pas. Il a un id différent (il le doit, car les id doivent être uniques dans un document XML). Aussi un sélecteur d'id ne marchera pas non plus. Mais les classes n'ont pas à être uniques ; aussi, nous avons donné à ce cercle la même classe que notre rectangle précédent. Voici le résultat, les deux objets se partageant le même style : | Ceci est un type d'objet différent ; aussi, traiter son esthétique via un <style> utilisant le sélecteur d'élément « rect » ne fonctionnera pas. Il a un id différent (il le doit, car les id doivent être uniques dans un document XML). Aussi un sélecteur d'id ne marchera pas non plus. Mais les classes n'ont pas à être uniques ; aussi, nous avons donné à ce cercle la même classe que notre rectangle précédent. Voici le résultat, les deux objets se partageant le même style : |
| |
| Il est important de noter que tous les styles que vous souhaitez paramétrer en utilisant un bloc <style> ne doivent pas être présents dans le XML de l'objet lui-même. Les règles d'héritage du CSS dicte que les styles paramétrés directement sur les éléments ont, en général, la priorité sur ceux établis ailleurs. Mais, ceci vous donne la possibilité d'outrepasser les styles sur des éléments particuliers. Si vous voulez un couleur de remplissage différente pour le cercle, vous pouvez simplement la paramétrer dans un attribut de style, mais hériter encore de la largeur et de la couleur du trait via la classe : | Il est important de noter que tous les styles que vous souhaitez paramétrer en utilisant un bloc <style> ne doivent pas être présents dans le XML de l'objet lui-même. Les règles d'héritage du CSS dicte que les styles paramétrés directement sur les éléments ont, en général, la priorité sur ceux établis ailleurs. Mais ceci vous donne la possibilité d'outrepasser les styles sur des éléments particuliers. Si vous voulez une couleur de remplissage différente pour le cercle, vous pouvez simplement la paramétrer dans un attribut de style, mais hériter encore de la largeur et de la couleur du trait via la classe : |
| |
| <circle | <circle |
| **Unfortunately, Inkscape doesn’t have any native support for creating and modifying CSS classes. Any edits you make to an element will be applied directly to its own ‘style’ attribute, or to other attributes directly on the element. Such changes won’t delete or change your <style> block, and won’t alter the ‘class’ attribute on the element, so at least Inkscape doesn’t completely destroy any manual edits you’ve applied. But, as we’ve seen, values set directly on an element will take priority over those applied via a class, so you can easily end up in a situation where your classes no longer appear to have any effect. For this reason, I recommend doing any work with classes in a text editor, rather than Inkscape, and making those changes as late in the design process as possible. Ideally you won’t have to re-open your document in Inkscape at all, but, if you do, take care not to change the styles of any elements that you expect to control using classes – or at least be prepared to re-edit the files in your text editor afterwards.** | **Unfortunately, Inkscape doesn’t have any native support for creating and modifying CSS classes. Any edits you make to an element will be applied directly to its own ‘style’ attribute, or to other attributes directly on the element. Such changes won’t delete or change your <style> block, and won’t alter the ‘class’ attribute on the element, so at least Inkscape doesn’t completely destroy any manual edits you’ve applied. But, as we’ve seen, values set directly on an element will take priority over those applied via a class, so you can easily end up in a situation where your classes no longer appear to have any effect. For this reason, I recommend doing any work with classes in a text editor, rather than Inkscape, and making those changes as late in the design process as possible. Ideally you won’t have to re-open your document in Inkscape at all, but, if you do, take care not to change the styles of any elements that you expect to control using classes – or at least be prepared to re-edit the files in your text editor afterwards.** |
| |
| Malheureusement, Inkscape n'a pas de support natif pour créer et modifier les classes du CSS. Toutes les modifications que vous faites sur un élément seront directement appliquées sur son propre attribut « style », ou aux autres attributs, directement dans l'élément. De telles modifications n'effaceront ni ne modifieront votre bloc <style>, et n'altèreront pas l'attribut « class » de l'élément ; aussi, au final, Inkscape ne détruit pas complètement toutes les modifications manuelles que vous avez faites. Mais, comme nous l'avons vu, les valeurs mises directement sur un élément auront la priorité sur celles faites via une classe ; ainsi, vous pouvez facilement vous retrouver dans une situation où vos classes paraissent ne plus avoir aucun effet. Pour cette raison, je recommande de faire tous les travaux sur les classes dans un éditeur de texte, plutôt que dans Inkscape, et de faire ces modifications le plus tard possible dans la conception. Idéalement, vous ne devriez plus avoir à ré-ouvrir votre document dans Inkscape ; mais, si vous le faites, prenez garde de ne modifier les styles d'aucun des éléments que vous espérez contrôler en utilisant des classes. Ou, du moins, soyez prêt à ré-éditer ensuite les fichiers dans votre éditeur de texte. | Malheureusement, Inkscape n'a pas de support natif pour créer et modifier les classes du CSS. Toutes les modifications que vous faites sur un élément seront directement appliquées sur son propre attribut « style », ou aux autres attributs, directement dans l'élément. De telles modifications n'effaceront ni ne modifieront votre bloc <style>, et n'altéreront pas l'attribut « class » de l'élément ; aussi, au final, Inkscape ne détruit pas complètement toutes les modifications manuelles que vous avez faites. Mais, comme nous l'avons vu, les valeurs mises directement sur un élément auront la priorité sur celles faites via une classe ; ainsi, vous pouvez facilement vous retrouver dans une situation où vos classes paraissent ne plus avoir aucun effet. Pour cette raison, je recommande de faire tous les travaux sur les classes dans un éditeur de texte, plutôt que dans Inkscape, et de faire ces modifications le plus tard possible dans la conception. Idéalement, vous ne devriez plus avoir à ré-ouvrir votre document dans Inkscape ; mais si vous le faites, prenez garde de ne modifier les styles d'aucun des éléments que vous espérez contrôler en utilisant des classes. Ou, du moins, soyez prêt à ré-éditer ensuite les fichiers dans votre éditeur de texte. |
| |
| **JavaScript offers a few ways to work with CSS classes, but by far the easiest is the ‘classList’ property. This has add(), remove(), toggle(), replace() and contains() methods that handle all the corner cases and error handling for you. You can add() a class without having to check if it’s already there. You can remove() a class and the code won’t throw an error if the class doesn’t exist. The toggle() method will add the class if it’s missing, or remove it if it’s present, which can simplify the code for basic on/off styling. You can use replace(), as the name suggests, to swap one class for another, and contains() does a search of the class attribute to tell you whether or not the name you supply is already present. | **JavaScript offers a few ways to work with CSS classes, but by far the easiest is the ‘classList’ property. This has add(), remove(), toggle(), replace() and contains() methods that handle all the corner cases and error handling for you. You can add() a class without having to check if it’s already there. You can remove() a class and the code won’t throw an error if the class doesn’t exist. The toggle() method will add the class if it’s missing, or remove it if it’s present, which can simplify the code for basic on/off styling. You can use replace(), as the name suggests, to swap one class for another, and contains() does a search of the class attribute to tell you whether or not the name you supply is already present. |
| 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).** | 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éeons une paire de fonctions en tant que scripts incorporés. Nous les appelerons « 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. | 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); | toggle1(this); |
