From 681ea6909006505f92ae06c7c4fe78af002f9f69 Mon Sep 17 00:00:00 2001 From: tristantheb Date: Thu, 22 Apr 2021 20:41:32 +0200 Subject: L10N: Update of the exercise from the US version - Issue #547 (#607) * L10N: Update of the exercise from the US version * Review - minor english items remaining - lint Co-authored-by: julieng --- files/fr/web/svg/tutorial/svg_and_css/index.html | 489 +++++++++++++++++------ 1 file changed, 366 insertions(+), 123 deletions(-) (limited to 'files') diff --git a/files/fr/web/svg/tutorial/svg_and_css/index.html b/files/fr/web/svg/tutorial/svg_and_css/index.html index efd1ce5382..d941eff34f 100644 --- a/files/fr/web/svg/tutorial/svg_and_css/index.html +++ b/files/fr/web/svg/tutorial/svg_and_css/index.html @@ -1,199 +1,442 @@ --- -title: Graphiques SVG +title: SVG et CSS slug: Web/SVG/Tutorial/SVG_and_CSS tags: - CSS - - CSS:Premiers_pas + - CSS:Getting_Started + - Example + - Guide + - Intermediate + - NeedsUpdate + - SVG + - Web translation_of: Web/SVG/Tutorial/SVG_and_CSS original_slug: CSS/Premiers_pas/Graphiques_SVG --- -

 

-

Cette page illustre le langage spécialisé dans la création d'éléments graphiques : SVG.

-

Vous créerez une démonstration simple visible dans votre navigateur Mozilla avec SVG activé.

-

Information : SVG

-

- - SVG - (Scalable Vector Graphics) est un langage basé sur XML permettant de créer des éléments graphiques.

-

Il peut être utilisé pour des images statiques, ainsi que pour des animations et des interfaces utilisateur.

-

Comme d'autres langages basés sur XML, SVG permet d'utiliser des feuilles de style CSS afin de séparer le style d'un graphique de son contenu.

-

De plus, les feuilles de style utilisées avec d'autres langages de balisages peuvent spécifier l'URL d'un graphique SVG lorsqu'une image est requise. Par exemple, une feuille de style utilisée avec un document HTML peut spécifier l'URL d'un graphique SVG dans la valeur d'une propriété background.

- - - - - - - -
- Plus de détails
Au moment de la rédaction de ce document (courant 2005), seules certains compilations récentes des navigateurs Mozilla ont leur gestion native de SVG activée. -

Vous pouvez ajouter un support SVG à d'autres versions en installant un plugin comme celui fourni par Adobe.

-

Pour plus d'informations à propos de SVG dans Mozilla, consultez la page SVG de ce wiki.

-
-

Action : une démonstration de SVG

-

Créez un nouveau document SVG en tant que fichier texte simple, doc8.svg. Copiez et collez-y le contenu ci-dessous en vous assurant de le faire défiler afin d'en obtenir la totalité :

-
- 
<?xml version="1.0" standalone="no"?>
-
-<?xml-stylesheet type="text/css" href="style8.css"?>
-
-<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
-  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
-
-<svg width="600px" height="600px" viewBox="-300 -300 600 600"
-  xmlns="http://www.w3.org/2000/svg" version="1.1"
-  xmlns:xlink="http://www.w3.org/1999/xlink">
-
-<title>SVG demonstration</title>
-<desc>Premiers pas en CSS avec Mozilla - Démonstration de SVG</desc>
+
Cette page illustre l'application de CSS sur des documents SVG, le langage spécialisé dans la création d'éléments graphiques vectoriels.

+
+
Nous allons voir par la suite un exemple que vous pourrez copier pour l'exécuter dans votre navigateur (à la condition que celui-ci soit compatible avec SVG).

+
+

+  
Note :

+  
Les éléments référencés par des éléments <use> héritent des styles de cet élément. Pour leur appliquer des styles différents, il faut donc utiliser les propriétés CSS personnalisées (custom properties).

+

+
+
Exemple

+
+
Créez un nouveau document SVG en tant que fichier texte brut, doc.svg. Copiez et collez le contenu qui suit, en vous assurant de faire défiler le texte pour obtenir l'intégralité de l'exemple :

+
+
<svg width="600px" height="600px" viewBox="-300 -300 600 600"
+  xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+
+<title>Démonstration SVG</title>
+<desc>Démarrer avec CSS et SVG</desc>
 
 <defs>
