Comment puis-je créer une échelle svg avec son conteneur parent?

Je veux avoir l'échelle de contenu d'un élément svg en ligne lorsque la taille n'est pas native. Bien sûr, je pourrais l'avoir dans un fichier séparé et le mettre à l'échelle comme ça.

index.html: <img src="foo.svg" style="width: 100%;" />

foo.svg: <svg width="123" height="456"></svg>

Cependant, je veux ajouter des styles supplémentaires au SVG via CSS, donc lier un externe n'est pas une option. Comment créer une échelle SVG en ligne?

Pour spécifier les coordonnées dans l'image SVG indépendamment de la taille mise à l'échelle de l'image, utilisez l' viewBoxattribut sur l'élément SVG pour définir ce qu'est le cadre de sélection de l'image dans le système de coordonnées de l'image, et utilisez les attributs widthet heightpour définir ce que la largeur ou la hauteur sont par rapport à la page contenant.

Par exemple, si vous disposez des éléments suivants:

<svg>
    <polygon fill=red stroke-width=0 
             points="0,10 20,10 10,0" />
</svg>

Il restituera un triangle de 10px par 20px:

Maintenant, si vous ne définissez que la largeur et la hauteur, cela changera la taille de l'élément SVG, mais pas l'échelle du triangle:

<svg width=100 height=50>
    <polygon fill=red stroke-width=0 
             points="0,10 20,10 10,0" />
</svg>

Si vous définissez la zone de vue, cela entraîne la transformation de l'image de sorte que la zone donnée (dans le système de coordonnées de l'image) soit agrandie pour s'adapter à la largeur et à la hauteur données (dans le système de coordonnées de la page). Par exemple, pour augmenter la taille du triangle à 100 pixels par 50 pixels:

<svg width=100 height=50 viewBox="0 0 20 10">
    <polygon fill=red stroke-width=0 
             points="0,10 20,10 10,0" />
</svg>

Si vous souhaitez l'adapter à la largeur de la fenêtre HTML:

<svg width="100%" viewBox="0 0 20 10">
    <polygon fill=red stroke-width=0 
             points="0,10 20,10 10,0" />
</svg>

Notez que par défaut, le rapport hauteur / largeur est conservé. Donc, si vous spécifiez que l'élément doit avoir une largeur de 100%, mais une hauteur de 50 pixels, il ne sera en fait mis à l'échelle qu'à la hauteur de 50 pixels (sauf si vous avez une fenêtre très étroite):

<svg width="100%" height="50px" viewBox="0 0 20 10">
    <polygon fill=red stroke-width=0 
             points="0,10 20,10 10,0" />
</svg>

Si vous souhaitez qu'il s'étire horizontalement, désactivez la conservation des proportions avec preserveAspectRatio=none:

<svg width="100%" height="50px" viewBox="0 0 20 10" preserveAspectRatio="none">
    <polygon fill=red stroke-width=0 
             points="0,10 20,10 10,0" />
</svg>

(notez que même si dans mes exemples j'utilise une syntaxe qui fonctionne pour l'intégration HTML, pour inclure les exemples en tant qu'image dans StackOverflow, je suis plutôt intégré dans un autre SVG, donc je dois utiliser une syntaxe XML valide)

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.

Vous voudrez faire une transformation en tant que telle:

avec JavaScript:

document.getElementById(yourtarget).setAttribute("transform", "scale(2.0)");

Avec CSS:

#yourtarget {
  transform:scale(2.0);
  -webkit-transform:scale(2.0);
}

Enveloppez votre page SVG dans une balise de groupe en tant que telle et ciblez-la pour manipuler la page entière:

<svg>
  <g id="yourtarget">
    your svg page
  </g>
</svg>

Remarque : l'échelle 1.0 est 100%

Déconner et trouvé que ce CSS semble contenir le SVG dans le navigateur Chrome jusqu'au point où le conteneur est plus grand que l'image:

div.inserted-svg-logo svg { max-width:100%; }

Semble également fonctionner dans FF + IE 11.

changer le fichier SVG n'était pas une solution équitable pour moi, alors j'ai plutôt utilisé des unités CSS relatives .

vh, vw, %Sont très pratiques. J'ai utilisé un CSS comme height: 2.4vh;pour définir une taille dynamique pour mes images SVG.

Un autre moyen simple est

transform: scale(1.5);

L'ajustement de l'attribut currentScale fonctionne dans IE (j'ai testé avec IE 11), mais pas dans Chrome.