Après environ 48 heures de recherche, j'ai fini par le faire pour obtenir une mise à l'échelle proportionnelle:
REMARQUE: cet exemple est écrit avec React. Si vous ne l' utilisez que, changer les choses cas de dos de chameau à des traits d' union (ex: changement backgroundColorà background-colorchanger le style de Objectretour à un String).
<div
style={{
backgroundColor: 'lightpink',
resize: 'horizontal',
overflow: 'hidden',
width: '1000px',
height: 'auto',
}}
>
<svg
width="100%"
viewBox="113 128 972 600"
preserveAspectRatio="xMidYMid meet"
>
<g> ... </g>
</svg>
</div>
Voici ce qui se passe dans l'exemple de code ci-dessus:
VIEWBOX
MDN: https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/viewBox
min-x, min-y, largeur et hauteur
ie: viewbox = "0 0 1000 1000"
Viewbox est un attribut important car il indique essentiellement au SVG quelle taille dessiner et où. Si vous avez utilisé CSS pour créer le SVG 1000x1000 px mais que votre fenêtre d'affichage était 2000x2000, vous verriez le quart supérieur gauche de votre SVG.
Les deux premiers nombres, min-x et min-y, déterminent si le SVG doit être décalé à l'intérieur de la zone de visualisation.
Mon SVG doit être déplacé vers le haut / bas ou la gauche / droite
Examinez ceci: viewbox = "50 50 450 450"
Les deux premiers chiffres déplaceront votre SVG de 50px vers la gauche et de 50px vers le haut, et les deux deuxièmes nombres sont la taille de la fenêtre d'affichage: 450x450 px. Si votre SVG fait 500x500 mais qu'il a un rembourrage supplémentaire dessus, vous pouvez manipuler ces nombres pour le déplacer dans la "boîte de visualisation".
Votre objectif à ce stade est de modifier l'un de ces chiffres et de voir ce qui se passe.
Vous pouvez également omettre complètement la zone de visualisation, mais votre kilométrage variera en fonction de tous les autres paramètres que vous avez à l'époque. D'après mon expérience, vous rencontrerez des problèmes avec la préservation du rapport hauteur / largeur car la boîte de visualisation aide à définir le rapport hauteur / largeur.
CONSERVER LES PROPORTIONS
MDN: https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/preserveAspectRatio
Sur la base de mes recherches, il existe de nombreux paramètres de rapport d'aspect différents, mais celui par défaut est appelé xMidYMid meet. Je l'ai mis sur le mien pour me le rappeler explicitement. xMidYMid meetle fait évoluer proportionnellement en fonction des points médians X et Y. Cela signifie qu'il reste centré dans la fenêtre d'affichage.
LARGEUR
MDN: https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/width
Regardez mon exemple de code ci-dessus. Remarquez comment je règle uniquement la largeur, pas la hauteur. Je l'ai réglé à 100% pour qu'il remplisse le conteneur dans lequel il se trouve. C'est ce qui contribue probablement le plus à répondre à cette question de débordement de pile.
Vous pouvez le changer à la valeur de pixel que vous voulez, mais je recommanderais d'utiliser 100% comme je l'ai fait pour le gonfler jusqu'à la taille maximale, puis le contrôler avec CSS via le conteneur parent. Je le recommande car vous obtiendrez un contrôle "correct". Vous pouvez utiliser des requêtes multimédias et vous pouvez contrôler la taille sans JavaScript fou.
MISE À L'ÉCHELLE AVEC CSS
Regardez à nouveau mon exemple de code ci-dessus. Remarquez comment j'ai ces propriétés:
resize: 'horizontal', // you can safely omit this
overflow: 'hidden', // if you use resize, use this to fix weird scrollbar appearance
width: '1000px',
height: 'auto',
Ceci est supplémentaire, mais il vous montre comment permettre à l'utilisateur de redimensionner le SVG tout en conservant le bon rapport hauteur / largeur. Étant donné que le SVG conserve son propre rapport hauteur / largeur, il vous suffit de rendre la largeur redimensionnable sur le conteneur parent, et il sera redimensionné comme vous le souhaitez.
Nous laissons la hauteur seule et / ou la réglons sur auto, et nous contrôlons le redimensionnement avec la largeur. J'ai choisi la largeur car elle est souvent plus significative en raison des conceptions réactives.
Voici une image de ces paramètres utilisés:
Si vous avez lu toutes les solutions de cette question et êtes toujours confus ou ne voyez pas tout à fait ce dont vous avez besoin, consultez ce lien ici. Je l'ai trouvé très utile:
https://css-tricks.com/scale-svg/
C'est un article massif, mais il décompose à peu près toutes les façons possibles de manipuler un SVG, avec ou sans CSS. Je vous recommande de le lire tout en buvant un café ou votre choix de liquides choisis.
