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

Contenu supprimé Contenu ajouté
Ligne 164 :
Les attributs spécifiques de l'élément <code>text</code> sont :
* <code>x</code>, <code>y</code> : coordonnées à laquelle le texte est écrit ;
* <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>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 176 ⟶ 178 :
<svg width="10cm" height="10cm" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<desc> Un texte </desc>
</desc>
 
<text
<text x="1ex" y="2em" dy="0 -0.5em 0.5em" rotate="0 0 45 0">
font-familiy="sans" font-size="20"
Bonjour
<text x="1ex" y="2em" dy="0 -0.5em 0.5em" rotate="0 0 45 0">
Bonjour
</text>
 
Ligne 189 ⟶ 192 :
* 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.
 
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 :
<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"
HTML : <code>&lt;foreignObject … &gt; &lt;body … &gt; … &lt;/body&gt; &lt;/foreignObject&gt;</code>
xmlns="http://www.w3.org/2000/svg">
<desc> Du HTML encapsulé </desc>
 
<foreignObject width="10cm" height="2cm">
<body xmlns="http://www.w3.org/1999/xhtml">
<p style="font-family:monospace; font-size:18">
Ceci est du <em>texte</em> <strong>HTML</strong>.
</p>
</descbody>
</foreignObject>
</source>
</svg>
 
== Notes ==