html - HTTP 304 通过 jQuery.html() 加载 SVG

Question

我有一个 SVG Logo 包裹在一个站点上的 anchor 中，该站点正在多个测试环境中提供服务。在除我们构建的最新环境之外的所有环境中，此 Logo 都可以正常加载。在最新环境中，SVG Logo 无法在 Chrome 和 Safari 中加载，但在 Firefox 中加载正常。我无法找出根本原因，甚至无法从哪里开始寻找。

有问题的代码类似于此

<a href="/" id="logo" title="home"><img src="/images/logo.svg"></a>

在 Chrome 和 Safari 中，服务器返回 HTTP 200，但响应不包含任何数据。结果是损坏的图像图标。

我首先想到的是文件权限问题。我尝试了 chmod 777 和 chmod 644 以及 chown root 和 chown www-data。没有效果。

我的第二个想法是这是浏览器缓存问题。但是在 Chrome 和 Safari 中以隐身模式运行并清除浏览器的缓存没有任何效果。

更让我奇怪的是，如果我在 Safari 或 Chrome 中直接通过 https://ourhost/images/logo.svg 打开 SVG，那么响应是正确的。

该站点由 Apache2 上本地托管的 Wordpress 提供服务。

更新:作为Manivannan意识到，这与 jQuery 无关。我已经把它编辑掉了

Answer 1

这不是 jQuery 的问题。最好将 svg 转换为数据 URL 并通过 CSS 背景样式('logobg-svg')用于支持 svg 的浏览器，并使用 png/jpg 背景图像类('logobg')用于不支持 SVG 的浏览器。

HTML
----
SVG Supported browsers     : <i role=image class='logobg-svg' />
NON SVG Supported browsers : <i role=image class='logobg' />

CSS
---
.logobg-svg{
   background : url('data:image/svg+xml;utf8,<svg ... > ...')
}
.logobg{
   background : url('../image/logo.png')
}