-  <g id="segment" class="segment">
-    <path class="segment-fill" d="M0,0 v-200 a40,40 0 0,0 -62,10 z"/>
-    <path class="segment-edge" d="M0,-200 a40,40 0 0,0 -62,10"/>
-    </g>
-  <g id="quadrant">
-    <use xlink:href="#segment"/>
-    <use xlink:href="#segment" transform="rotate(18)"/>
-    <use xlink:href="#segment" transform="rotate(36)"/>
-    <use xlink:href="#segment" transform="rotate(54)"/>
-    <use xlink:href="#segment" transform="rotate(72)"/>
-    </g>
-  <g id="petals">
-    <use xlink:href="#quadrant"/>
-    <use xlink:href="#quadrant" transform="rotate(90)"/>
-    <use xlink:href="#quadrant" transform="rotate(180)"/>
-    <use xlink:href="#quadrant" transform="rotate(270)"/>
-    </g>
   <radialGradient id="fade" cx="0" cy="0" r="200"
       gradientUnits="userSpaceOnUse">
     <stop id="fade-stop-1" offset="33%"/>
     <stop id="fade-stop-2" offset="95%"/>
-    </radialGradient>
-  </defs>
+  </radialGradient>
+</defs>
 
-<text id="heading" x="-280" y="-270">
-  SVG demonstration</text>
-<text  id="caption" x="-280" y="-250">
-  Placez le pointeur de la souris au dessus de la fleur.</text>
+<text id="heading" x="-280" y="-270">Démonstration SVG</text>
+<text  id="caption" x="-280" y="-250">Déplacez le pointeur de
+ votre souris sur la fleur.</text>
 
 <g id="flower">
