时间戳

首页 > 解决方案 > 如果 SVG 通过标记嵌入 HTML 中，则 CSS @import 无法在 Firefox 上的 SVG 中解析

html - 如果 SVG 通过标记嵌入 HTML 中，则 CSS @import 无法在 Firefox 上的 SVG 中解析

问题描述

<img>关于通过标签嵌入 HTML 的 SVG 内容，我在 Firefox (78.5.0esr) 上遇到了奇怪的行为。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 上。我在这里错过了什么吗？是否有防止加载二级链接内容的安全设置？

标签： htmlcsssvgfirefoxmicrosoft-edge

解决方案

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

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

推荐阅读