| Les deux révisions précédentesRévision précédenteProchaine révision | Révision précédente |
| issue173:inkscape [2021/09/30 09:29] – d52fr | issue173:inkscape [2021/10/03 17:34] (Version actuelle) – andre_domenech |
|---|
| The style of each object is the same, and that information is stored in the element’s “style” property, as Inkscape does by default. Looking at the first row, therefore, the structure of the SVG content boils down to something like that shown top right.** | The style of each object is the same, and that information is stored in the element’s “style” property, as Inkscape does by default. Looking at the first row, therefore, the structure of the SVG content boils down to something like that shown top right.** |
| |
| La dernière fois, je me suis livré à un tour d'horizon du support CSS dans les fichiers SVG, en préparation du sujet de ce mois-ci : le dialogue Sélecteurs et CSS. Comme je l'ai indiqué précédemment, cette boîte de dialogue est d'abord apparue comme une option cachée dans la version 1.0 d'Inkscape, puis a été officiellement exposée dans la version 1.0.1. Elle peut être ouverte à l'aide du raccourci clavier Ctrl-Shift-Q (même sur la v1.0), les versions ultérieures l'exposant également via le menu Objet. D'après mon expérience, il est encore un peu bogué, même dans la version 1.1, et peut conduire à des plantages complets de l'application, donc assurez-vous de sauvegarder régulièrement si vous décidez de l'utiliser. | La dernière fois, je me suis livré à un rapide tour du support CSS dans les fichiers SVG, en préparation du sujet de ce mois-ci : le dialogue Sélecteurs et CSS. Comme je l'ai indiqué précédemment, cette boîte de dialogue est d'abord apparue comme une option cachée dans la version 1.0 d'Inkscape, puis a été officiellement révélée dans la version 1.0.1. Elle peut être ouverte à l'aide du raccourci clavier Ctrl-Shift-Q (même sur la v1.0), les versions ultérieures l'affichant également via le menu Objet. D'après mon expérience, il est encore un peu bogué, même dans la version 1.1, et peut conduire à des plantages complets de l'application, donc assurez-vous de faire des sauvegardes régulières si vous décidez de l'utiliser. |
| |
| Pour décrire le fonctionnement de cette boîte de dialogue, il faut disposer d'un document type sur lequel travailler - de préférence un document comportant un mélange d'éléments à cibler via des sélecteurs CSS. Pour les besoins de cet article, j'ai donc créé une collection de seize éléments (quatre carrés, quatre cercles, quatre étoiles et quatre chemins de Bézier), disposés en quatre rangées, le contenu de chaque rangée étant groupé. | Pour décrire le fonctionnement de cette boîte de dialogue, il faut disposer d'un document type sur lequel travailler - de préférence un document comportant un mélange d'éléments à cibler via des sélecteurs CSS. Pour les besoins de cet article, j'ai donc créé une collection de seize éléments (quatre carrés, quatre cercles, quatre étoiles et quatre chemins de Bézier), disposés en quatre rangées, le contenu de chaque rangée étant groupé. |
| |
| Le style de chaque objet est le même, et cette information est stockée dans la propriété « style » de l'élément, comme le fait Inkscape par défaut. En regardant la première ligne, la structure du contenu SVG se résume donc à quelque chose comme ce qui est montré en haut à droite. | Le style de chaque objet est le même et cette information est stockée dans la propriété « style » de l'élément, comme le fait Inkscape par défaut. En regardant la première ligne, la structure du contenu SVG se résume donc à quelque chose comme ce qui est montré en haut à droite. |
| |
| |
| The buttons in the bottom-right corner can be used to switch between horizontal and vertical orientation – though in both cases, in my opinion, the panels are presented in the wrong order. The only other interactive elements at this stage are the plus and minus buttons in the bottom-right corner. The latter does nothing right now (and should probably be disabled), leaving us with little to do but press the plus (+) button. This will open a small “CSS Selector” dialog, pre-filled with a class name (including the preceding dot, as required in CSS syntax).** | The buttons in the bottom-right corner can be used to switch between horizontal and vertical orientation – though in both cases, in my opinion, the panels are presented in the wrong order. The only other interactive elements at this stage are the plus and minus buttons in the bottom-right corner. The latter does nothing right now (and should probably be disabled), leaving us with little to do but press the plus (+) button. This will open a small “CSS Selector” dialog, pre-filled with a class name (including the preceding dot, as required in CSS syntax).** |
| |
| Comme d'habitude, j'ai omis une grande partie du contenu du SVG pour des raisons de clarté, y compris les propriétés de style supplémentaires et les espaces de noms de la plupart des éléments et attributs. Notez le premier chemin, cependant, où j'ai spécifiquement inclus l'attribut sodipodi:type qui indique à Inkscape qu'il s'agit d'une primitive d'étoile. Le chemin de Bézier, d'un autre côté, n'a pas un tel attribut, car c'est juste un élément de chemin SVG standard et ne nécessite pas d'indications supplémentaires pour qu'Inkscape comprenne comment travailler avec lui. Les ID sont juste des valeurs arbitraires attribuées par Inkscape - dans un fichier réel, vous les modifieriez peut-être pour qu'ils soient plus descriptifs ou conviviaux. | Comme d'habitude, j'ai omis une grande partie du contenu du SVG pour des raisons de clarté, y compris les propriétés de style supplémentaires et les espaces de noms de la plupart des éléments et attributs. Notez le premier chemin, cependant, où j'ai spécifiquement inclus l'attribut sodipodi:type qui indique à Inkscape qu'il s'agit d'une primitive d'étoile. Le chemin de Bézier, lui, n'a pas un tel attribut, car c'est juste un élément de chemin SVG standard et ne nécessite pas d'indications supplémentaires pour qu'Inkscape comprenne comment travailler avec. Les ID sont juste des valeurs arbitraires attribuées par Inkscape, dans un fichier réel, vous les modifieriez peut-être pour qu'ils soient plus descriptifs ou conviviaux. |
| |
| Il est maintenant temps d'ouvrir la boîte de dialogue Sélecteurs et CSS (ci-après dénommée boîte de dialogue Sélecteurs, par souci de concision), via l'entrée de menu Objet > Sélecteurs et CSS.... Si rien n'est sélectionné sur la page, préparez-vous à une certaine déception, car il n'y a pas vraiment de fonctionnalité à ce stade. | Il est maintenant temps d'ouvrir la boîte de dialogue Sélecteurs et CSS (ci-après dénommée boîte de dialogue Sélecteurs, par souci de concision), via l'entrée de menu Objet > Sélecteurs et CSS... Si rien n'est sélectionné sur la page, préparez-vous à une certaine déception, car il n'y a pas vraiment de fonctionnalité à ce stade. |
| |
| Les boutons dans le coin inférieur droit peuvent être utilisés pour passer de l'orientation horizontale à l'orientation verticale - bien que dans les deux cas, à mon avis, les panneaux soient présentés dans le mauvais ordre. Les seuls autres éléments interactifs pour le moment sont les boutons plus et moins dans le coin inférieur droit. Ce dernier ne fait rien pour l'instant (et devrait probablement être désactivé), ce qui ne nous laisse guère d'autre choix que d'appuyer sur le bouton plus (+). Cela ouvrira une petite boîte de dialogue « Sélecteur CSS », préremplie avec un nom de classe (y compris le point du début, comme l'exige la syntaxe CSS). | Les boutons dans le coin inférieur droit peuvent être utilisés pour passer de l'orientation horizontale à l'orientation verticale, bien que dans les deux cas, à mon avis, les panneaux soient présentés dans le mauvais ordre. Les seuls autres éléments interactifs pour le moment sont les boutons plus et moins dans le coin inférieur droit. Ce dernier ne fait rien pour l'instant (et devrait probablement être désactivé), ce qui ne nous laisse guère d'autre choix que d'appuyer sur le bouton plus (+). Cela ouvrira une petite boîte de dialogue « Sélecteur CSS », préremplie avec un nom de classe (y compris le point du début, comme l'exige la syntaxe CSS). |
| |
| |
| Pour l'instant, nous allons nous contenter d'accepter la valeur par défaut du sélecteur en cliquant sur le bouton Ajouter. Préparez-vous à l'écrasante complexité des changements apportés à la boîte de dialogue principale. | Pour l'instant, nous allons nous contenter d'accepter la valeur par défaut du sélecteur en cliquant sur le bouton Ajouter. Préparez-vous à l'écrasante complexité des changements apportés à la boîte de dialogue principale. |
| |
| Lorsque vous serez complètement remis de cette excitation, vous voudrez peut-être prendre un moment pour vraiment apprécier ce qui s'est passé : il y a maintenant une entrée dans le panneau de droite étiquetée « .Class1 », et avec un autre bouton « plus » à côté ! Vous pouvez sélectionner la nouvelle ligne, mais un double-clic ne vous permettra pas de modifier la valeur - il n'y a aucun moyen de modifier un sélecteur une fois qu'il a été ajouté, donc si vous faites une erreur, votre seul recours est de le supprimer et de recommencer. En parlant de suppression, notre bouton « moins » a désormais une utilité : lorsque la nouvelle entrée est sélectionnée, un clic sur ce bouton permet de supprimer l'ensemble de l'entrée. Et qu'en est-il de notre nouveau bouton plus spécifique à l'entrée ? À ce stade, cliquer sur ce bouton n'apporte absolument rien. Il n'y a même pas d'info-bulle pour suggérer ce qu'il est censé faire. | Lorsque vous serez complètement remis de cette excitation, vous voudrez peut-être prendre un moment pour vraiment apprécier ce qui s'est passé : il y a maintenant une entrée dans le panneau de droite étiquetée « .Class1 » et avec un autre bouton « plus » à côté ! Vous pouvez sélectionner la nouvelle ligne, mais un double-clic ne vous permettra pas de modifier la valeur ; il n'y a aucun moyen de modifier un sélecteur une fois qu'il a été ajouté, aussi, si vous faites une erreur, votre seul recours est de le supprimer et de recommencer. En parlant de suppression, notre bouton « moins » a désormais une utilité : lorsque la nouvelle entrée est sélectionnée, un clic sur ce bouton permet de supprimer l'ensemble de l'entrée. Et qu'en est-il de notre nouveau bouton plus (+) spécifique à l'entrée ? À ce stade, cliquer sur ce bouton n'apporte absolument rien. Il n'y a même pas d'info-bulle pour suggérer ce qu'il est censé faire. |
| |
| Le but de ce bouton est d'ajouter le nom de la classe à tous les éléments SVG sélectionnés, afin qu'ils correspondent au sélecteur CSS et apparaissent dans la boîte de dialogue. Voyons un exemple pratique en sélectionnant le premier élément de chaque rangée. Rappelez-vous que chaque rangée est un groupe séparé, nous devons donc maintenir les touches Ctrl+Shift pour sélectionner un objet dans le groupe (Ctrl) et l'ajouter à la sélection existante (Shift). En maintenant ces touches enfoncées, il est facile de cliquer sur le premier objet de chaque ligne, ce qui nous donne une sélection de quatre éléments. En cliquant sur le bouton plus, la classe « Class1 » sera ajoutée à chacun des éléments, et la boîte de dialogue Sélecteurs se met à jour pour nous montrer les ID des éléments qui correspondent au sélecteur. | Le but de ce bouton est d'ajouter le nom de la classe à tous les éléments SVG sélectionnés, afin qu'ils correspondent au sélecteur CSS et apparaissent dans la boîte de dialogue. Voyons un exemple pratique en sélectionnant le premier élément de chaque rangée. Rappelez-vous que chaque rangée est un groupe séparé ; nous devons donc maintenir les touches Ctrl+Shift enfoncées pour sélectionner un objet dans le groupe (Ctrl) et l'ajouter à la sélection existante (Shift). En maintenant ces touches enfoncées, il est facile de cliquer sur le premier objet de chaque ligne, ce qui nous donne une sélection de quatre éléments. En cliquant sur le bouton plus, la classe « Class1 » sera ajoutée à chacun des éléments, et la boîte de dialogue Sélecteurs se met à jour pour nous montrer les ID des éléments qui correspondent au sélecteur. |
| |
| |
| <rect class="Class1" ... /> | <rect class="Class1" ... /> |
| |
| Notez qu'Inkscape donne aux éléments <circle> un ID qui commence par « path », donc les trois ID path et un rect listés représentent en fait deux chemins (l'étoile et le chemin de Bézier), un cercle et un carré. C'est un peu déroutant au début, mais rappelez-vous qu'un ID n'est qu'une étiquette unique et qu'il ne doit pas nécessairement être lié au type d'objet. Si vous cliquez sur un seul ID dans la boîte de dialogue, l'objet associé sera sélectionné sur le canevas, il est donc assez facile de savoir quels éléments ont quels ID. Pour l'instant, nous supposons que le sélecteur CSS lui-même (« .Class1 ») est sélectionné, comme dans l'image précédente. Vous remarquerez que le volet de gauche s'est enrichi d'un peu de contenu - et d'un bouton plus. | Notez qu'Inkscape donne aux éléments <circle> un ID qui commence par « path », donc les trois ID path et un ID rect listés représentent en fait deux chemins (l'étoile et le chemin de Bézier), un cercle et un carré. C'est un peu déroutant au début, mais rappelez-vous qu'un ID n'est qu'une étiquette unique et qu'il ne doit pas nécessairement être lié au type d'objet. Si vous cliquez sur un seul ID dans la boîte de dialogue, l'objet associé sera sélectionné sur le canevas et il est assez facile de savoir quels éléments ont quels ID. Pour l'instant, nous supposons que le sélecteur CSS lui-même (« .Class1 ») est sélectionné, comme dans l'image précédente. Vous remarquerez que le volet de gauche s'est enrichi d'un peu de contenu - et d'un bouton plus. |
| |
| Le volet de gauche affiche les propriétés CSS qui s'appliquent aux éléments actuellement sélectionnés, reflétant dans ce cas la feuille de style qu'Inkscape a créée dans l'en-tête du document. Le bouton plus nous permet d'ajouter d'autres propriétés. L'interface utilisateur est un peu maladroite, mais lorsque vous cliquez sur le bouton, une nouvelle entrée vide est créée avec le champ du nom de la propriété sélectionné, prêt pour une saisie. Saisissez le nom de la propriété, puis appuyez sur Entrée ou sur Tab pour passer au champ de valeur, où vous pouvez saisir une valeur appropriée pour votre propriété. Voici, par exemple, ce qui arrive à notre sélection lorsque je définis deux couleurs CSS, une pour le contour et une autre pour le remplissage. | Le volet de gauche affiche les propriétés CSS qui s'appliquent aux éléments actuellement sélectionnés, reflétant dans ce cas la feuille de style qu'Inkscape a créée dans l'en-tête du document. Le bouton plus nous permet d'ajouter d'autres propriétés. L'interface utilisateur est un peu maladroite, mais lorsque vous cliquez sur le bouton, une nouvelle entrée vide est créée avec le champ du nom de la propriété sélectionné, prêt pour une saisie. Saisissez le nom de la propriété, puis appuyez sur Entrée ou sur Tab pour passer au champ de valeur, où vous pouvez saisir une valeur appropriée pour votre propriété. Voici, par exemple, ce qui arrive à notre sélection lorsque je définis deux couleurs CSS, une pour le contour et une autre pour le remplissage. |
| Chaque propriété possède un bouton, qui permet de la supprimer complètement, et une case à cocher qui permet de l'activer ou de la désactiver. Mais ces éléments ne fonctionnent pas nécessairement comme vous l'attendez. Dans cet exemple, vous pourriez penser que la désactivation (ou la suppression) de la propriété de remplissage ramènerait les objets à leur remplissage rouge précédent, mais ce n'est pas du tout le cas. Au contraire, le remplissage devient noir. | Chaque propriété possède un bouton, qui permet de la supprimer complètement, et une case à cocher qui permet de l'activer ou de la désactiver. Mais ces éléments ne fonctionnent pas nécessairement comme vous l'attendez. Dans cet exemple, vous pourriez penser que la désactivation (ou la suppression) de la propriété de remplissage ramènerait les objets à leur remplissage rouge précédent, mais ce n'est pas du tout le cas. Au contraire, le remplissage devient noir. |
| |
| Qu'est-ce qui se passe ici ? Vous vous souvenez du le mois dernier que les propriétés CSS contenues dans un attribut « style » remplacent celles de la feuille de style. Mais le remplissage et le trait de nos éléments ont tous été définis par des attributs de style lorsque nous les avons créés, alors comment le remplissage jaune (qui provient de la feuille de style) a-t-il pu fonctionner en premier lieu ? La réponse est qu'Inkscape supprime automatiquement les propriétés conflictuelles de l'attribut de style lorsque vous commencez à les ajouter via la boîte de dialogue Sélecteurs. | Qu'est-ce qui se passe ici ? Vous vous souvenez, le mois dernier, que les propriétés CSS contenues dans un attribut « style » remplacent celles de la feuille de style. Mais le remplissage et le trait de nos éléments ont tous été définis par des attributs de style lorsque nous les avons créés, alors comment le remplissage jaune (qui provient de la feuille de style) a-t-il pu fonctionner en premier lieu ? La réponse est qu'Inkscape supprime automatiquement les propriétés conflictuelles de l'attribut de style lorsque vous commencez à les ajouter via la boîte de dialogue Sélecteurs. |
| |
| Dans ce cas, cela signifie que le remplissage rouge de l'attribut de style a été supprimé dès que le remplissage jaune a été ajouté à la feuille de style. Désactivez cette entrée, cependant, et Inkscape n'a plus aucune idée de la couleur de remplissage à utiliser. Dans ce cas, la spécification SVG est très claire : la valeur initiale pour le remplissage - celle à laquelle Inkscape se rabat - est le noir. La spécification définit également la valeur initiale du trait comme étant « none » (aucun) - ainsi, la désactivation ou la suppression de la propriété du trait entraîne en fait la suppression de l'ensemble du trait, au lieu de laisser un trait noir épais. | Dans ce cas, cela signifie que le remplissage rouge de l'attribut de style a été supprimé dès que le remplissage jaune a été ajouté à la feuille de style. Désactivez cette entrée, cependant, et Inkscape n'a plus aucune idée de la couleur de remplissage à utiliser. Dans ce cas, la spécification SVG est très claire : la valeur initiale pour le remplissage - celle à laquelle Inkscape se rabat - est le noir. La spécification définit également la valeur initiale du trait comme étant « none » (aucun) - ainsi, la désactivation ou la suppression de la propriété du trait entraîne en fait la suppression de l'ensemble du trait, au lieu de laisser un trait noir épais. |
