Utilisation des feuilles de style

Inkscape » SVG et Internet » Utilisation des feuilles de style

Les dessins SVG peuvent utiliser des CSS (Cascading Style Sheets, Feuilles de style en cascade) pour contrôler la présentation des objets dessinés. Le support des feuilles de style n'en est qu'aux balbutiements dans Inkscape. On peut toutefois réaliser un certain nombre de choses simples et utiles. Pour le moment, Inkscape ne peut manipuler qu'une feuille de style interne. Les feuilles de style externes ne peuvent pas être utilisées.

Dans l'exemple suivant, un CSS est utilisé pour modifier l'opacité du carré bleu à chaque fois que le curseur de la souris passe au-dessus (quand le dessin est affiché dans un navigateur compatible SVG).


<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
   xmlns:svg="http://www.w3.org/2000/svg"
   xmlns="http://www.w3.org/2000/svg"
   xmlns:xlink="http://www.w3.org/1999/xlink"
   version="1.0"
   width="150"
   height="150"
   id="svg1341">
  <defs
     id="defs1343" />
  <style     
     id="style1324"
     type="text/css">
     rect:hover {fill-opacity:1.0;}     
  </style>
  <g
     id="layer1">
    <a
       xlink:href="http://www.w3.org/"
       style="fill-opacity:0.75"     
       id="a1445">
      <rect
         width="90"
         height="90"
         x="30"
         y="30"
         style="fill:#0000ff;stroke:#000000;stroke-width:1px"     
         id="rect1353" />
    </a>
  </g>
</svg>

	Début de la feuille de style.
	Déclaration du survol du rectangle (c.-à-d. quand le curseur de la souris est au-dessus du rectangle).
	Opacité par défaut du rectangle.
	Style du rectangle. Notez que « fill-opacity » (opacité du remplissage) n'est pas défini ici. Ceci permet aux attributs des classes d'être outrepassés.

L'attribut de style peut soit être ajouté dans un éditeur de texte, soit avec un peu de difficulté dans le dialogue de l'Éditeur XML d'Inkscape (Édition → Éditeur XML... (Maj+Ctrl+X)). L'attribut fill-opacity (opacité du remplissage) doit être supprimé du rectangle et placé dans une enveloppe du rectangle.

Étapes pour ajouter une feuille de style à l'aide du dialogue de l'Éditeur XML :

Ouvrez le dialogue de l'Éditeur XML.
Sélectionnez l'entrée <svg:svg> tout en haut.
Cliquez sur l'icône Nouveau nœud élément .
Entrez « svg:style » dans la boîte de saisie ; cliquez sur le bouton Créer.
Tirez le nouveau nœud au-dessus du premier <svg:g> (layer1).
Sélectionnez le nœud <svg:style>.
Entrez « type » dans la ligne d'entrée Attribute (au milieu du dialogue).
Entrez « text/css » dans la zone d'entrée Value (en bas du dialogue).
Cliquez sur le bouton Définir.
Cliquez sur l'icône Nouveau nœud texte .
Entrez : « rect:hover {fill-opacity:1.0;} » à droite, avec un retour chariot avant et après (qui supprime les guillemets).
Cliquez sur le triangle pour ouvrir le nœud <svg:g id="layer1">.
Cliquez sur le triangle pour ouvrir le nœud <svg:a>.
Sélectionnez le rectangle, sélectionnez l'attribut style, sélectionnez « fill-opacity:0.75; » et coupez (Ctrl+X).
Sélectionnez le nœud <svg:a>, ajoutez « style » à la ligne d'entrée Attribute, collez (Ctrl+V) "fill-opacity:0.75" dans la zone de saisie Value.
Enregistrez, mais n'enregistrez PAS comme fichier SVG simple, car ceci supprimerait l'attribut « hover » du nœud de style CSS (bogue).


Ajout de liens		Animation simple