svg attribut viewBox
Je suis d'apprentissage svg à partir de ses documents officiels, il y a une telle ligne. Je ne comprends pas, si il a déjà une width
et height
attribut, ce qui est le point de spécifier à nouveau dans viewBox="0 0 1500 1000"
?
Il est dit, "Une unité px est définie de façon à être égale à un utilisateur de l'unité. Ainsi, une longueur de "5px" est la même que la longueur de la "5"" dans les docs officielles, donc ce viewBox est un 1500px de large et 1000 hauteur de vue, ce qui dépasse 300px et 200px. Alors pourquoi faut-il définir la largeur et la hauteur de la valeur en premier lieu?
<svg width="300px" height="200px" version="1.1"
viewBox="0 0 1500 1000" preserveAspectRatio="none"
xmlns="http://www.w3.org/2000/svg">
Vous devez vous connecter pour publier un commentaire.
La largeur et la hauteur sont comment big le
<svg>
est. La viewBox contrôle la manière dont son contenu est affiché si la viewBox="0 0 1500 1000" à l'échelle le contenu de<svg>
élément par un facteur de 5 (1500 /300 = 5 et 1000 /200 = 5) et le contenu sera 1/5 de la taille ils le seraient sans le viewBox mais la<svg>
Imaginez que vous avez une surface élastique et le couper en 4 morceaux égaux. Si vous lancez 3 pièces plus loin, vous avez une surface qui est 1/4 de la taille de la surface d'origine. Si vous maintenant tronçon de la surface et de le faire de la même taille que la surface d'origine alors tout sur la surface sera le double de la taille. C'est comment négatoscopes et la largeur/hauteur sont liées.
Si vous ne spécifiez pas un viewbox, tous sans unité des nombres dans un élément sont supposés être pixels. (et SVG suppose 90 dpi ou en pixels par pouce pour la conversion d'unités comme cm de pixels).
Un viewbox vous permet de faire des sans unité nombre d'éléments moyenne de l'utilisateur "unités" et indique comment ces unités sont mappées à la taille. Pour des raisons de simplicité, tenir compte des coordonnées x, qui est, d'une règle. Votre viewbox dit que votre règle n'aura 1500 unités pour correspondre à la 200 la taille en pixels de la largeur de la svg.
Un élément ligne de 0 à 1500 (sans unité, c'est à dire l'utilisateur unités) s'étendrait 200 pixels, dessiné, c'est, à travers la largeur du dessin svg.
(Et depuis SVG est évolutif, sans perte de résolution, pixels n'a vraiment pas beaucoup de sens dans le monde réel, lorsqu'un utilisateur effectue un zoom avant ou arrière.)
Son une transformation de coordonnées, de toutes sortes.
Je vous suggère d'apprendre à partir d'un livre comme "SVG Essentials", environ 10 $utilisé, à partir de laquelle j'ai vaguement citer cette réponse.
Par défaut
la "règle" de svg grille de pixels (toutes les formes que svg est mesurée en pixels)
Mais vous voulez utiliser vos propres unités, vous pouvez utiliser l'attribut viewBox pour que:
Qui signifie:
axe horizontal: 1500 (la largeur de votre unité) = 300px => 1 (la largeur de votre unité) = 300/1500px = 1/5px
axe vertical: 1000 (votre unité de hauteur) = 200px => 1 (votre unité de hauteur) = 200/1000px = 1/5px
de leurs largeurs échelle de 1/5px (1/5 < 1 => l'échelle vers le bas) en comparant à l'origine.
leurs hauteurs à l'échelle de 1/5px (1/5 < 1 => l'échelle vers le bas) en comparant à l'origine