76 lines
2.4 KiB
Markdown
76 lines
2.4 KiB
Markdown
|
+++
|
||
|
|
title = "SVG"
|
||
|
|
date = 2020-04-13
|
||
|
|
tags = ["html"]
|
||
|
|
+++
|
||
|
|
Pour intégrer un fichier SVG et pouvoir le redimensionner, on peut le mettre
|
||
|
|
dans un conteneur HTML. Il va s'arranger pour tout afficher et centrer le
|
||
|
|
résultat, comme ça :
|
||
|
|
|
||
|
|
``` html
|
||
|
|
<span class="svgContainer" style="background-color: darkgrey;">
|
||
|
|
<svg viewbox="0 0 100 100" width="20em" height="10em">
|
||
|
|
<path fill="magenta" stroke="black" d="M0,0 H100 V100 H0 Z">
|
||
|
|
</svg>
|
||
|
|
</span>
|
||
|
|
```
|
||
|
|
Centrage vertical :
|
||
|
|
|
||
|
|
``` html
|
||
|
|
<span class="svgContainer" style="background-color: darkgrey;">
|
||
|
|
<svg viewbox="0 0 100 100" width="10em" height="20em">
|
||
|
|
<path fill="magenta" stroke="black" d="M0,0 H100 V100 H0 Z">
|
||
|
|
</svg>
|
||
|
|
</span>
|
||
|
|
```
|
||
|
|
|
||
|
|
Si on veut qu'il "stretche" sur son conteneur, on peut ajouter l'option
|
||
|
|
`preserveAspectRatio = none` :
|
||
|
|
|
||
|
|
``` html
|
||
|
|
<span id="svgContainer">
|
||
|
|
<svg viewbox="0 0 100 100" width="20em" height="10em"
|
||
|
|
preserveAspectRatio="none">
|
||
|
|
<path fill="magenta" stroke="black" d="M0,0 H100 V100 H0 Z">
|
||
|
|
</svg>
|
||
|
|
</span>
|
||
|
|
```
|
||
|
|
|
||
|
|
# Position et taille
|
||
|
|
|
||
|
|
L'élément SVG a des attributs transitionables, comme `svg.width` et `svg.height`,
|
||
|
|
`svg.style.left` et `svg.style.top`. En utilisant le mode `position = relative`,
|
||
|
|
on peut déplacer l'élément tout en gardant sa place initiale réservée, comme si
|
||
|
|
rien n'avait changé :
|
||
|
|
|
||
|
|
``` html
|
||
|
|
<span class="svgContainer" style="background-color: darkgrey;">
|
||
|
|
<svg viewbox="0 0 100 100" width="10em" height="10em"
|
||
|
|
style="position: relative; left: -3em; top: 1.5em;">
|
||
|
|
<path fill="magenta" stroke="black" d="M0,0 H100 V100 H0 Z">
|
||
|
|
</svg>
|
||
|
|
</span>
|
||
|
|
```
|
||
|
|
|
||
|
|
On peut enfin utiliser le mode `position = absolute`, où le conteneur est
|
||
|
|
arraché au flot du document. Il est positionné relativement à son plus proche
|
||
|
|
parent positionné. La plupart des éléments ont par défaut `position = static`,
|
||
|
|
qui la laisse à sa place dans le flot du document. Donc le positionnement se
|
||
|
|
fait le plus souvent par rapport à l'élément `<body>`.
|
||
|
|
|
||
|
|
Ici l'élément est `absolute` et son parent direct `relative`. On remarque que le
|
||
|
|
span svgContainer a maintenant une hauteur nulle ; en fait en position
|
||
|
|
`absolute`, le svg n'est plus contenu dans svgContainer mais dans `<body>` ;
|
||
|
|
svgContainer est donc vide.
|
||
|
|
|
||
|
|
``` html
|
||
|
|
<span class="svgContainer"
|
||
|
|
style="background-color: darkgrey; position: relative">
|
||
|
|
<svg viewbox="0 0 100 100" width="10em" height="10em"
|
||
|
|
style="position: absolute; left: 35vw; top: -4vw;">
|
||
|
|
<path fill="magenta" stroke="black" d="M0,0 H100 V100 H0 Z">
|
||
|
|
</svg>
|
||
|
|
</span>
|
||
|
|
```
|
||
|
|
|