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

Question

J'ai essayé de nombreuses variantes de l' svg paramètres, mais n'ont pas eu la joie de mise à l'échelle de ce particulier SVG.

Je suis en train d'essayer de contenir ce fichier SVG dans un récipient élément qui contrôle la taille de la SVG.

Je vise 500x309px.

La combinaison de width, height, viewBox et preserveAspectRatio peut m'aider à réaliser cela, sans avoir le SVG masqué ou partielle?

Answer 1

1. Vous devez absolument avoir un viewBox d'attribut sur votre élément SVG qui décrit la boîte englobante du contenu que vous souhaitez toujours être visible. (Le fichier que vous avez un lien à ne pas; vous aurez envie d'en ajouter un.)

2. À cause de votre SVG pour combler un élément HTML, mettre l'attribut CSS position:relative (ou position:absolute ou position:fixed le cas échéant) sur votre enveloppe, et puis

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

Une fois que vous avez un viewBox et votre SVG taille correctement la valeur par défaut de l' preserveAspectRatio attribut de faire ce que vous souhaitez. En particulier, la valeur par défaut de xMidYMid meet signifie que:

• Le ratio d'aspect décrit par votre viewBox seront conservés lors du rendu.
  Par comparaison, une valeur de none permettrait non mise à l'échelle uniforme.
• La viewBox toujours meet , soit le haut/bas ou gauche/droite, avec les "bandes noires" garder l'autre dimension à l'intérieur.
  Par comparaison, une valeur de slice garantit que votre viewBox entièrement remplit le rendu, avec le haut/bas ou gauche/droite tombant en dehors du SVG.
• La viewBox sera maintenu verticalement et horizontalement centré à l'intérieur du SVG fenêtre d'affichage.
  Par comparaison, une valeur de xMinYMax serait de la garder dans le coin inférieur gauche, avec un rembourrage uniquement à droite ou en haut.

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

Essayez de spécifier les valeurs explicites pour preserveAspectRatio sur le <svg> de l'élément et appuyez sur "mettre à Jour" pour voir comment ils affectent le rendu.

Edit: j'ai créé une version simplifiée de la Carte des états-unis avec un viewBox (près de la moitié des octets) et utilisé que dans une mise à jour de la démo pour répondre exactement à vos besoins: http://jsfiddle.net/Jq3gy/5/

Answer 2

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.