-  <circle id="overlay" cx="0" cy="0" r="200"
-    stroke="none" fill="url(#fade)"/>
-  <use id="outer-petals" xlink:href="#petals"/>
-  <use id="inner-petals" xlink:href="#petals"
-    transform="rotate(9) scale(0.33)"/>
+  <circle id="overlay" cx="0" cy="0" r="200" stroke="none" fill="url(#fade)"/>
+
+  <g id="outer-petals">
+    <g class="quadrant">
+      <g class="segment">
+        <path class="segment-fill" d="M0,0 v-200 a40,40 0 0,0 -62,10 z"/>
+        <path class="segment-edge" d="M0,-200 a40,40 0 0,0 -62,10"/>
+      </g>
+      <g class="segment" transform="rotate(18)">
+        <path class="segment-fill" d="M0,0 v-200 a40,40 0 0,0 -62,10 z"/>
+        <path class="segment-edge" d="M0,-200 a40,40 0 0,0 -62,10"/>
+      </g>
+      <g class="segment" transform="rotate(36)">
+        <path class="segment-fill" d="M0,0 v-200 a40,40 0 0,0 -62,10 z"/>
+        <path class="segment-edge" d="M0,-200 a40,40 0 0,0 -62,10"/>
+      </g>
+      <g class="segment" transform="rotate(54)">
+        <path class="segment-fill" d="M0,0 v-200 a40,40 0 0,0 -62,10 z"/>
+        <path class="segment-edge" d="M0,-200 a40,40 0 0,0 -62,10"/>
+      </g>
+      <g class="segment" transform="rotate(72)">
+        <path class="segment-fill" d="M0,0 v-200 a40,40 0 0,0 -62,10 z"/>
+        <path class="segment-edge" d="M0,-200 a40,40 0 0,0 -62,10"/>
+      </g>
+    </g>
+
+    <g class="quadrant">
+      <g class="segment" transform="rotate(90)">
+        <path class="segment-fill" d="M0,0 v-200 a40,40 0 0,0 -62,10 z"/>
+        <path class="segment-edge" d="M0,-200 a40,40 0 0,0 -62,10"/>
+      </g>
+      <g class="segment" transform="rotate(108)">
+        <path class="segment-fill" d="M0,0 v-200 a40,40 0 0,0 -62,10 z"/>
+        <path class="segment-edge" d="M0,-200 a40,40 0 0,0 -62,10"/>
+      </g>
+      <g class="segment" transform="rotate(126)">
+        <path class="segment-fill" d="M0,0 v-200 a40,40 0 0,0 -62,10 z"/>
+        <path class="segment-edge" d="M0,-200 a40,40 0 0,0 -62,10"/>
+      </g>
+      <g class="segment" transform="rotate(144)">
+        <path class="segment-fill" d="M0,0 v-200 a40,40 0 0,0 -62,10 z"/>
+        <path class="segment-edge" d="M0,-200 a40,40 0 0,0 -62,10"/>
+      </g>
+      <g class="segment" transform="rotate(162)">
+        <path class="segment-fill" d="M0,0 v-200 a40,40 0 0,0 -62,10 z"/>
+        <path class="segment-edge" d="M0,-200 a40,40 0 0,0 -62,10"/>
+      </g>
+    </g>
+
+    <g class="quadrant">
+      <g class="segment" transform="rotate(180)">
+        <path class="segment-fill" d="M0,0 v-200 a40,40 0 0,0 -62,10 z"/>
+        <path class="segment-edge" d="M0,-200 a40,40 0 0,0 -62,10"/>
+      </g>
+      <g class="segment" transform="rotate(198)">
+        <path class="segment-fill" d="M0,0 v-200 a40,40 0 0,0 -62,10 z"/>
+        <path class="segment-edge" d="M0,-200 a40,40 0 0,0 -62,10"/>
+      </g>
+      <g class="segment" transform="rotate(216)">
+        <path class="segment-fill" d="M0,0 v-200 a40,40 0 0,0 -62,10 z"/>
+        <path class="segment-edge" d="M0,-200 a40,40 0 0,0 -62,10"/>
+      </g>
+      <g class="segment" transform="rotate(234)">
+        <path class="segment-fill" d="M0,0 v-200 a40,40 0 0,0 -62,10 z"/>
+        <path class="segment-edge" d="M0,-200 a40,40 0 0,0 -62,10"/>
+      </g>
+      <g class="segment" transform="rotate(252)">
+        <path class="segment-fill" d="M0,0 v-200 a40,40 0 0,0 -62,10 z"/>
+        <path class="segment-edge" d="M0,-200 a40,40 0 0,0 -62,10"/>
+      </g>
+    </g>
+
+    <g class="quadrant">
+      <g class="segment" transform="rotate(270)">
+        <path class="segment-fill" d="M0,0 v-200 a40,40 0 0,0 -62,10 z"/>
+        <path class="segment-edge" d="M0,-200 a40,40 0 0,0 -62,10"/>
+      </g>
+      <g class="segment" transform="rotate(288)">
+        <path class="segment-fill" d="M0,0 v-200 a40,40 0 0,0 -62,10 z"/>
+        <path class="segment-edge" d="M0,-200 a40,40 0 0,0 -62,10"/>
+      </g>
+      <g class="segment" transform="rotate(306)">
+        <path class="segment-fill" d="M0,0 v-200 a40,40 0 0,0 -62,10 z"/>
+        <path class="segment-edge" d="M0,-200 a40,40 0 0,0 -62,10"/>
+      </g>
+      <g class="segment" transform="rotate(324)">
+        <path class="segment-fill" d="M0,0 v-200 a40,40 0 0,0 -62,10 z"/>
+        <path class="segment-edge" d="M0,-200 a40,40 0 0,0 -62,10"/>
+      </g>
+      <g class="segment" transform="rotate(342)">
+        <path class="segment-fill" d="M0,0 v-200 a40,40 0 0,0 -62,10 z"/>
+        <path class="segment-edge" d="M0,-200 a40,40 0 0,0 -62,10"/>
+      </g>
+    </g>
   </g>
 
-</svg>
-

-
-

Créez un nouveau fichier CSS, style8.css. Copiez et collez-y le contenu ci-dessous, en vous assurant de le faire défiler pour en obtenir la totalité :

