Comment obtenir une mise à l'échelle SVG réactive dans les conteneurs parents : résoudre le dilemme de ViewBox ?

Résoudre les problèmes de mise à l'échelle SVG dans les conteneurs parents

Question :

Comment un élément SVG peut-il être configuré pour se développer ou se contracter au sein de son conteneur parent, quelle que soit la taille du conteneur ? Malgré la tentative de solution courante consistant à définir l'attribut viewBox, le comportement reste incohérent lorsque les éléments du SVG ont des dimensions prédéfinies.

Réponse :

La cause première de la mise à l'échelle le problème réside dans la définition de viewBox. Le viewBox représente la taille du dessin SVG, pas le conteneur. Pour obtenir une mise à l'échelle réactive, la viewBox doit être définie en unités de largeur et les éléments internes, tels que le rect dans ce cas, doivent être définis en pourcentage de la viewBox.

Par exemple, si la viewBox est réglé sur "100 0 100 100", la largeur et la hauteur du rect doivent être définies comme "10%". De cette façon, quelle que soit la taille du conteneur parent, le rect restera toujours 10 % de la largeur totale du SVG.

Configuration d'Inkscape :

Malheureusement, Inkscape le fait ne propose actuellement pas d'option permettant de définir tous les éléments d'un document SVG pour qu'ils utilisent exclusivement des dimensions en pourcentage. Cela doit être fait manuellement pour chaque élément.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!