Comment faire en sorte qu’un élément se développe ou se contracte sur son conteneur parent?

L’objective est d’append l’élément à la taille de son conteneur parent, en l’occurrence un

, quelle que soit la taille de ce conteneur.

Le code:

  svg, #container{ height: 100%; width: 100%; }  

La solution la plus commune à ce problème semble être de définir l’atsortingbut viewBox sur l’élément .

 viewBox="0 0 widthOfContainer heightOfContainer" 

Cependant, cela ne semble pas fonctionner dans les cas où les éléments de l’élément ont des largeurs et / ou des hauteurs prédéfinies. Par exemple, l’élément du code ci-dessus a sa largeur et sa hauteur explicitement définies.

La solution évidente consiste donc à utiliser également les largeurs% et les% de hauteur sur ces éléments. Mais cela doit-il être fait? Surtout, puisque fonctionne et développe / contracte sans aucun problème avec des hauteurs et des largeurs explicitement définies.

Si des éléments tels que et d’autres éléments similaires doivent avoir des largeurs et des hauteurs définies en pourcentage, Inkscape peut-il le définir de manière à ce que tous les éléments du document utilisent des largeurs de pourcentage, des hauteurs, etc. .. au lieu de dimensions fixes?

Le viewBox n’est pas la hauteur du conteneur, c’est la taille de votre dessin. Définissez votre viewBox sur 100 unités de largeur, puis définissez votre rect sur 10 unités. Après cela, quelle que soit la taille du SVG, le rect aura 10% de la largeur de l’image.

Supposons que j’ai un SVG qui ressemble à ceci: pic1

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

J’ouvre d’abord le fichier SVG dans une application comme inkscape. Dans Fichier-> Propriétés du document, définissez la largeur du document sur 800px et la hauteur sur 600px (vous pouvez choisir d’autres tailles). Ensuite, je mets le SVG dans ce document.

pic2

Ensuite, je sauvegarde ce fichier en tant que nouveau fichier SVG et récupère les données de chemin de ce fichier. Maintenant, en HTML, le code qui fait la magie est le suivant:

 

Notez que la largeur et la hauteur de SVG sont toutes les deux définies à 100%, car nous voulons qu’il remplisse le conteneur verticalement et horizontalement, mais la largeur et la hauteur du viewBox sont identiques à la largeur et la hauteur du document dans inkscape qui est 800px X 600px. La prochaine chose à faire est de définir la propriété sciencesAspectRatio sur “none”. Si vous avez besoin de plus d’informations sur cet atsortingbut, voici un bon lien . Et c’est tout ce qu’il y a à faire.

Une autre chose est que ce code fonctionne sur presque tous les principaux navigateurs, même les anciens, mais sur certaines versions d’Android et d’iOS, vous devez utiliser du code javascrip / jQuery pour le garder cohérent. J’utilise ce qui suit dans le document prêt et les fonctions de redimensionnement:

 $('#svgId').css({ 'width': $('#containerId').width() + 'px', 'height': $('#containerId').height() + 'px' }); 

J’espère que cela aide!

Ce qui a fonctionné pour moi récemment, c’est de supprimer tous les atsortingbuts height="" et width="" de la et de toutes les balises enfants. Vous pouvez ensuite utiliser la mise à l’échelle en utilisant un pourcentage de la hauteur ou de la largeur du conteneur parent.

@robertc a raison, mais vous devez également noter que svg, #container fait que le svg soit mis à l’échelle de manière exponentielle sauf pour 100% (une fois pour #container et une fois pour svg ).

En d’autres termes, si j’applique 50% h / w aux deux éléments, c’est en réalité 50% de 50%, ou 0,5 * 0,5, ce qui équivaut à une échelle de 0,25 ou 25%.

Un sélecteur fonctionne correctement lorsqu’il est utilisé comme @robertc le suggère.

 svg { width:50%; height:50%; } 

Pour votre iphone Vous pourriez utiliser dans votre tête balise:

 "width=device-width"