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

我有一个近百个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倍。

热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板