Comment faire en sorte qu'un élément <svg> se développe ou se contracte avec son conteneur parent?

Le but est que l' <svg>élément se développe jusqu'à la taille de son conteneur parent, dans ce cas a <div>, quelle que soit la taille de ce conteneur.

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 la définition de l' viewBoxattribut sur l' <svg>élément.

viewBox="0 0 widthOfContainer heightOfContainer"

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

La solution évidente est donc d'utiliser également des% de largeurs et des% de hauteurs sur ces éléments. Mais est-ce que cela doit même être fait? Surtout, puisque <img src=test.svg >fonctionne bien et se dilate / se contracte sans aucun problème avec des <rect>hauteurs et largeurs explicitement définies .

Si des éléments comme <rect>, et d'autres éléments similaires, doivent avoir leurs largeurs et hauteurs définies en pourcentages, y a-t-il un moyen dans Inkscape de le définir de sorte que tous les éléments avec le <svg>document utilisent des largeurs, des hauteurs, etc. en pourcentage au lieu de dimensions fixes ?

Ce viewBoxn'est pas la hauteur du conteneur, c'est la taille de votre dessin. Définissez votre viewBoxlargeur de 100 unités, puis définissez votre valeur rectsur 10 unités. Après cela, quelle que soit la taille du SVG, rectla largeur de l'image sera de 10%.

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

Et je veux le mettre dans un div et le faire remplir le div de manière réactive. Ma façon de procéder est la suivante:

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

Ensuite, j'enregistre ce fichier en tant que nouveau fichier SVG et j'obtiens les données de chemin de ce fichier. Maintenant, en HTML, le code qui fait la magie est le suivant:

<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>

Notez que la largeur et la hauteur de SVG sont toutes deux définies à 100%, car nous voulons qu'il remplisse le conteneur verticalement et horizontalement, 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 préserveAspectRatio sur «aucun». Si vous avez besoin de plus d'informations sur cet attribut, 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 les fonctions de prêt de document et de redimensionnement:

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

J'espère que ça aide!

Ce qui est travaillé pour moi est récemment pour supprimer tous height=""et width=""attributs de l' <svg>étiquette , et de l' enfant. Ensuite, vous pouvez 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, #containerle svg est mis à l'échelle de manière exponentielle pour tout sauf 100% (une fois pour #containeret une fois pour svg).

En d'autres termes, si j'ai appliqué 50% h / w aux deux éléments, c'est en fait 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 pouvez utiliser dans votre tête balise:

"width=device-width"