-
- 
/*** Démonstration de SVG ***/
+  <g id="inner-petals" transform="rotate(9) scale(0.33)">
+    <g class="quadrant">
+      <g class="segment">
+        <path class="segment-fill" d="M0,0 v-200 a40,40 0 0,0 -62,10 z"/>
+        <path class="segment-edge" d="M0,-200 a40,40 0 0,0 -62,10"/>
+      </g>
+      <g class="segment" transform="rotate(18)">
+        <path class="segment-fill" d="M0,0 v-200 a40,40 0 0,0 -62,10 z"/>
+        <path class="segment-edge" d="M0,-200 a40,40 0 0,0 -62,10"/>
+      </g>
+      <g class="segment" transform="rotate(36)">
+        <path class="segment-fill" d="M0,0 v-200 a40,40 0 0,0 -62,10 z"/>
+        <path class="segment-edge" d="M0,-200 a40,40 0 0,0 -62,10"/>
+      </g>
+      <g class="segment" transform="rotate(54)">
+        <path class="segment-fill" d="M0,0 v-200 a40,40 0 0,0 -62,10 z"/>
+        <path class="segment-edge" d="M0,-200 a40,40 0 0,0 -62,10"/>
+      </g>
+      <g class="segment" transform="rotate(72)">
+        <path class="segment-fill" d="M0,0 v-200 a40,40 0 0,0 -62,10 z"/>
+        <path class="segment-edge" d="M0,-200 a40,40 0 0,0 -62,10"/>
+      </g>
+    </g>
+
+    <g class="quadrant">
+      <g class="segment" transform="rotate(90)">
+        <path class="segment-fill" d="M0,0 v-200 a40,40 0 0,0 -62,10 z"/>
+        <path class="segment-edge" d="M0,-200 a40,40 0 0,0 -62,10"/>
+      </g>
+      <g class="segment" transform="rotate(108)">
+        <path class="segment-fill" d="M0,0 v-200 a40,40 0 0,0 -62,10 z"/>
+        <path class="segment-edge" d="M0,-200 a40,40 0 0,0 -62,10"/>
+      </g>
+      <g class="segment" transform="rotate(126)">
+        <path class="segment-fill" d="M0,0 v-200 a40,40 0 0,0 -62,10 z"/>
+        <path class="segment-edge" d="M0,-200 a40,40 0 0,0 -62,10"/>
+      </g>
+      <g class="segment" transform="rotate(144)">
+        <path class="segment-fill" d="M0,0 v-200 a40,40 0 0,0 -62,10 z"/>
+        <path class="segment-edge" d="M0,-200 a40,40 0 0,0 -62,10"/>
+      </g>
+      <g class="segment" transform="rotate(162)">
+        <path class="segment-fill" d="M0,0 v-200 a40,40 0 0,0 -62,10 z"/>
+        <path class="segment-edge" d="M0,-200 a40,40 0 0,0 -62,10"/>
+      </g>
+    </g>
+
+    <g class="quadrant">
+      <g class="segment" transform="rotate(180)">
+        <path class="segment-fill" d="M0,0 v-200 a40,40 0 0,0 -62,10 z"/>
+        <path class="segment-edge" d="M0,-200 a40,40 0 0,0 -62,10"/>
+      </g>
+      <g class="segment" transform="rotate(198)">
+        <path class="segment-fill" d="M0,0 v-200 a40,40 0 0,0 -62,10 z"/>
+        <path class="segment-edge" d="M0,-200 a40,40 0 0,0 -62,10"/>
+      </g>
+      <g class="segment" transform="rotate(216)">
+        <path class="segment-fill" d="M0,0 v-200 a40,40 0 0,0 -62,10 z"/>
+        <path class="segment-edge" d="M0,-200 a40,40 0 0,0 -62,10"/>
+      </g>
+      <g class="segment" transform="rotate(234)">
+        <path class="segment-fill" d="M0,0 v-200 a40,40 0 0,0 -62,10 z"/>
+        <path class="segment-edge" d="M0,-200 a40,40 0 0,0 -62,10"/>
+      </g>
+      <g class="segment" transform="rotate(252)">
+        <path class="segment-fill" d="M0,0 v-200 a40,40 0 0,0 -62,10 z"/>
+        <path class="segment-edge" d="M0,-200 a40,40 0 0,0 -62,10"/>
+      </g>
+    </g>
+
+    <g class="quadrant">
+      <g class="segment" transform="rotate(270)">
+        <path class="segment-fill" d="M0,0 v-200 a40,40 0 0,0 -62,10 z"/>
+        <path class="segment-edge" d="M0,-200 a40,40 0 0,0 -62,10"/>
+      </g>
+      <g class="segment" transform="rotate(288)">
+        <path class="segment-fill" d="M0,0 v-200 a40,40 0 0,0 -62,10 z"/>
+        <path class="segment-edge" d="M0,-200 a40,40 0 0,0 -62,10"/>
+      </g>
+      <g class="segment" transform="rotate(306)">
+        <path class="segment-fill" d="M0,0 v-200 a40,40 0 0,0 -62,10 z"/>
+        <path class="segment-edge" d="M0,-200 a40,40 0 0,0 -62,10"/>
+      </g>
+      <g class="segment" transform="rotate(324)">
+        <path class="segment-fill" d="M0,0 v-200 a40,40 0 0,0 -62,10 z"/>
+        <path class="segment-edge" d="M0,-200 a40,40 0 0,0 -62,10"/>
+      </g>
+      <g class="segment" transform="rotate(342)">
+        <path class="segment-fill" d="M0,0 v-200 a40,40 0 0,0 -62,10 z"/>
+        <path class="segment-edge" d="M0,-200 a40,40 0 0,0 -62,10"/>
+      </g>
+    </g>
+  </g>
+</g>
+</svg>
+ +

