web-dev-qa-db-fra.com

Est-il possible de faire évoluer SVG en ligne avec CSS?

Je souhaite utiliser des styles CSS pour contrôler la taille des conceptions SVG. Par exemple...

.svg { width:100%; }

Lorsque j'incorpore une image SVG à partir d'un fichier, elle agit comme toute autre image et fonctionne correctement:

<img src="image.svg" class="svg" />

Mais lorsque j'utilise SVG en ligne, cela ne fonctionne pas:

<svg class="svg">...</svg>

La "boîte" svg augmentera, mais le contenu reste le même.

Y a-t-il un moyen de faire cela?

csssvg
52
emersonthis

La première et probablement la meilleure méthode que vous puissiez utiliser utilise simplement l'attribut viewBox . Cela fera que le contenu de la balise svg reprend automatiquement la largeur et la hauteur définies de la balise svg elle-même, en affichant uniquement le contenu des limites définies. Par exemple:

<svg width="82" height="82" viewbox="0 0 102 102">
    <rect x="1" y="1" width="100" height="100" stroke="black" stroke-width="2" fill="white"/>
    <text fill="black" x="10" y="30">FooBarBaz</text>
</svg>

Vous pouvez également appliquer svg transform au contenu de la balise SVG, qui ressemblerait à ceci:

<svg width="82" height="82">
    <g transform="scale(0.8)">
        <rect x="1" y="1" width="100" height="100" stroke="black" stroke-width="2" fill="white"/>
        <text fill="black" x="10" y="30">FooBarBaz</text>
    </g>
</svg>

Enfin, vous pouvez essayer d'utiliser CSS3 transform pour mettre à l'échelle tout l'élément svg. C'est la méthode la moins supportée, mais je le mentionne quand même parce que vous aviez initialement demandé une solution CSS. Je suggère toutefois fortement d’utiliser l’une des solutions ci-dessus, si cela est possible.

<svg width="102" height="102" style="transform:scale(0.8); -webkit-transform:scale(0.8); -moz-transform:scale(0.8); -ms-transform:scale(0.8); -o-transform:scale(0.8);">
    <rect x="1" y="1" width="100" height="100" stroke="black" stroke-width="2" fill="white"/>
    <text fill="black" x="10" y="30">FooBarBaz</text>
</svg>
68
Joeytje50