« Découvrir le SVG/Éléments graphiques » : différence entre les versions
Contenu supprimé Contenu ajouté
→Texte : alignement |
Exemple complet |
||
Ligne 262 :
<desc> Logo Wikibooks </desc>
</image>
</svg>
</source>
== Exemple complet ==
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.
<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="21cm" height="29.7cm" version="1.1"
xmlns="http://www.w3.org/2000/svg"
font-family="monospace" font-size="14"
>
<!-- 1cm = 37.81px -->
<title> Un logigramme simple </title>
<desc> Logigramme selon la norme ISO 5807 </desc>
<g id="depart">
<desc> étiquette de départ du logigramme </desc>
<rect
x="8cm" y="1cm"
width="5cm" height="2cm"
rx="2mm" ry="2mm"
fill="lightyellow" stroke="black" stroke-width="1px"
/>
<text
x="10.5cm" y="2cm"
text-anchor="middle" >
Début
</text>
</g>
<g id="premierLien">
<desc> lien entre le départ et la première action </desc>
<line
x1="10.5cm" y1="3cm" x2="10.5cm" y2="5cm"
stroke="black" stroke-width="1px"
/>
</g>
<g id="premiereAction">
<desc> première action du logigramme </desc>
<polygon
points="340 189, 529 189, 454 265, 265 265"
fill="lightyellow" stroke="black" stroke-width="1px"
/>
<text
x="10.5cm" y="6cm"
text-anchor="middle" >
Contenu du wikilivre
</text>
</g>
<g id="deuxiemeLien">
<desc> lien entre la première action et le test </desc>
<line
x1="10.5cm" y1="7cm" x2="10.5cm" y2="9cm"
stroke="black" stroke-width="1px"
/>
</g>
<g id="test">
<desc> test </desc>
<polygon
points="304 378, 397 340, 494 378, 397 416"
fill="lightyellow" stroke="black" stroke-width="1px"
/>
<circle
cx="13.25cm" cy="10cm" r="0.25cm"
fill="lightyellow" stroke="black" stroke-width="1px"
/>
<text
x="10.5cm" y="10cm"
text-anchor="middle" >
Cela vous a plu
</text>
</g>
<g id="lienSiFaux">
<desc> lien si le résultat du test est faux </desc>
<polyline
points="510 378, 662 378, 662 492"
fill="none" stroke="black" stroke-width="1px"
/>
<text x="13.7cm" y="9.8cm">
Faux
</text>
</g>
<g id="lienSiVrai">
<desc> lien si le résultat du test est vrai </desc>
<line
x1="10.5cm" y1="11cm" x2="10.5cm" y2="13cm"
fill="none" stroke="black" stroke-width="1px"
/>
<text
x="10.3cm" y="12cm"
text-anchor="end" >
Vrai
</text>
</g>
<g id="procedureSiVrai">
<desc> procédure si le wikilivre a plu </desc>
<rect
x="8cm" y="13cm"
width="5cm" height="2cm"
fill="lightyellow" stroke="black" stroke-width="1px"
/>
<line
x1="8.5cm" y1="13cm" x2="8.5cm" y2="15cm"
stroke="black" stroke-width="1px"
/>
<line
x1="12.5cm" y1="13cm" x2="12.5cm" y2="15cm"
stroke="black" stroke-width="1px"
/>
<text
x="10.5cm" y="14cm"
text-anchor="middle" >
Féliciter l'auteur
</text>
</g>
<g id="procedureSiFaux">
<desc> procédure si le wikilivre a déplu </desc>
<rect
x="15cm" y="13cm"
width="5cm" height="2cm"
fill="lightyellow" stroke="black" stroke-width="1px"
/>
<line
x1="15.5cm" y1="13cm" x2="15.5cm" y2="15cm"
stroke="black" stroke-width="1px"
/>
<line
x1="19.5cm" y1="13cm" x2="19.5cm" y2="15cm"
stroke="black" stroke-width="1px"
/>
<text
text-anchor="middle" >
<tspan x="17.5cm" y="13.7cm"> Rédiger une </tspan>
<tspan x="17.5cm" y="14.3cm"> critique positive </tspan>
</text>
</g>
<g id="lienVraiVersFin">
<desc> lien de la procédure si le livre a plu vers la fin </desc>
<line
x1="10.5cm" y1="15cm" x2="10.5cm" y2="17cm"
fill="none" stroke="black" stroke-width="1px"
/>
</g>
<g id="lienFauxVersFin">
<desc> lien de la procédure si le livre a déplu vers la fin </desc>
<polyline
points="662 567, 662 605, 397 602"
fill="none" stroke="black" stroke-width="1px"
/>
</g>
<g id="fin">
<desc> étiquette de fin du logigramme </desc>
<rect
x="8cm" y="17cm"
width="5cm" height="2cm"
rx="2mm" ry="2mm"
fill="lightyellow" stroke="black" stroke-width="1px"
/>
<text
x="10.5cm" y="18cm"
text-anchor="middle" >
Fin
</text>
</g>
</svg>
| |||