Firefox 将 SVG 显示为黑色

Question

我最近将网站从一台服务器移动到另一台服务器。内容没有改变，只是基本 URL 改变。

现在 Firefox 在新服务器上将 SVG 图像显示为黑色。即使我直接打开图像（没有周围的 HTML，没有 CSS，纯 SVG），也会发生这种情况。

唯一的区别是：旧服务器是使用 gzipped 编码的 HTTP/1.1 的 apache2，新服务器是使用 HTTPS、HTTP Basic Auth 和使用 br 编码的 HTTP/2 的 nginx。

然而，客户端收到的结果图像是相同的。当我将新服务器上的图像保存到本地硬盘上并在 FF 中打开时，它可以正确显示。

我无法发布图像链接，因为它们位于专用网络中，但这里有 SVG 和屏幕截图（青色背景来自网站）：

<?xml version="1.0" encoding="UTF-8"?>
<!-- Generator: Adobe Illustrator 26.2.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Ebene_1" x="0px" y="0px" viewBox="0 0 64 58" style="enable-background:new 0 0 64 58;" xml:space="preserve">
<style type="text/css">
    .st0{fill:#FFFFFF;}
    .st1{fill:none;stroke:#FFFFFF;stroke-width:3.042;stroke-linejoin:round;}
</style>
<path class="st0" d="M46.72,24.29h4.56c1.52,0,3.49,0.8,3.49,2.6c0,2.11-2.06,2.48-3.56,2.48h-4.49V24.29z M46.72,17.46h4.49  c1.87,0,3.14,0.63,3.14,2.46c0,1.17-1.15,2.15-3.06,2.15h-4.56V17.46z M51.22,31.61c3.16,0,6.06-0.82,6.06-4.63  c0-1.33-0.89-3.3-2.81-3.79c1.54-0.7,2.29-1.9,2.29-3.3c0-3.37-2.46-4.66-5.55-4.66h-8.84v2.22h1.92v11.89h-1.96v2.27H51.22z   M37.81,23.49c-0.02,2.99-1.73,6.15-5.85,6.15c-4.1,0-5.94-3.02-5.92-6.15c0-3.49,2.06-6.32,5.94-6.32  C36.03,17.24,37.83,20.4,37.81,23.49 M31.98,14.93c-5.01,0-8.42,3.58-8.42,8.56c0,4.3,2.69,8.47,8.38,8.47  c5.66,0,8.31-4.21,8.33-8.47C40.29,19.14,37.53,14.97,31.98,14.93 M12.86,17.48h5.08v7.39c0,2.81-1.5,4.73-4.38,4.73  c-2.83,0-4-1.68-4-4.59H7.08c0,4.31,2.48,6.9,6.48,6.9c4.28,0,6.9-2.88,6.81-7.04v-9.64h-7.51V17.48z"></path>
<path class="st1" d="M15.85,45.44h4.04h34.99c4.23,0,7.65-3.43,7.65-7.65V9.61c0-4.23-3.43-7.65-7.65-7.65H9.48  c-4.23,0-7.65,3.43-7.65,7.65v18.26v9.92v18.91L15.85,45.44z"></path>
</svg>

正确：

错误：

我使用的是 FF 101.0.1。它在 Chrome、Opera 和 Edge 上正确显示。

我有多个 SVG 图像暴露了这个问题。

我的问题是：我可以在图像、HTML 或其他地方做一些事情来强制 FF 正确显示图像吗？

更新：

旧（正确）图像的 HTTP 响应标头：

HTTP/1.1 200 OK
Date: Mon, 27 Jun 2022 12:47:45 GMT
Server: Apache/2.4.48 (Debian)
Last-Modified: Thu, 02 Jun 2022 09:58:24 GMT
Accept-Ranges: bytes
Vary: Accept-Encoding
Content-Encoding: gzip
Content-Length: 832
Keep-Alive: timeout=5, max=100
Connection: Keep-Alive
Content-Type: image/svg+xml

来自新（错误）服务器的 HTTP 响应标头：

HTTP/2 200 OK
server: nginx
date: Mon, 27 Jun 2022 12:48:08 GMT
content-type: image/svg+xml
last-modified: Fri, 24 Jun 2022 13:43:36 GMT
etag: W/"62b5bf88-59b"
content-security-policy: default-src 'self'; script-src 'none'; style-src 'none'; object-src 'none';
content-encoding: br
X-Firefox-Spdy: h2

Answer 1

content-security-policy: style-src 'none';

正在阻止所有样式源，包括内联源，例如

<style>

元素。您需要设置值

'unsafe-inline'

。

Answer 2

我不明白如何使用@ccprog答案，所以， 就我而言，我将所有 css 内部规则从样式标签移至路径并解决了问题

<?xml version="1.0" encoding="UTF-8"?>
<!-- Generator: Adobe Illustrator 26.2.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Ebene_1" x="0px" y="0px" viewBox="0 0 64 58" xml:space="preserve">
<path fill="#FFFFFF" d="M46.72,24.29h4.56c1.52,0,3.49,0.8,3.49,2.6c0,2.11-2.06,2.48-3.56,2.48h-4.49V24.29z M46.72,17.46h4.49  c1.87,0,3.14,0.63,3.14,2.46c0,1.17-1.15,2.15-3.06,2.15h-4.56V17.46z M51.22,31.61c3.16,0,6.06-0.82,6.06-4.63  c0-1.33-0.89-3.3-2.81-3.79c1.54-0.7,2.29-1.9,2.29-3.3c0-3.37-2.46-4.66-5.55-4.66h-8.84v2.22h1.92v11.89h-1.96v2.27H51.22z   M37.81,23.49c-0.02,2.99-1.73,6.15-5.85,6.15c-4.1,0-5.94-3.02-5.92-6.15c0-3.49,2.06-6.32,5.94-6.32  C36.03,17.24,37.83,20.4,37.81,23.49 M31.98,14.93c-5.01,0-8.42,3.58-8.42,8.56c0,4.3,2.69,8.47,8.38,8.47  c5.66,0,8.31-4.21,8.33-8.47C40.29,19.14,37.53,14.97,31.98,14.93 M12.86,17.48h5.08v7.39c0,2.81-1.5,4.73-4.38,4.73  c-2.83,0-4-1.68-4-4.59H7.08c0,4.31,2.48,6.9,6.48,6.9c4.28,0,6.9-2.88,6.81-7.04v-9.64h-7.51V17.48z"></path>
<path fill="none" stroke="#FFFFFF" stroke-width="3.042" stroke-linejoin="round" d="M15.85,45.44h4.04h34.99c4.23,0,7.65-3.43,7.65-7.65V9.61c0-4.23-3.43-7.65-7.65-7.65H9.48  c-4.23,0-7.65,3.43-7.65,7.65v18.26v9.92v18.91L15.85,45.44z"></path>
</svg>