109 lines
4.2 KiB
Markdown
Executable File
109 lines
4.2 KiB
Markdown
Executable File
---
|
||
layout: layouts/page.njk
|
||
title: Texte
|
||
date: Last Modified
|
||
---
|
||
|
||
<svg width="0" height="0">
|
||
<defs>
|
||
<pattern id="tenthGrid" width="25" height="25" patternUnits="userSpaceOnUse">
|
||
<path d="M 25 0 L 0 0 0 25" fill="none" stroke="gray" stroke-width="0.5"/>
|
||
</pattern>
|
||
<pattern id="fiftygrid" width="50" height="50" patternUnits="userSpaceOnUse">
|
||
<rect width="50" height="50" fill="url(#tenthGrid)"/>
|
||
<path d="M 50 0 L 0 0 0 50" fill="none" stroke="gray" stroke-width="1"/>
|
||
</pattern>
|
||
<symbol id="grid">
|
||
<rect width="100%" height="100%" fill="url(#fiftygrid)"/>
|
||
<path d="M 500 0 L 500 250 0 250" fill="none" stroke="gray" stroke-width="1"/>
|
||
</symbol>
|
||
</defs>
|
||
</svg>
|
||
|
||
Le texte est géré entièrment par l'utilisateur. il n'y a pas de retour à la ligne automatique ni de calcul d'espacement entre les lignes.
|
||
|
||
Les balise `tspan` permettent de spécifier une nouvelle position ou des nouveaux attributs pour la partie de texte concernée. Si l'abscisse x n'est pas renseignée alors le texte continue là où il devrait être.
|
||
|
||
<svg width="500" height="100">
|
||
<use href="#grid"/>
|
||
<text fill="black" y="30" x="0">
|
||
<tspan y="25">Bonjour</tspan>
|
||
<tspan y="50">Tout le monde</tspan>
|
||
</text>
|
||
</svg>
|
||
|
||
```svg
|
||
<text>
|
||
<tspan y="30">Bonjour</tspan>
|
||
<tspan y="60">Tout le monde</tspan>
|
||
</text>
|
||
```
|
||
|
||
### Alignement
|
||
|
||
La propriété `text-anchor` permet d'aligné le texte.
|
||
|
||
<svg width="500" height="100">
|
||
|
||
<line x1="100" x2="100" y1="0" y2="130" stroke="red" opacity="0.5"/>
|
||
<line x1="0" x2="300" y1="20" y2="20" stroke="red" opacity="0.5"/>
|
||
<line x1="0" x2="300" y1="50" y2="50" stroke="red" opacity="0.5"/>
|
||
<line x1="0" x2="300" y1="80" y2="80" stroke="red" opacity="0.5"/>
|
||
<text fill="black" y="20" x="100" font-size="22" text-anchor="start">Bonjour</text>
|
||
<text fill="black" y="50" x="100" font-size="22" text-anchor="middle">Bonjour</text>
|
||
<text fill="black" y="80" x="100" font-size="22" text-anchor="end">Bonjour</text>
|
||
</svg>
|
||
|
||
```svg
|
||
<text y="20" x="100" font-size="22" text-anchor="start">Bonjour</text>
|
||
<text y="50" x="100" font-size="22" text-anchor="middle">Bonjour</text>
|
||
<text y="80" x="100" font-size="22" text-anchor="end">Bonjour</text>
|
||
```
|
||
Les autres propriété pour la mise en forme sont identique au CSS/HTML
|
||
|
||
## Texte sur un chemin
|
||
|
||
La balise `textPath` prend comme référence `href` un chemin visible ou non et permet d'écir le long de celui-ci
|
||
|
||
<svg width="500" height="150">
|
||
<path id="chemin" fill="none" stroke="#3ed124"
|
||
d="m 13.176044,90.907441 c 43.805202,0 47.763989,-37.757205 74.555353,-36.833031 26.791363,0.924174 50.673413,49.0028 83.366583,53.13354 46.40344,5.86301 86.62236,-45.235139 133.36663,-43.614483 61.53586,2.133491 168.2861,19.182088 171.1706,69.437383" />
|
||
<text>
|
||
<textPath href="#chemin">
|
||
Les coïncidences, me répondit mon ami, sont les pires ennemies de la vérité..
|
||
</textPath>
|
||
</text>
|
||
</svg>
|
||
|
||
```svg
|
||
<path id="chemin" fill="none" stroke="#3ed124"
|
||
d="m 13.176044,90.907441 ..." />
|
||
<text>
|
||
<textPath href="#chemin">
|
||
Les coïncidences, me répondit mon ami, sont les pires ennemies de la vérité..
|
||
</textPath>
|
||
</text>
|
||
```
|
||
|
||
## Texte libre
|
||
|
||
la balise `foreignObject` permet d'inclure un autre document xml à l'intérieur du SVG. En l'occurence ici de l'HTML. Nous retrouvons le fonctionnement normal d'un paragraphe de texte html.
|
||
|
||
Il est également possible d'utiliser les balises `input` des formulaires.
|
||
|
||
<svg width="500" height="250">
|
||
<foreignObject x="20" y="20" width="400" height="200">
|
||
<p>Je me trouvais ici. Vers onze heures, après avoir procédé, sur les fourneaux du laboratoire, à une courte expérience de chimie, j’avais fait glisser mon bureau jusqu’ici, car le père Jacques, qui passa la soirée à nettoyer quelques-uns de mes appareils, avait besoin de toute la place qui se trouvait derrière moi. Ma fille travaillait au même bureau que moi.</p>
|
||
<form>
|
||
<input type="text">
|
||
</form>
|
||
</foreignObject>
|
||
</svg>
|
||
|
||
```svg
|
||
<foreignObject x="20" y="20" width="400" height="200">
|
||
<p>Je me trouvais ... </p>
|
||
<form>
|
||
<input type="text">
|
||
</foreignObject>
|
||
``` |