Créez un nouveau fichier CSS, style.css. Copiez et collez-y le contenu ci-dessous, en vous assurant de le faire défiler pour en obtenir la totalité :

+ +
/*** Démonstration SVG ***/
 
 /* page */
 svg {
   background-color: beige;
-  }
+}
 
 #heading {
   font-size: 24px;
   font-weight: bold;
-  }
+}
 
 #caption {
   font-size: 12px;
-  }
+}
 
-/* flower */
+/* fleur */
 #flower:hover {
   cursor: crosshair;
-  }
+}
 
-/* gradient */
+/* dégradé */
 #fade-stop-1 {
   stop-color: blue;
-  }
+}
 
 #fade-stop-2 {
   stop-color: white;
-  }
+}
+
+/* pétales */
+.segment-fill {
+  fill: var(--segment-fill-fill);
+  stroke: var(--segment-fill-stroke);
+  stroke-width: var(--segment-fill-stroke-width);
+}
 
-/* outer petals */
+.segment-fill:hover {
+  fill: var(--segment-fill-fill-hover);
+  stroke: var(--segment-fill-stroke-hover);
+}
+
+.segment-edge {
+  fill: var(--segment-edge-fill);
+  stroke: var(--segment-edge-stroke);
+  stroke-width: var(--segment-edge-stroke-width);
+}
+
+.segment-edge:hover {
+  stroke: var(--segment-edge-stroke-hover);
+}
+
+/* extérieurs de pétales */
 #outer-petals {
   opacity: .75;
-  }
+  --segment-fill-fill: azure;
+  --segment-fill-stroke: lightsteelblue;
+  --segment-fill-stroke-width: 1;
+  --segment-edge-fill: none;
+  --segment-edge-stroke: deepskyblue;
+  --segment-edge-stroke-width: 3;
+  --segment-fill-fill-hover: plum;
+  --segment-fill-stroke-hover: none;
+  --segment-edge-stroke-hover: slateblue;
+}
 
+/*
+  Façon non standard de styliser les éléments référencés via les éléments <use>,
+  supportée par certains anciens navigateurs
+*/
 #outer-petals .segment-fill {
   fill: azure;
   stroke: lightsteelblue;
   stroke-width: 1;
-  }
+}
 
 #outer-petals .segment-edge {
   fill: none;
   stroke: deepskyblue;
   stroke-width: 3;
-  }
+}
 
 #outer-petals .segment:hover > .segment-fill {
   fill: plum;
   stroke: none;
-  }
+}
 
 #outer-petals .segment:hover > .segment-edge {
   stroke: slateblue;
-  }
+}
 
-/* inner petals */
+/* intérieurs de pétales */
+#inner-petals {
+  --segment-fill-fill: yellow;
+  --segment-fill-stroke: yellow;
+  --segment-fill-stroke-width: 1;
+  --segment-edge-fill: none;
+  --segment-edge-stroke: yellowgreen;
+  --segment-edge-stroke-width: 9;
+  --segment-fill-fill-hover: darkseagreen;
+  --segment-fill-stroke-hover: none;
+  --segment-edge-stroke-hover: green;
+}
+
+/*
+  Façon non standard de styliser les éléments référencés via les éléments <use>,
+  supportée par certains anciens navigateurs
+*/
 #inner-petals .segment-fill {
   fill: yellow;
-  stroke: yellowgreen;
+  stroke: yellow;
   stroke-width: 1;
-  }
+}
 
 #inner-petals .segment-edge {
   fill: none;
   stroke: yellowgreen;
   stroke-width: 9;
-  }
+}
 
 #inner-petals .segment:hover > .segment-fill {
   fill: darkseagreen;
   stroke: none;
-  }
+}
 
 #inner-petals .segment:hover > .segment-edge {
   stroke: green;
-  }
-
-
-

Ouvrez le document dans votre navigateur avec SVG activé. Placez le pointeur de la souris au dessus de l'image.

-

Ce wiki ne permet pas d'utiliser SVG dans ses pages, il n'est donc pas possible d'afficher la démonstration ici. L'image ressemble à ceci :

- - - - - - -
Démonstration de SVG
-

Remarques à propos de cette démonstration :

+} + +

