Comment faire un <svg> élément de dilater ou de se contracter à son conteneur parent?

Le but est d'avoir le <svg> élément étendre à la taille de son conteneur parent, dans ce cas, un <div>, n'importe comment grand ou petit que le conteneur peut être.

Le code:

<style>
    svg, #container{
        height: 100%;
        width: 100%;
    }
</style>

<div id="container">
    <svg xmlns="http://www.w3.org/2000/svg" version="1.1" >
         <rect x="0" y="0" width="100" height="100" />
    </svg>
</div>

La solution la plus courante à ce problème semble être le réglage de la viewBox attribut sur la <svg> élément.

viewBox="0 0 widthOfContainer heightOfContainer"

Toutefois, cela ne semble pas fonctionner dans les cas où les éléments à l'intérieur de la <svg> élément prédéfini largeur et/ou hauteur. Par exemple, le <rect> élément, dans le code ci-dessus, a sa largeur et sa hauteur sont explicitement définis.

Donc, la solution évidente est d'utiliser le % de la largeur et de % hauteurs sur ces éléments. Mais cela veut-il encore à faire? Surtout, depuis <img src=test.svg > fonctionne très bien et se développe/contrats sans aucun problème avec les définir explicitement <rect> hauteurs et largeurs.

Si des éléments comme <rect>, et d'autres éléments, comme elle, avaient leurs largeurs et hauteurs définies en pourcentage, est-il un moyen dans Inkscape pour la régler de sorte que tous les éléments de la <svg> document pourcentage d'utilisation de largeurs, hauteurs, etc.. au lieu de dimensions fixes?

Enregistrer le svg comme un fichier de référence comme une image, comme <img src="fichier.svg"/> et de cette façon vous pouvez utiliser width:100% ou taille:100%
Double Possible de Comment puis-je faire une svg à l'échelle avec son conteneur parent?

InformationsquelleAutor user782860 | 2012-01-18

49

La viewBox n'est pas à la hauteur du conteneur, c'est la taille de votre dessin. Définir votre viewBox à 100 unités dans la largeur, puis définir votre rect à 10 unités. Après cela, cependant à grande échelle le SVG, le rect sera de 10% de la largeur de l'image.
- Mais la question est: Comment faire évoluer la SVG?
- La mise à l'échelle s'effectue automatiquement lorsque vous réglez la taille de l'objet SVG, comme cela se fait déjà dans le code de la question. Voici une version corrigée de l'exemple.
- Vous avez raison, la grande, qui fonctionne réellement pour moi. Je suppose que mon problème était les propriétés height et width dans mon fichier svg élément racine.
- j'ai fait quelques modifications mineures pour que le violon à faire que le redimensionnement d'être forcé à l'horizontale et à la verticale sans conserver l'aspect ratio, et de le faire fonctionner sous IE, alors que le violon @robertc soumis ne l'était pas. Espère que ça vous aidera quelqu'un en bas de la route!
- Par défaut, votre svg à l'échelle aussi grande que possible, de sorte qu'il est complètement visible, mais conserve le même aspect ratio (donc un carré viewBox de ne pas remplir complètement rectangulaire parent). Si vous voulez vraiment vous forcer à couvrir complètement le conteneur parent, ajouter preserveAspectRatio="none" pour l'élément SVG.
- Cette information est utile. La viewbox unité est une unité relative. Dans mon cas, j'ai eu un carré viewbox de 0 0 6.82666 6.82666 j'ai donc définir la largeur et la hauteur de l'attribut 6.82666, puis à 100% sur le <svg> élément en CSS. Il semble fonctionner.
- Salut Robert, seriez-vous intéressés par une petite SVG travail de consultation? Nous avons juste besoin d'aide pour comprendre SVG détails, comme cela, afin que nous puissions nous concentrer sur les véritables caractéristiques du produit: stackoverflow.com/questions/54001972/...
InformationsquelleAutor robertc
22

Supposons que j'ai un SVG qui ressemble à ceci:

Et je veux le mettre dans un div et de faire remplir le div de réactivité. Ma façon de faire est la suivante:

