如果 SVG 通过 <img> 标签嵌入 HTML，则 CSS @import 无法在 Firefox 上的 SVG 中解析答案

【问题标题】：CSS @import not Resolved in SVG on Firefox if SVG is Embedded in HTML Via <img> Tag如果 SVG 通过 <img> 标签嵌入 HTML，则 CSS @import 无法在 Firefox 上的 SVG 中解析
【发布时间】：2021-03-07 02:44:37
【问题描述】：

我在 Firefox (78.5.0esr) 上遇到了关于通过 <img> 标签嵌入到 HTML 中的 SVG 内容的奇怪行为。 SVG 包含通过 CSS "@import" 指令对外部样式表的引用，如下所示：

<svg xmlns="http://www.w3.org/2000/svg" viewBox="-64 -64 128 128">
    <defs>
        <style type="text/css"><![CDATA[
            @import url('../css/rds.css');
            path {
                stroke: var(--error-color);
            }
        ]]></style>
    </defs>
    <path d="M -48 -48 L 48 48 M -48 48 L 48 -48"/>
</svg>

现在，如果我直接在 Firefox 中打开这个 SVG，一切似乎都正常，rds.css 中的规则被导入并被接受了。但是，如果我通过 img 标签将这个 SVG 嵌入到 HTML 页面中，如下所示：

<img src="delete.svg"/>

SVG 本身似乎已正确加载到页面中，但 SVG 的 CSS 中的 @import 似乎已被忽略。如果我删除“@import”指令并将 CSS 代码直接放入 SVG，它在所有上下文中都可以正常渲染。

有趣的是，同样的情况似乎也发生在 MS Edge 上。我在这里错过了什么吗？是否有防止加载二级链接内容的安全设置？

【问题讨论】：

标签： html css svg firefox microsoft-edge

【解决方案1】：

<img> 文件出于隐私原因必须完全独立，即它们不能引用任何外部文件。

如果你想让它工作，你必须在文件本身中包含所有内联样式，因为@import 在图像上下文中不起作用。

【讨论】：