Ouvrez le document dans votre navigateur compatible SVG. Déplacez le pointeur de votre souris sur le graphique pour voir ce qui se passe.

+ +

Résultat

+ +

{{EmbedLiveSample("example", "660", "660")}}

+ +

Notes sur cette démonstration :

+ -

 

- - - - - - - -
- Challenge
Modifiez la feuille de style pour que les pétales intérieurs deviennent tous roses lorsque le pointeur de la souris survole n'importe lequel d'entre-eux, sans changer la manière dont les pétales extérieurs fonctionnent.
-

 

-

Pour continuer

-

Si vous avez eu des difficultés à comprendre cette page, ou si vous avez d'autres commentaires à son sujet, n'hésitez pas à contribuer à sa page de discussion.

-

Dans cette démonstration, votre navigateur avec SVG activé sait déjà comment afficher les éléments SVG. La feuille de style modifie uniquement l'affichage dans une certaine mesure. C'est également le cas pour les documents HTML et XUL. Mais vous pouvez utiliser CSS pour des documents XML généralistes, où il n'y a aucune manière prédéfinie d'afficher les éléments. La page suivante en fait la démonstration : Données XML.

+ +
+

Défi :

+

Modifiez la feuille de style de sorte que les pétales intérieurs deviennent tous roses lorsque le pointeur de la souris passe sur l'un d'entre eux, sans modifier le fonctionnement des pétales extérieurs. +

+

Voir une solution à ce défi.

+ +

Structure simplifiée

+ +

La structure SVG présentée ci-dessus pourrait être écrite de manière beaucoup plus concise en référençant les différentes parties de la fleur via des éléments <use>. Ce comportement est normalisé, bien que seuls quelques navigateurs prennent en charge la pseudo-classe :hover et d'autres sélecteurs CSS plus complexes sur les éléments référencés via les éléments <use>, pour le moment. Il existe un débat sur les règles applicables à ces éléments référencés.

+ +

Voici comment se présente la structure du document SVG désormais.

+ +
<svg width="600px" height="600px" viewBox="-300 -300 600 600"
+    xmlns="http://www.w3.org/2000/svg">
+
+  <title>Démonstration SVG</title>
+  <desc>Démarrer avec CSS et SVG</desc>
+
+  <defs>
+    <g id="segment" class="segment">
+      <path class="segment-fill" d="M0,0 v-200 a40,40 0 0,0 -62,10 z"/>
+      <path class="segment-edge" d="M0,-200 a40,40 0 0,0 -62,10"/>
+    </g>
+    <g id="quadrant">
+      <use xlink:href="#segment"/>
+      <use xlink:href="#segment" transform="rotate(18)"/>
+      <use xlink:href="#segment" transform="rotate(36)"/>
+      <use xlink:href="#segment" transform="rotate(54)"/>
+      <use xlink:href="#segment" transform="rotate(72)"/>
+    </g>
+    <g id="petals">
+      <use xlink:href="#quadrant"/>
+      <use xlink:href="#quadrant" transform="rotate(90)"/>
+      <use xlink:href="#quadrant" transform="rotate(180)"/>
+      <use xlink:href="#quadrant" transform="rotate(270)"/>
+    </g>
+    <radialGradient id="fade" cx="0" cy="0" r="200"
+        gradientUnits="userSpaceOnUse">
+      <stop id="fade-stop-1" offset="33%"/>
+      <stop id="fade-stop-2" offset="95%"/>
+    </radialGradient>
+  </defs>
+
+  <text id="heading" x="-280" y="-270">Démonstration SVG</text>
+  <text  id="caption" x="-280" y="-250">Déplacez le pointeur de votre souris sur la fleur.</text>
+
+  <g id="flower">
+    <circle id="overlay" cx="0" cy="0" r="200" stroke="none" fill="url(#fade)"/>
+    <use id="outer-petals" xlink:href="#petals"/>
+    <use id="inner-petals" xlink:href="#petals"
+      transform="rotate(9) scale(0.33)"/>
+  </g>
+
+</svg>
+
+ +

Et ensuite ?

+ +

Dans cette démonstration, le navigateur, compatible SVG, sait déjà comment afficher les éléments SVG. La feuille de style ne fait que modifier l'affichage de certaines manières. Ceci est également vrai pour les documents HTML. Mais vous pouvez utiliser CSS pour des documents XML à usage général, où il n'y a pas de manière prédéfinie d'afficher les éléments. La page suivante en fait la démonstration : Données XML.

-- cgit v1.2.3-54-g00ecf