javascript - Microsoft Edge 上的 SVG Logo 显示比其他浏览器大 10 倍

Question

我的网站使用 svg Logo ，如下所示:

<img alt="" class="logo logo-dark" src="images/logo-dark.svg">

svg 文件包含以下有关大小的信息:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="-274.1 380.7 46 41.9" width="40">

确定宽度。

尽管它在所有浏览器中都能正确显示，但在 Microsoft Edge 中，它显示的大小是原来的 10 倍。

我错过了什么？

更新: .logo 具有 max-width:100%

Answer 1

不要在 svg 中使用宽度，而是在 img 标签中使用它，如下所示:

<img alt="" class="logo logo-dark" src="images/logo-dark.svg" width="40">

您还可以在 svg 上同时设置高度和宽度，而不是仅设置宽度。