CSS 如果 SVG 通过 <img> 标记嵌入到 HTML 中，则 Firefox 上的 SVG 中的@import 未解决

Question

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

<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 的规则被导入并被接受 OK。但是如果我像这样通过 img 标签将这个 SVG 嵌入到 HTML 页面中：

<img src="delete.svg"/>

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

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

Answer 1

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

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

CSS 如果 SVG 通过 <img> 标记嵌入到 HTML 中，则 Firefox 上的 SVG 中的@import 未解决

CSS @import not Resolved in SVG on Firefox if SVG is Embedded in HTML Via <img> Tag

html

css

firefox

svg

microsoft-edge