我有一个近百个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许可下开源。
对于6倍缩放,请将您的标签设置如下
或者将transform属性添加到您的CSS文件中。6,6表示X和Y分别缩放6倍。