Cet article présente principalement l'utilisation des attributs ViewBox lors de l'utilisation d'images SVG dans HTML5, y compris un contenu lié à la conception réactive. Les amis qui en ont besoin peuvent y faire référence pour comprendre rapidement les paramètres de Viewbox
L'attribut ViewBox est utilisé pour spécifier l'origine et la taille du système de coordonnées de l'image SVG utilisateur. Tout le contenu dessiné dans SVG est effectué par rapport à ce système de coordonnées. Étant donné que la toile SVG est infiniment étendue dans toutes les directions, vous pouvez même dessiner des graphiques en dehors des limites de ce système de coordonnées; Mais ces graphiques positionnés par rapport à la fenêtre SVG peuvent également être contrôlés par la position du système de coordonnées de l'utilisateur.
La propriété ViewBox utilise quatre paramètres pour spécifier l'emplacement de l'origine du système de coordonnées et sa taille: hauteur de largeur XY. Dans le cas initial, ce système de coordonnées est équivalent au système de coordonnées de fenêtre initialisé (déterminé par la largeur et la hauteur de l'image SVG), et son origine est en (0, 0) - c'est-à-dire le coin supérieur gauche du SVG.
En modifiant les valeurs des deux paramètres x et y, la position de l'origine peut être ajustée. Modifiez les valeurs de largeur et de hauteur pour modifier la taille du système de coordonnées. Utilisez simplement l'attribut Viewbox pour vous aider à développer ou à recadrer la toile SVG. Lire avec l'exemple.
IMPORTANT: Dans cet article, je ne modifierai pas le comportement par défaut (échelle et position) de Viewbox dans la fenêtre SVG. Parce que, selon le comportement par défaut de l'attribut, le contenu de la Viewbox sera inclus le plus possible dans la fenêtre, puis placé au centre. Cependant, l'utilisation de la propriété PreservaspecTeratio vous permet de modifier librement la taille et la position de la boîte de vue, mais dans cet article, ce n'est pas une technique nécessaire, donc nous ne l'expliquerons pas en profondeur ici non plus.
Utilisez ViewBox pour recadrer SVG, c'est-à-dire Utilisez l'attribut ViewBox pour créer un SVG de direction artistique
Il y a quelque temps, un de mes clients a demandé à définir l'avatar SVG de son site Web à différentes tailles en fonction de différentes tailles d'écran, de sorte que seule une petite partie est visible sur un petit écran, une partie plus grande peut être vue sur une taille d'écran moyen, puis le contenu complet peut être vu sur un grand écran. La première idée qui m'est venue à l'esprit à l'époque était que son exigence était d'utiliser l'attribut Viewbox pour recadrer l'image SVG, puis afficher une certaine partie de l'image qu'il voulait voir en fonction de différentes tailles d'écran.
En modifiant la taille et l'origine du système de coordonnées SVG, nous pouvons recadrer le SVG et afficher la partie du contenu que nous voulons afficher dans la fenêtre.
Voyons comment l'implémenter.
Supposons que nous ayons cette image SVG complète comme suit, puis nous voulons le recadrer à la taille d'un petit écran. Cette image est un vecteur de maison gratuit conçu par Freepik, qui est sous licence en vertu de l'accord inapporté Creative Commons Attribution 3.0. Pour plus de simplicité, supposons d'abord que l'image est à peu près ce qui doit être recadré pour s'afficher sur les petits et moyens écrans, et le contenu complet affiché sur le grand écran, comme illustré ci-dessous.
L'image à gauche est l'image complète que nous allons recadrer à l'aide de la propriété Viewbox, et l'image à droite est la zone que nous voulons afficher sur le petit écran.
Maintenant, recadrez le SVG en modifiant la valeur de la propriété Viewbox. Il y a certaines choses qui doivent être prises en compte, nous en parlerons plus tard. Mais d'abord, nous devons modifier le système de coordonnées pour correspondre au contenu de la zone rectangulaire de la boîte virtuelle dans l'image ci-dessus. , en ajustant l'origine du système et les valeurs de largeur et de hauteur, nous pouvons modifier sa valeur de paramètre initiale 0 0 800 800.
Mais comment connaissons-nous les nouvelles coordonnées et les nouvelles dimensions? Le but n'est pas de passer par beaucoup d'expériences et d'erreurs répétées.
Il y a plusieurs façons. Étant donné que nous sommes déjà dans l'éditeur graphique (mon exemple utilise l'IA), nous pouvons utiliser le panneau de l'éditeur pour obtenir la position et les dimensions des éléments.
Je dessine cette boîte rectangulaire pointillée, en plus de représenter ce que je veux afficher sur le petit écran, une autre raison est que nous pouvons obtenir la position et les dimensions du rectangle et les utiliser comme valeur de la boîte de vue. En utilisant le panneau de transformation d'AI (illustré ci-dessous), nous avons obtenu les valeurs dont nous avions besoin. En sélectionnant le rectangle et en cliquant sur le lien de transformation dans le coin supérieur droit, nous obtenons le panneau illustré dans la figure ci-dessous, y compris les valeurs x, y, largeur et hauteur dont nous avons besoin.
Le panneau de transformation de cette IA peut être utilisé pour obtenir la position et la taille du rectangle sélectionné.
Vous avez peut-être remarqué que la valeur ci-dessus n'est pas un entier, nous devons donc le modifier manuellement. Sur la base des informations ci-dessus, nous modifions la valeur de Viewbox en 0 200 512 512.
Étant donné que le rapport d'aspect de la nouvelle Viewbox est le même que celui de la fenêtre SVG (tous les deux carrés), le contenu de la Viewbox sera élargi et seule la zone sélectionnée sera affichée dans la fenêtre. Après avoir modifié la valeur de Viewbox, le résultat est comme indiqué sur la figure:
SVG nouvellement recadré. Seul l'emplacement où nous spécifions que la propriété Viewbox est visible dans la fenêtre. La bordure bleue indique la fenêtre du SVG.
À ce stade, il y a un problème qui doit être résolu:
Et si le rapport d'aspect de la zone recadrée (c'est-à-dire Viewbox) est le rapport d'aspect de la fenêtre SVG?
Dans ce cas, il y aura un débordement important. Le débordement évident, je ne veux pas dire une extension au-delà de la limite de la fenêtre SVG, mais un débordement par rapport au nouveau système de coordonnées utilisateur définie par Viewbox. Le chiffre suivant fournit des explications correspondantes.
Si le rapport d'aspect de Viewbox est différent du rapport d'aspect de la boîte de vue, le contenu du SVG débordera du système de coordonnées de l'utilisateur, et le résultat peut être comme ça.
La bordure noire représente le nouveau système de coordonnées de l'utilisateur et la bordure bleue est la fenêtre SVG.
La bordure noire dans l'image droite ci-dessus est la zone définie par la boîte de vue. Selon le comportement par défaut de Viewbox dans la fenêtre, il sera centré et agrandi autant que possible pour s'assurer que son contenu est inclus dans la fenêtre (bordure bleue).
Étant donné que SVG Canvas s'étend conceptuellement infiniment dans toutes les directions, vous pouvez dessiner des graphiques en dehors des limites du système de coordonnées utilisateur, et le contenu débordera directement et se déplacera, comme le montre la figure ci-dessus.
Si vous modifiez le rapport d'aspect de la fenêtre SVG (la largeur et la hauteur du SVG) pour les faire s'adapter au rapport d'aspect de la Viewbox, vous ne verrez pas de débordement car le zoom de la Viewbox est adapté à la fenêtre, comme dans l'exemple précédent.
Cependant, dans certains cas, vous ne voulez pas ou ne voulez pas du tout modifier le rapport d'aspect du SVG. Par exemple, si vous utilisez SVG Sprite comme un ensemble d'images pour afficher des images sur la page. Dans la plupart des cas, une image a un rapport d'aspect fixe - et vous ne voulez pas modifier la taille de l'image, juste pour vous adapter au contenu d'une petite image à l'intérieur. Ou peut-être que vous avez intégré un système d'icônes et que toutes les icônes restent de la même taille en même temps.
Pour couper l'excès (par exemple, certaines autres icônes sur Sprite sont affichées dans la fenêtre), vous pouvez utiliser <lippath> pour couper l'excès. Le chemin de dérivation peut être un élément <cct> couvrant la zone de la boîte de vue entière, puis appliquer cet élément au SVG racine.
Cependant, il y a une autre chose à retenir: assurez-vous que les propriétés x et y de <crect> sont cohérentes avec Viewbox, à moins que RECT ne soit relativement positionné à l'origine du système d'origine / initialisé, alors le contenu du SVG qui est recadré est également incertain.
CODE CSS Copier le contenu dans le presse-papiers