Outils pour utilisateurs

Outils du site


issue173:inkscape

Différences

Ci-dessous, les différences entre deux révisions de la page.

Lien vers cette vue comparative

Les deux révisions précédentesRévision précédente
Prochaine révision
Révision précédente
issue173:inkscape [2021/10/01 12:47] auntieeissue173:inkscape [2021/10/03 17:34] (Version actuelle) andre_domenech
Ligne 18: Ligne 18:
 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, 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.+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 Inkscapedans 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 verticalebien 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).
  
  
Ligne 32: Ligne 32:
 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é, 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.+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 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. 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.
Ligne 62: Ligne 62:
 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 souvenezle mois dernierque 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.
issue173/inkscape.1633085278.txt.gz · Dernière modification : 2021/10/01 12:47 de auntiee