« Découvrir le SVG/Éléments graphiques » : différence entre les versions

Contenu supprimé Contenu ajouté
→‎Exemple complet : précisions
→‎Exemple complet : groupage : dans une seciton dédiée
Ligne 262 :
<desc> Logo Wikibooks </desc>
</image>
 
</svg>
</source>
 
== Groupement d'éléments ==
 
Il est possible de grouper des éléments avec l'élément <code>g</code>. Cela permet d'appliquer des attributs à plusieurs éléments en même temps.
 
Nous avons utilisé l'élément <code>g</code> qui permet de grouper les éléments. L'usage de groupe est très important lorsque l'on travaille avec plusieurs éléments : la balise de description permet une meilleure accessibilité aux déficients visuels (puisqu'elle peut être transcrite en braille ou lue en audio-description) et cela permet d'organiser le document. Ainsi, dès qu'un document comprend plusieurs éléments, il est important que chaque élément soit dans un groupe, même si un groupe ne contient qu'un seul élément.
 
Dans l'exemple suivant, le groupage est utilisé pour tourner deux éléments graphiques ensemble.
 
<source lang="xml">
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
 
<svg width="248" height="176" version="1.1"
xmlns="http://www.w3.org/2000/svg"
>
 
<g id="groupe1"
transform="rotate(-15, 127, 88)"
>
<rect
x="35" y="35" width="177" height="89" rx="7" ry="7"
stroke="red" stroke-width="3" fill="none"
/>
<text
font-family="Arial" font-weight="bold" font-size="20"
fill="red"
text-anchor="middle"
>
<tspan x="124" y="70">Approuvé</tspan>
<tspan x="124" y="100">par le W3C</tspan>
</text>
</g>
 
</svg>
Ligne 269 ⟶ 306 :
 
Voici un exemple comprenant plusieurs objets graphiques.
 
Nous avons utilisé l'élément <code>g</code> qui permet de grouper les éléments. L'usage de groupe est très important lorsque l'on travaille avec plusieurs éléments : la balise de description permet une meilleure accessibilité aux déficients visuels (puisqu'elle peut être transcrite en braille ou lue en audio-description) et cela permet d'organiser le document.
 
Nous avons défini les attributs <code>font-familiy</code> et <code>font-size</code> afin qu'il s'appliquent à tous les éléments du document, ce qui évite d'avoir à les redéfinir pour chaque élément <code>text</code>.