2017-03-12 4 views
1

Après plusieurs essais, il y a quelque chose à propos de la viewbox SVG que je ne comprends toujours pas. Si je supprime la viewBox de l'exemple suivant, la sortie devient plus petite. Pourquoi cela est-il ainsi? Je sais que les balances viewBox s'adaptent bien, mais je ne vois pas quoi que ce soit à l'échelle. L'étendue du chemin correspondent exactement à la largeur/hauteur du svg:Quelle est la magie derrière l'attribut SVG viewBox?

<svg width=595pt height=806pt viewBox="0 0 595 806" overflow="visible"> 
<g style=" 
fill: none; 
stroke: red; " > 
    <path d=" 
     M 0.000 0.000 
     L 595.000 806 
     L 595.000 0.000 
     L 0.000 806 
"/> 
</g> 
</svg> 

ESSAYER-vous ici: https://jsfiddle.net/7zomyrp9/

Répondre

2

Le viewBox dit que le nous carte 595 pixels en 595 points dans la direction x. Par the CSS3 specification

1ml = 1/72ème de 1in
1px = 1/96ème de 1in

Ainsi, le px: rapport de pt est 96:72 ou 1,3333333: 1

Ainsi, lorsque vous supprimez la viewBox la taille du dessin change par ce facteur.

Le même raisonnement s'applique à la mise à l'échelle y.