Comment faire un <svg> l’élément se développe ou se contracte dans son conteneur parent?

Question

Le but est d'avoir le <svg> agrandir 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 l'attribut viewBox sur le <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 avec le <svg> document pourcentage d'utilisation de largeurs, hauteurs, etc.. au lieu de dimensions fixes?

Answer 1

Le viewBox n'est pas la hauteur du conteneur, mais 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 correspondra à 10% de la largeur de l’image.

Answer 2

@robertc a raison, mais vous devez également noter que svg, #container provoque la mise à l'échelle exponentielle du svg pour tout sauf 100% (une fois pour #container et une fois pour svg ).

En d’autres termes, si j’appliquais 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 bien lorsqu'il est utilisé comme le suggère @robertc.

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

Answer 3

Pour votre iphone, vous pouvez utiliser dans votre tête balise:

 "width=device-width"