mirror of
https://github.com/Jermolene/TiddlyWiki5
synced 2024-12-27 02:20:28 +00:00
56 lines
2.9 KiB
Plaintext
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}}
|