html - SVG 不显示在 Safari 的 img 标签中

Question

简单地说，我在 HTML 中嵌入了一个 SVG 图形，它拒绝在 Safari 中显示(尽管它在 Chrome、Firefox 和其他浏览器中工作正常)。

我正在使用以下标记来完成此操作:

<img alt="grapefruit logo" src="/assets/better-gf-logo_red.svg" />

这是指向未显示 SVG 的页面的实时链接。左上角的水果标志在 Safari 中不显示:https://grapefruit.cs.rpi.edu/ .

我已验证我的 nginx mime.types 中也存在以下行:

 image/svg+xml                         svg svgz;

但是，我知道这个问题可能与 MIME 类型无关，因为 SVG 也没有出现在我的开发机器上的 Safari 中(我测试了几个网络服务器)。我也试过显示 SVG file itself在 Safari 中，它看起来不错。图像元素具有正确的大小和框模型，但未显示任何内容。

Answer 1

结果是 <img src="image.svg">在 Safari 中不起作用，我尝试使用 <object>它奏效了。试一试: jsBin demo

<object
   type="image/svg+xml"
   height="70"
   width="150"
   data="/assets/better-gf-logo_red.svg">
</object> 

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/object