web-dev-qa-db-fra.com

comment redimensionner un grand svg pour l'adapter à l'intérieur d'un div

J'ai le div suivant à l'intérieur <body>.

<div style="width:320px; height:480px;">
    <svg id="svg1"></svg>            
</div>

Je veux insérer un svg 640X480 dans ce div. J'ai essayé ceci:

var paper=Snap("#svg1");
Snap.load("somesvg.svg",function(f){ 
 paper.append(f);
 }); 
 paper.attr({ 
 width:320, height:480
 })

Mais le svg est coupé de la bonne taille.

javascripthtmlcsssvgsnap.svg
20
naheed

Je me demandais d'ajuster la viewBox pour cela, donc quelque chose comme ...

<div style="width:320px; height:480px;">
    <svg id="svg1" width="100%" height="100%" viewBox="0 0 640 480" preserveAspectRatio="xMaxYMax"></svg>
</div>

jsfiddle http://jsfiddle.net/9zRR8/5/

30
Ian

Le SVG ne sera pas mis à l'échelle car il n'a pas de viewBox défini. La viewBox indique au navigateur quelles sont les dimensions du contenu. Sans elle, il n'y a aucun moyen de déterminer combien elle doit être augmentée ou réduite pour s'adapter.

C'est une sorte d'échec de svg-edit. Il devrait vraiment en ajouter un, idéalement.

Ce que vous pourriez essayer est de charger le SVG dans Inkscape ou un autre éditeur SVG qui devrait ajouter une viewBox. Alternativement, vous pouvez en ajouter un manuellement, selon la réponse d'Ian.

6
Paul LeBeau