按照相同比例擴大多個SVG文件
P粉244730625
P粉244730625 2024-01-10 17:27:19
0
1
482

我有一個近百個SVG檔案的收藏,它們都是精美手工編碼的,每個文件都認真地指定了viewBox、寬度和高度。這些SVG檔案的寬度、高度和縱橫比各不相同。

存在一個尷尬的問題:我關心並希望保留它們的相對大小。

  • 在HTML頁面上,我希望以它們的「自然」大小顯示,也就是依照寬度和高度指定的大小。非常簡單:<img src="….svg">。也許CSS應該指定{object-fit: none;},但似乎沒有起作用。

  • 我還想以一致的放大比例顯示,例如6倍。顯然,CSS可以堅持使用像素寬度,但這種類型的放大不會按照一致的因子進行。

請問,在HTML或CSS中(最好不用腳本),如何指定SVG以其基本大小的600%顯示,即每個SVG檔案的第一行中的寬度和高度的6倍。


[編輯]也許一些關於目的的話會激發人們的靈感,或者只是娛樂一下。在金融市場的圖表和數值圖形中,一團糟。沒有一致的表示方法。幾十年來,我一直使用我自己設計的一些標準符號,例如USD EUR GBP JPY CHF CAD AUD NZD SEK NOK。隨著時間的推移,這個清單已經擴展到包括我考慮過的所有貨幣和主權債券發行人,EMBI成分股,歐盟成員和加入候選國,一些具有較大GDP的其他國家,以及開發銀行債券發行人。現在,這個集合正在被重寫為SVG,並在過程中進行了改進和改進。不同的標記有不同的縱橫比,因此寬度也不同。我希望我的HTML頁面能夠以它們(小)的自然大小顯示,同時也能夠以一致的放大比例顯示以檢查細節是否正確。

是的,準備好後,它們將在Boost許可下開源。

P粉244730625
P粉244730625

全部回覆(1)
P粉323374878

對於6倍縮放,請將您的標籤設定如下

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

或將transform屬性加入到您的CSS檔案中。 6,6表示X和Y分別縮放6倍。

熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板