Développez plusieurs fichiers SVG dans les mêmes proportions

Question

J'ai une collection de près d'une centaine de fichiers SVG, tous magnifiquement codés à la main, chacun avec sa viewBox, sa largeur et sa hauteur soigneusement spécifiées. Ces fichiers SVG varient en largeur, en hauteur et en format.

Il y a un problème délicat : je me soucie de leur taille relative et je veux la préserver.

• Sur les pages HTML, je souhaite qu'elles soient affichées dans leur taille "naturelle", c'est-à-dire la taille spécifiée par la largeur et la hauteur. Assez simple : <img src="….svg">。也许CSS应该指定{object-fit: none;}, mais cela ne semble pas fonctionner.

• Je souhaite également afficher avec un grossissement constant, disons 6x. Évidemment, CSS peut s'en tenir aux largeurs de pixels, mais ce type de mise à l'échelle ne se produira pas de manière cohérente.

Merci de me dire, en HTML ou CSS (de préférence sans scripts), comment puis-je spécifier que les SVG soient affichés à 600% de leur taille de base, soit 6 fois la largeur et la hauteur dans la première ligne de chaque fichier SVG.

---

[modifier] Peut-être que quelques mots sur le but inspireront les gens, ou simplement divertiront. Dans les graphiques des marchés financiers et les graphiques numériques, c'est le bordel. Il n’y a pas de représentation cohérente. Depuis des décennies, j'utilise certains symboles standards de ma propre conception, tels que USD EUR GBP JPY CHF CAD AUD NZD SEK NOK. Au fil du temps, cette liste s'est élargie pour inclure tous les émetteurs de devises et d'obligations souveraines que j'ai pris en compte, les constituants de l'EMBI, les membres de l'UE et les candidats à l'adhésion, certains autres pays avec des PIB plus élevés et les émetteurs d'obligations des banques de développement. Cette collection est désormais réécrite au format SVG, avec des améliorations et des raffinements apportés en cours de route. Différents marqueurs ont des proportions différentes et donc des largeurs différentes. Je souhaite que mes pages HTML soient affichées dans leur (petite) taille naturelle, mais aussi avec un grossissement constant pour vérifier que les détails sont corrects.

Oui, ils seront open source sous licence Boost lorsqu'ils seront prêts.

Answer 1

Pour un zoom 6x, définissez vos étiquettes comme suit

<img src="….svg" style='transform: scale(6,6)' />

Ou ajoutez l'attribut transform à votre fichier CSS. 6,6 signifie que X et Y sont respectivement mis à l'échelle 6 fois.