Récupération du cours SVG

texte/index.md

@@ -0,0 +1,109 @@
+---
+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>
+```