Kembangkan berbilang fail SVG dengan perkadaran yang sama

Question

Saya mempunyai koleksi hampir seratus fail SVG, semuanya berkod tangan dengan cantik, setiap satu dengan kotak pandangan, lebar dan ketinggiannya dinyatakan dengan teliti. Fail SVG ini berbeza dari segi lebar, ketinggian dan nisbah bidang.

Terdapat masalah janggal: Saya mengambil berat dan ingin mengekalkan saiz relatifnya.

• Pada halaman HTML saya mahu ia dipaparkan dalam saiz "semulajadi"nya, iaitu saiz yang ditentukan mengikut lebar dan tinggi. Cukup mudah: <img src="….svg">。也许CSS应该指定{object-fit: none;}, tetapi nampaknya tidak berkesan.

• Saya juga ingin memaparkan pada pembesaran yang konsisten, katakan 6x. Jelas sekali, CSS boleh melekat pada lebar piksel, tetapi jenis peningkatan ini tidak akan berlaku dengan faktor yang konsisten.

Sila beritahu saya, dalam HTML atau CSS (sebaik-baiknya tanpa skrip), bagaimana saya boleh menentukan bahawa SVG dipaparkan pada 600% saiz asasnya, iaitu 6 kali lebar dan tinggi dalam baris pertama setiap fail SVG.

---

[sunting] Mungkin beberapa perkataan tentang tujuan akan memberi inspirasi kepada orang ramai, atau sekadar menghiburkan. Dalam carta pasaran kewangan dan grafik berangka, ia adalah kucar-kacir. Tiada perwakilan yang konsisten. Selama beberapa dekad saya telah menggunakan beberapa simbol standard reka bentuk saya sendiri, seperti USD EUR GBP JPY CHF CAD AUD NZD SEK NOK. Dari masa ke masa senarai ini telah berkembang untuk memasukkan semua mata wang dan penerbit bon berdaulat yang saya pertimbangkan, konstituen EMBI, ahli EU dan calon penyertaan, beberapa negara lain yang mempunyai KDNK yang lebih besar dan penerbit bon bank pembangunan . Kini koleksi ini sedang ditulis semula sebagai SVG, dengan penambahbaikan dan penambahbaikan sedang dibuat. Penanda yang berbeza mempunyai nisbah aspek yang berbeza dan oleh itu lebar yang berbeza. Saya mahu halaman HTML saya dipaparkan pada saiz semula jadi (kecil), tetapi juga pada pembesaran yang konsisten untuk memastikan butiran adalah betul.

Ya, ia akan menjadi sumber terbuka di bawah lesen Boost apabila bersedia.

Answer 1

Untuk zum 6x, tetapkan label anda seperti berikut

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

Atau tambahkan atribut transform pada fail CSS anda. 6,6 bermakna X dan Y masing-masing berskala 6 kali.