web-dev-qa-db-fra.com

Mettre SVG à l'échelle du conteneur sans masque / recadrage

J'ai essayé de nombreuses variantes des paramètres svg, mais je n'ai eu aucune joie à faire évoluer ce SVG particulier.

J'essaie de contenir ce SVG dans un élément conteneur qui contrôle la taille du SVG.

Je vise 500x309px.

Quelle combinaison de width, height, viewBox et preserveAspectRatio peut m'aider à y parvenir sans que le SVG soit masqué ou recadré?

htmlsvg
58
sgb

  1. Vous devez absolument avoir un attribut viewBox sur votre élément SVG qui décrit la boîte englobante du contenu que vous voulez être toujours visible. (Le fichier auquel vous liez ne le fait pas; vous voudrez en ajouter un.)

  2. Pour que votre SVG remplisse un élément HTML, mettez l'attribut CSS position:relative (ou position:absolute ou position:fixed le cas échéant) sur votre emballage, puis

  3. Définissez l'attribut CSS position:absolute Sur ton <svg> élément pour le faire s'asseoir à l'intérieur et remplir votre div. (Si nécessaire, appliquez également left:0; top:0; width:100%; height:100%.)

Une fois que vous disposez d'un viewBox et que votre SVG est correctement dimensionné, la valeur par défaut de l'attribut preserveAspectRatio fera ce que vous voulez. En particulier, la valeur par défaut de xMidYMid meet signifie que:

  • Le rapport hauteur/largeur décrit par votre viewBox sera conservé lors du rendu.
    Par comparaison, une valeur de none permettrait une mise à l'échelle non uniforme.
  • La viewBox sera toujours meet en haut/en bas ou à gauche/à droite, avec le "letterboxing" gardant l'autre dimension à l'intérieur.
    Par comparaison, une valeur de slice garantit que votre viewBox remplit complètement le rendu, le haut/bas ou la gauche/droite tombant en dehors du SVG.
  • La viewBox sera maintenue verticalement et horizontalement centrée dans la fenêtre SVG.
    Par comparaison, une valeur de xMinYMax le garderait dans le coin inférieur gauche, avec un rembourrage uniquement vers la droite ou vers le haut.

Vous pouvez le voir en direct ici: http://jsfiddle.net/Jq3gy/2/

Essayez de spécifier des valeurs explicites pour preserveAspectRatio sur le <svg> élément et appuyez sur "Mettre à jour" pour voir comment ils affectent le rendu.

Edit : J'ai créé une version simplifiée du S Map avec une viewBox (presque la moitié des octets) et l'ai utilisé dans une démo mise à jour pour répondre à vos besoins exacts: http://jsfiddle.net/Jq3gy/5/

102
Phrogz

Définissez la largeur et la hauteur SVG comme étant la taille de son conteneur et définissez preserveAspectRatio = none.

<div height="50" width="100">
  <svg preserveAspectRatio="none" viewBox="0 0 300 200"></svg>
</div>

et

$("svg").each(function(){
  this.width = this.parentNode.width;
  this.height = this.parentNode.height;
}

C'est ça. La définition de CSS n'est pas nécessaire.

J'ai personnellement défini viewBox comme étant la taille de contents du SVG. Donc dans mon exemple, l'image originale que je charge dans mon SVG est 300x200. Il rétrécira pour s'adapter à une div 50x100. Mais la manipulation de viewBox est un problème distinct.

3
john ktejik

Malheureusement, je ne connais pas la réponse qui s'applique au SVG brut, mais dans Raphael.js, je l'ai fait comme ça:

var paper = Raphael('#container', your_container_width, your_container_height);
paper.setViewBox(realSvgWidth, realSvgHeight, true);

Cette technique a mis à l'échelle mon SVG pour l'adapter aux limites.

J'espère que cela t'aides.

1
Valentin