缩放<use> d具有正确宽高比的外部SVG

Question

我想使用（外部）SVG图标，并希望能够使用CSS设置填充颜色的样式（据我所知，最好的方法是在每次创建<svg><use xlink:href="…" /></svg>结构时我想用它的地方）。同时我希望它具有正确的宽高比可扩展，因此可以在不同的文本大小周围使用。

但使用height:1.5em;width:auto AFAICS进行缩放仅适用于SVG具有viewBox的情况。有没有办法获得那个viewBox或没有它正确地进行缩放？

Answer 1

如果您的SVG编辑器没有添加viewBox，则没有简单的方法来获取它 - 除了自己计算尺寸并手动添加尺寸。

• 在编辑器中使用鼠标坐标读数，或
• 使用javascript并在相应的元素上调用getBBox()，或
• 使用试错法。迭代地摆弄x，y，宽度和高度，直到你缩小尺寸。