web-dev-qa-db-fra.com

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

L'objectif est que l'élément <svg> Soit étendu à la taille de son conteneur parent, dans ce cas un <div>, Peu importe 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 de définir l'attribut viewBox sur l'élément <svg>.

viewBox="0 0 widthOfContainer heightOfContainer"

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

La solution évidente consiste donc à utiliser également% largeurs et% hauteurs sur ces éléments. Mais cela doit-il même être fait? En particulier, puisque <img src=test.svg > Fonctionne correctement et se développe/se contracte sans aucun problème avec les hauteurs et les largeurs explicitement définies <rect>.

Si des éléments tels que <rect> Et d'autres éléments similaires doivent avoir leur largeur et leur hauteur définies en pourcentage, existe-t-il un moyen dans Inkscape de le définir de sorte que tous les éléments contenant le document <svg> Soient utilisés? pourcentage largeurs, hauteurs, etc. au lieu de dimensions fixes?

csshtml5svgresponsive-design
105
user782860

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 aura 10% de la largeur de l’image.

51
robertc

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

Et je veux le mettre dans un div et le faire remplir le div en conséquence. 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, je règle la largeur du document sur 800 px et la hauteur sur 600 px (vous pouvez choisir d'autres tailles). Ensuite, j'insère 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 à partir 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 souhaitons 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 que vous devez faire est de définir le preserveAspectRatio sur "none". 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 la plupart des principaux navigateurs, même les anciens, mais sur certaines versions de Android et ios, vous devez utiliser du code javascrip/jQuery pour le maintenir cohérent. I utilisez les fonctions suivantes dans les fonctions de préparation et de redimensionnement de document:

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

J'espère que ça aide!

22
Reza Baradaran Gazorisangi

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

4
Geoff Colbath

@robertc a raison, mais vous devez aussi remarquer que svg, #container fait en sorte que le svg soit redimensionné de manière exponentielle 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%;
}
2
Justin Putney

Pour ton iphone Tu pourrais utiliser dans ta tête balise:

"width=device-width"
1
vincent