« 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.
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>.
|