Comment puis-je faire une svg à l'échelle avec son conteneur parent?

Question

Je veux avoir une ligne svg de l'élément de contenu de l'échelle lorsque la taille est non-natif. Bien sûr, je pouvais l'avoir en tant que fichier séparé et de l'échelle comme ça.

index.html: <img src="foo.svg" style="width: 100%;" />

foo.svg: <svg width="123" height="456"></svg>

Cependant, je tiens à ajouter des styles à la SVG thru CSS, le lien externe n'est pas une option. Comment puis-je faire une ligne SVG échelle?

Answer 1

Pour spécifier les coordonnées dans l'image SVG, indépendamment de l'échelle de la taille de l'image, utilisez l' viewBox l'attribut dans l'élément SVG pour définir ce que la boîte englobante de l'image est dans le système de coordonnées de l'image, et l'utilisation de l' width et height attributs pour définir ce que la largeur ou la hauteur sont à l'égard de la page qui les contient.

Par exemple, si vous avez le suivant:

<svg>
    <polygon fill=red stroke-width=0 
             points="0,10 20,10 10,0" />
</svg>

Il est rendu comme un 10px par 20px triangle:

Maintenant, si vous ne définissez que la largeur et la hauteur, que de changer la taille de l'élément SVG, mais pas à l'échelle du triangle:

<svg width=100 height=50>
    <polygon fill=red stroke-width=0 
             points="0,10 20,10 10,0" />
</svg>

Si vous définissez le point de vue de la boîte, qui l'amène à transformer l'image tels que la boîte (dans le système de coordonnées de l'image) est mis à l'échelle pour s'adapter à l'intérieur de la largeur et de la hauteur (dans le système de coordonnées de la page). Par exemple, à l'échelle de triangle à 100px par 50px:

<svg width=100 height=50 viewBox="0 0 20 10">
    <polygon fill=red stroke-width=0 
             points="0,10 20,10 10,0" />
</svg>

Si vous souhaitez mettre à l'échelle jusqu'à la largeur de la fenêtre d'affichage HTML:

<svg width="100%" viewBox="0 0 20 10">
    <polygon fill=red stroke-width=0 
             points="0,10 20,10 10,0" />
</svg>

Notez que, par défaut, le format de l'image est préservée. Donc, si vous spécifiez que l'élément doit avoir une largeur de 100%, mais une hauteur de 50px, il est en réalité seulement à l'échelle jusqu'à la hauteur de 50px (sauf si vous avez une fenêtre très étroite):

<svg width="100%" height="50px" viewBox="0 0 20 10">
    <polygon fill=red stroke-width=0 
             points="0,10 20,10 10,0" />
</svg>

Si vous voulez vraiment de s'étirer horizontalement, désactiver le rapport d'aspect de préservation à l' preserveAspectRatio=none:

<svg width="100%" height="50px" viewBox="0 0 20 10" preserveAspectRatio=none>
    <polygon fill=red stroke-width=0 
             points="0,10 20,10 10,0" />
</svg>

(note que bien que dans mes exemples je utiliser une syntaxe qui fonctionne pour l'intégration HTML, afin d'inclure les exemples comme une image dans StackOverflow, je suis plutôt intégrer dans un autre format SVG, donc j'ai besoin d'utiliser valide la syntaxe XML)

Answer 2

Vous aurez envie de faire une transformation en tant que tel:

avec le Javascript:

document.getElementById(yourtarget).setAttribute("transform", "scale(2.0)");

Avec les CSS:

yourtarget {
transform:scale(2.0);
-webkit-transform:scale(2.0);
}

Enveloppez votre Page SVG dans un Groupe de balise en tant que tel et de les cibler pour manipuler l'ensemble de la page:

<svg>
<g id="yourtargetname">
your svg page
</g>
</svg>

Remarque: l'Échelle de 1.0 est de 100%