lafleur
/
wanderings
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity
wanderings/content/posts/svg.md

2.4 KiB
Raw Permalink Blame History

+++ 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 :

<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 :

<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 :

<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é :

<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.

<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>