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

Contenu supprimé Contenu ajouté
Ligne 166 :
* <code>font-family</code> : nom de la police, par exemple pour les polices par défaut <code>sans</code>, <code>serif</code> et <code>monospace</code>, ou bien de spolices spécifiques comme <code>Arial</code>, <code>Times</code>, <code>Courier</code>…
* <code>font-size</code> : le corps, exprimé en points typographiques (<code>pt</code>) ;
* <code>font-weight</code> : graisse,
* <code>dx</code>, <code>dy</code> : décalages par rapport au « curseur » (pour <code>dx</code>) et à la ligne de base (pour <code>dy</code>) ;
* <code>rotate</code> : rotation des caractères (mais ils restent sur une ligne horizontale) ;
Ligne 181 ⟶ 182 :
 
<text
font-familiy="sansArial" font-size="20"
x="1ex" y="2em" dy="0 -0.5em 0.5em" rotate="0 0 45 0">
Bonjour
Ligne 191 ⟶ 192 :
* 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
<source lang="xml">
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
 
<svg width="10cm" height="10cm" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<desc>Un rectangle
</desc>
 
<text
x="1ex" y="2em">
<tspan>Bonjour </tspan>
<tspan font-weight="bold" fill="red">le </tspan>
<tspan fill="blue">monde.</tspan>
</text>
 
</svg>
</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 :
Ligne 209 ⟶ 231 :
</body>
</foreignObject>
</source>
</svg>
</source>
 
== Notes ==