Différences entre les versions de « Découvrir le SVG/Éléments graphiques »

Aller à la navigation Aller à la recherche
m
<source> -> <syntaxhighlight> (phab:T237267)
m (→‎Texte : corr.)
m (<source> -> <syntaxhighlight> (phab:T237267))
 
Par exemple, pour dessiner un rectangle rempli de jaune et au contour bleu épais d'un pixel :
<sourcesyntaxhighlight lang="xml">
<rect fill="yellow" stroke="blue" stroke-width="1"
x="20px" y="20px" width="80px" height="40px"/>
</syntaxhighlight>
</source>
ou bien
<sourcesyntaxhighlight lang="xml">
<rect fill="#ffff00" stroke="#0000ff" stroke-width="1"
x="20px" y="20px" width="80px" height="40px"/>
</syntaxhighlight>
</source>
 
Un dernier attribut, <code>transform</code>, permet notamment de faire tourner l'objet. La valeur est <code>transform="rotate(''angle'')"</code>, où l'angle est en degrés ; la rotation se fait alors autour de l'origine du repère (le coin en haut à gauche du dessin). Un angle positif correspond à une rotation dans le sens des aiguilles d'une montre. On peut indiquer le centre de rotation sous la forme <code>transform="rotate(''angle'' ''cx'' ''cy'')"</code> ou bien <code>transform="rotate(''angle'', ''cx'', ''cy'')"</code>.
 
Voici un exemple complet. Le second rectangle est tourné autour de son centre (''cx'' = {{unité|60|px}}, ''cy'' = {{unité|40|px}}) :
<sourcesyntaxhighlight lang="xml">
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
 
</svg>
</syntaxhighlight>
</source>
 
== Rectangles ==
* <code>ry</code> : pour un rectangle aux angles arrondis, rayon de l'ellipse selon l'axe ''y''.
Par exemple, le code suivant place un rectangle de {{unité|60|px}} de large et de {{unité|128|px}} de haut au point ({{unité|40|px}}, {{unité|80|px}}) avec des angles arrondis d'un rayon de {{unité|8|px}} :
<sourcesyntaxhighlight lang="xml">
<rect
x="40px" y="80px" width="60px" height="128px"
rx="8px" ry="8px"
/>
</syntaxhighlight>
</source>
 
== Cercles et ellipses ==
 
Par exemple :
<sourcesyntaxhighlight lang="xml">
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
 
</svg>
</syntaxhighlight>
</source>
 
== Lignes et polygones ==
 
Exemple :
<sourcesyntaxhighlight lang="xml">
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
 
</svg>
</syntaxhighlight>
</source>
 
== Texte ==
 
Un texte est inclus entre des balises <code>&lt;text … &gt; … &lt;/text&gt;</code>. Dans sa forme la plus simple, on écrit simplement
<sourcesyntaxhighlight lang="xml">
<text y="1em">
Texte à écrire.
</text>
</syntaxhighlight>
</source>
L'attribut <code>y="1em"</code> permet de s'assurer que le texte est écrit dans la zone affichée, sinon, il est écrit au dessus de la ligne ''y'' = 0 qui est le haut de la zone d'affichage.
 
* <code>text-anchor</code> : indique l'alignement horizontal du texte et peut prendre les valeurs : <code>start</code> (commence au point indiqué, équivalent d'un alignement à gauche), <code>middle</code> (est centré sur le point indiqué) ou <code>end</code> (se termine sur le point indiqué, équivalent à un alignement à droite).
Notes que les valeurs des attributs peuvent être des suites de valeurs. Par exemple
<sourcesyntaxhighlight lang="xml">
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
 
</svg>
</syntaxhighlight>
</source>
affiche le mot « Bonjour » mais :
* la lettre « o » est élevée d'un demi cadratin (donc est en exposant), puisque le texte est décalé de {{unité|–0,5|em}} au deuxième caractère puis redécalé de {{unité|0,5|em}} au troisième ;
* la lettre « n » est tournée de 45° dans le sens des aiguilles d'une montre, puisque le texte est tourné de 45° au troisième caractère puis remis à 0 au quatrième.
Le texte peut être découpé en zones ''({{lang|en|span}})'', en élément <code>tspan</code>, chaque élément ayant des propriétés différentes. Par exemple
<sourcesyntaxhighlight lang="xml">
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
 
</svg>
</syntaxhighlight>
</source>
le mot « Bonjour » utilise est écrit en noir et graisse maigre, le mot « le » est écrit en gras et en rouge, le mot « monde. » est écrit en bleu et graisse maigre.
 
On peut mettre du HTML dans le document SVG et donc bénéficier de toutes ses possibilités. Comme le code HTML est un « Objet étranger », il doit être dans un élément <code>foreignObject</code> qui définit les dimensions de la zone d'inclusion. Par exemple :
<sourcesyntaxhighlight lang="xml">
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
 
</svg>
</syntaxhighlight>
</source>
 
== Image externe ==
Par exemple :
 
<sourcesyntaxhighlight lang="xml">
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
 
</svg>
</syntaxhighlight>
</source>
 
== Groupement d'éléments ==
Dans l'exemple suivant, le groupage est utilisé pour tourner deux éléments graphiques ensemble.
 
<sourcesyntaxhighlight lang="xml">
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
 
</svg>
</syntaxhighlight>
</source>
 
== Exemple complet ==
[[Fichier:Exemple logigramme elementaire SVG.svg|vignette|Résultat du code SVG.]]
 
<sourcesyntaxhighlight lang="xml">
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
 
</svg>
</syntaxhighlight>
</source>
 
== Notes ==
1 535

modifications

Menu de navigation