Erweitern Sie mehrere SVG-Dateien im gleichen Verhältnis

Question

Ich habe eine Sammlung von fast hundert SVG-Dateien, alle wunderschön handcodiert, jede mit sorgfältig spezifizierter ViewBox, Breite und Höhe. Diese SVG-Dateien variieren in Breite, Höhe und Seitenverhältnis.

Es gibt ein unangenehmes Problem: Mir sind ihre relativen Größen wichtig und ich möchte sie beibehalten.

• Auf HTML-Seiten möchte ich, dass sie in ihrer „natürlichen“ Größe, also der durch Breite und Höhe vorgegebenen Größe, angezeigt werden. Ziemlich einfach: <img src="….svg">。也许CSS应该指定{object-fit: none;}, scheint aber nicht zu funktionieren.

• Ich möchte auch mit einer gleichmäßigen Vergrößerung anzeigen, sagen wir 6x. Natürlich kann CSS die Pixelbreite beibehalten, aber diese Art der Hochskalierung erfolgt nicht um einen konsistenten Faktor.

Bitte sagen Sie mir, wie ich in HTML oder CSS (vorzugsweise ohne Skripte) festlegen kann, dass SVGs mit 600 % ihrer Grundgröße angezeigt werden, d. h. mit dem Sechsfachen der Breite und Höhe in der ersten Zeile jeder SVG-Datei.

---

[Bearbeiten] Vielleicht inspirieren ein paar Worte über den Zweck die Menschen oder unterhalten einfach nur. In Finanzmarktdiagrammen und numerischen Grafiken herrscht ein Durcheinander. Es gibt keine einheitliche Darstellung. Seit Jahrzehnten verwende ich einige von mir selbst entworfene Standardsymbole, wie zum Beispiel USD EUR GBP JPY CHF CAD AUD NZD SEK NOK. Im Laufe der Zeit wurde diese Liste erweitert und umfasst nun alle Emittenten von Währungen und Staatsanleihen, die ich in Betracht gezogen habe, EMBI-Mitglieder, EU-Mitglieder und Beitrittskandidaten, einige andere Länder mit höherem BIP sowie Emittenten von Entwicklungsbankanleihen. Jetzt wird diese Sammlung als SVG umgeschrieben, wobei nebenbei Verbesserungen und Verfeinerungen vorgenommen werden. Unterschiedliche Markierungen haben unterschiedliche Seitenverhältnisse und daher unterschiedliche Breiten. Ich möchte, dass meine HTML-Seiten in ihrer (kleinen) natürlichen Größe angezeigt werden, aber auch in einer gleichmäßigen Vergrößerung, um die Richtigkeit der Details zu überprüfen.

Ja, sie werden Open Source unter der Boost-Lizenz sein, wenn sie fertig sind.

Answer 1

对于6倍缩放，请将您的标签设置如下

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

或者将transform属性添加到您的CSS文件中。6,6表示X和Y分别缩放6倍。