1
0
mirror of https://github.com/Jermolene/TiddlyWiki5 synced 2024-12-13 19:50:29 +00:00
TiddlyWiki5/editions/fr-FR/tiddlers/UsingSVG.tid

56 lines
2.9 KiB
Plaintext

created: 20131028132700000
fr-title: SVG, son Utilisation
modified: 20150622062645411
tags: Features
title: UsingSVG
type: text/vnd.tiddlywiki
TiddlyWiki5 propose d'afficher les illustrations vectorielles SVG de deux façons<<:>>
* Les Tiddlers avec le type `image/svg+xml` sont interprétés comme des images SVG, et affichés et transclus des éléments `<img>` autonomes avec du code SVG intégré (le lien URI vers les données source est dans l'attribut `src`)
** Exemples d'images SVG, voir [[Motovun Jack.svg]] et [[Tiddler Fishes.svg]]
* WikiText peut aussi inclure directement des éléments SVG en ligne. Voir ci-dessous pour un exemple.
! Intégration de tiddlers SVG
Vous pouvez intégrer un tiddler image SVG en utilisant la syntaxe ordinaire de transclusion<<:>>
```
{{Motovun Jack.jpg}}
```
De même, vous pouvez faire appel aux [[blocs typés|Typed Blocks in WikiText]] pour intégrer un tiddler SVG en mode ligne.
Toutefois, le rendu de l'image par l'élément `<img>` fait qu'elle passe par un <<.def "bac à sable">>, et ne peut pas récupérer les styles CSS du document parent, par exemple. L'image, en elle-même, ne peut pas utiliser de fonctionnalités WikiText comme la transclusion.
! Intégration d'éléments SVG
L'autre façon d'utiliser SVG est d'intégrer des éléments `<svg>` directement. Par exemple<<:>>
<svg width="150" height="100">
<circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red" />
</svg>
Notez que les éléments SVG en mode ligne ne nécessitent pas de directive `<?xml version="1.0"?>`.
! Inclure du contenu HTML ou WikiText dans des images SVG
Vous pouvez inclure de simples chaine de texte dans des images SVG par l'emploie de l'élément `<text>` <<:>>
<svg width="100px" height="30px" viewBox="0 0 200 400"><text x="250" y="150" font-family="Verdana" font-size="100">Salut d'ici</text><rect x="1" y="1" width="998" height="298" fill="none" stroke-width="2" /></svg>
Le contenu HTML or WikiText peut être inclu dans des images en mode ligne via l'élément `<foreignObject>`. Par exemple<<:>>
<svg width="260px" height="260px"><circle cx="150" cy="150" r="100" fill="blue" stoke="red"/><foreignObject x="70" y="110" width="150" height="180"><body>Voici du texte qui réclame un retour à la ligne, et intègre un [[lien vers un tiddler|HelloThere]].</body></foreignObject></svg>
! Transclusion d'éléments SVG
Lors de l'intégration d'éléments SVG vous pouvez faire appel à des fonctionnalités WikiText comme la transclusion. Par exemple, voici un cercle SVG dont la valeur du rayon est réglée dans le tiddler [[$:/SVGExampleRadius]]<<:>>
<svg width="150" height="150"><circle cx="75" cy="75" r={{$:/SVGExampleRadius}} stroke="black" stroke-width="2" fill="green"/></svg>
Vous pouvez modifier la valeur du rayon<<:>> <$edit-text tiddler="$:/SVGExampleRadius" tag="input"/>
! Tracer un texte incurvé avec SVG
{{Making curved text with SVG}}