J'ai d'abord ouvrir le fichier SVG dans une application comme inkscape. Dans Fichier->Propriétés du Document-je régler la largeur du document de 800px et et la hauteur à 600px (vous pouvez choisir d'autres tailles). Puis-je intégrer le SVG dans ce document.

Puis-je enregistrer ce fichier sous un nouveau fichier SVG et obtenir le chemin d'accès des données à partir de ce fichier.
Maintenant en HTML le code qui fait la magie est comme suit:
```
<div id="containerId">    
    <svg
    id="svgId" 
    xmlns:svg="http://www.w3.org/2000/svg"
    xmlns="http://www.w3.org/2000/svg"
    version="1.1"
    x="0"
    y="0"
    width="100%"
    height="100%"
    viewBox="0 0 800 600"
    preserveAspectRatio="none">
       <path d="m0 0v600h800v-600h-75.07031l-431 597.9707-292.445315-223.99609 269.548825-373.97461h-271.0332z" fill="#f00"/>
    </svg>
</div>
```
Remarque que la largeur et la hauteur de SVG sont toutes les deux à 100%, car nous le voulons pour remplir le contenant à la verticale et à l'horizontale ,mais la largeur et la hauteur de la viewBox sont les mêmes que la largeur et la hauteur du document dans inkscape qui est de 800px X 600px. La prochaine chose que vous devez faire est de définir la preserveAspectRatio à "none". Si vous avez besoin d'avoir plus d'informations sur cet attribut voici un bon lien. Et c'est tout là est à lui.

Une chose, c'est que ce code fonctionne sur presque tous les principaux navigateurs, même les anciens mais sur certaines versions d'android et ios, vous devez utiliser certaines javascrip/jQuery code de garder sa cohérence. J'utilise la suite dans le document de prêt et de redimensionner les fonctions:
```
$('#svgId').css({
    'width': $('#containerId').width() + 'px',
    'height': $('#containerId').height() + 'px'
});
```
Espère que cela aide!
- +1 pour le preserveAspectRatio note. Après la chasse haute et basse pour obtenir une SVG à fait s'étirer (pas à l'échelle) à une div, c'était la bonne réponse.
- Merci pour cette merveilleuse réponse. avez des questions sur le même. Que faire si mon svg est imbriqué. par exemple, <svg> <svg id="1"></svg> <svg id="2"></svg> </svg> je veux afficher du svg 1 et 2 de façon conditionnelle et il devrait prendre de la largeur et de la hauteur du conteneur. <div id="container" style="width:200px;height:200px;"></div> pouvez-vous svp m'aider sur ce point.
- Baradaran: Genius.
InformationsquelleAutor Reza Baradaran Gazorisangi
4

Ce qui est travaillé pour me récemment est de supprimer tous les height="" et width="" attributs de la <svg> tag et toutes les balises enfants. Ensuite, vous pouvez utiliser la mise à l'échelle à l'aide d'un pourcentage du conteneur parent de la hauteur ou de la largeur.
- Pouvez-vous donner un exemple de travail? Je ne peux pas obtenir ce pour rien faire.
InformationsquelleAutor Geoff Colbath
2

@robertc a droite, mais vous avez aussi besoin d'avis que svg, #container provoque le svg être multipliée de façon exponentielle pour rien, mais 100% (une fois pour #container et une fois pour svg).

En d'autres termes, si j'ai appliqué 50% h/w pour les deux éléments, c'est en fait de 50% de 50%, ou .5 * .5, ce qui équivaut à .25, ou 25% de l'échelle.

Un sélecteur fonctionne très bien lorsqu'il est utilisé comme @robertc suggère.
```
svg {
  width:50%;
  height:50%;
}
```
- C'est parce que le sélecteur de svg, #container correspond à deux le svg élément du dom et le #container élément du dom. Je crois que vous étiez à la place recherche pour svg #container, mais la spécification d'un parent n'est pas nécessaire si vous utilisez un ID de toute façon.
- N'est-ce pas exactement ce que j'ai dit, "une fois pour #conteneur et une fois pour le svg"?
- Oh pardon, vous avez raison, mais votre réponse est un peu curieusement formulée menant à l'incompréhension. Il semble que si vous parlez d'un potentiel de gotcha au premier abord.
InformationsquelleAutor Justin Putney
1

Pour votre iphone que Vous pourriez utiliser dans votre tête balise :
```
"width=device-width"
```
InformationsquelleAutor vincent

Vous devez vous connecter pour publier un commentaire.