Chapitre 3 Structure du document

Extrait

Groupes inclus

L'élément groupe est un container d'éléments SVG, non seulement des objets graphiques 
mais aussi d'autres containers, en particulier d'autres groupes. 
Nous avons donc des groupes à l'intérieur d'autres groupes que nous nommerons sous-groupes. 
Comment réferencer ces sous-groupes ou même pourquoi utiliser des sous-groupes. 
Voyons ces sous-groupes sur notre exemple de rack.

Utilisons des sous-groupes pour notre exemple

Les images de la brochure de notre compagnie présente toujours le sol sous le rack. 
Pour visualiser ce sol, nous utilisons une ligne noire et un rectangle gris. 
D'autre part il nous manque quelques détails pour nos supports - les cales.

Construisons ces cales.

Nous raccourcissons les supports et plaçons deux petits rectangles aux extrémités. 
Mettons ces trois éléments dans un groupe nommé 'support', ainsi le reste du document ne sera pas modifié.
Nous définissons également un groupe 'rack' avec les colonnes et le montant de départ.
Nous ajoutons les éléments du sol également.

Figure 3-9. Rack à palettes

( voir cette image comme svg )

Ce qui nous donne ce code:

<?xml version="1.0" encoding="UTF-8" standalone="no" ?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/SVG/DTD/svg10.dtd">
<svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg">
<defs>
    <rect id="montant" width="10" height="150" fill="steelblue" stroke="black" />
    <g id="support">
      <rect x="0" width="3" height="16" fill="steelblue" stroke="black" />
      <rect x="5" width="126" height="8" fill="steelblue" stroke="black" />
      <rect x="133" width="3" height="16" fill="steelblue" stroke="black" />
    </g>
    <g id="colonne">
      <use xlink:href="#support" x="12" y="0" />
      <use xlink:href="#support" x="12" y="50" />
      <use xlink:href="#support" x="12" y="100" />
      <use xlink:href="#montant" x="150" y="0" />
    </g>
    <g id="rack">
      <use xlink:href="#montant" x="0" y="0" />
      <use xlink:href="#colonne" x="0" y="0" />
      <use xlink:href="#colonne" x="150" y="0" />
      <use xlink:href="#colonne" x="300" y="0" />
    </g>
</defs>
<use xlink:href="#rack" x="50" y="20" />
<rect x="40" y="170" width="480" height="10" stroke="none" fill="lightgray" />
<line x1="40" y1="170" x2="520" y2="170" stroke="black" />
</svg>

L'image est correcte mais pourquoi ne pas mettre les éléments du sol dans un groupe 'sol'.
Nous créons ainsi ce groupe

<use xlink:href="#rack" x="50" y="20" />
<g id="sol" />
<rect x="40" y="170" width="480" height="10" stroke="none" fill="lightgray" />
<line x1="40" y1="170" x2="520" y2="170" stroke="black" />
</g>

Cela semble mieux structuré. 
Devons nous laisser le groupe 'sol' où il est ou est-il préférable de le mettre dans la section <defs>?
Nous ne réutilisons pas ce groupe, il n'est donc pas nécessaire de le mettre dans la section <defs>.

La question est "Est-ce que chaque rack a son propre sol?"

Vous, expert es rack, répondez immédiatement: 
"Oui absolument - car il est peu probable que des racks partagent le même sol ". 
Bien, le groupe ‘sol’ peut entrer dans le groupe ‘rack’. C'est le bon sens!

Nous modifions donc notre code

Si vous vous demandez pourquoi je mets le groupe sol au début plutôt qu'à la fin, 
je pourrais vous répondre que c'est par habitude de codage car ici il n'y a pas de problème de superposition des objets 
(les objets sont rendus dans l'ordre du code et l'objet suivant peu recouvrir le précédent). 
Notez également que nous devons modifier les positions des éléments 'line' et 'rectangle' 
(nous soustrayons les coordonnées de l'élément <use> qui affiche le rack). 
Nous verrons ceci en détail au chapitre 6, où nous aborderons les systèmes de coordonnées et les transformations.

Après avoir examiné le code, vous pouvez poser la question: 
"Pourquoi ne pas définir le groupe 'support' à l'intérieur du groupe 'colonne'? "

Bonne question!. Il n'y a pas d'objection à le faire.

Nous modifions le groupe 'colonne'.

Nous ne pouvons simplement déplacer le groupe 'support' dans le groupe 'colonne', nous devons créer une section <defs> locale. 
Pourquoi? Bien, nous avons vu que les éléments des sections <defs> ne sont pas rendus, ils ne servent que de référence. 
Si nous n'utilisons pas de section <defs> le groupe 'support' sera dessiné.

Cela peut vous paraître confus. Pourquoi ne pas laisser le groupe 'support' où il est? 
Mais si nous voulons avoir une structure complète pour le document, il faut le faire.

<?xml version="1.0" encoding="UTF-8" standalone="no" ?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN"
         "http://www.w3.org/TR/SVG/DTD/svg10.dtd">
<svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <rect id="montant" width="10" height="150" fill="steelblue" stroke="black" />
    <g id="colonne">
      <defs>
        <g id="support">
          <rect x="0" width="3" height="16" fill="steelblue" stroke="black" />
          <rect x="5" width="126" height="8" fill="steelblue" stroke="black" />
          <rect x="133" width="3" height="16" fill="steelblue" stroke="black" />
        </g>
      </defs>
      <use xlink:href="#support" x="12" y="0" />
      <use xlink:href="#support" x="12" y="50" />
      <use xlink:href="#support" x="12" y="100" />
      <use xlink:href="#montant" x="150" y="0" />
    </g>
    <g id="rack">
      <g id="floor">
        <rect x="-10" y="150" width="480" height="10" stroke="none" fill="lightgray" />
        <line x1="-10" y1="150" x2="470" y2="150" stroke="black" />
      </g>
      <use xlink:href="#montant" x="0" y="0" />
      <use xlink:href="#colonne" x="0" y="0" />
      <use xlink:href="#colonne" x="150" y="0" />
      <use xlink:href="#colonne" x="300" y="0" />
    </g>
  </defs>
  <use xlink:href="#rack" x="50" y="20" />
</svg>

Fantastique - une place pour chaque chose et chaque chose à sa place.