css - 通过使用参考在 CSS 中嵌入 SVG

Question

我正在尝试通过 CSS 中的自动生成元素重用内联 SVG，但它没有按预期工作。

这是 SVG：

<svg><use xlink:href="#arrow"/></svg>

在 base64 编码成这个 CSS 之后：

#icon:after {
    content: '';
    display: block;
    width: 100px;
    height: 100px;
    border: 1px solid #000;
    background-image: url(data:image/svg+xml;base64,PHN2Zz48dXNlIHhsaW5rOmhyZWY9IiNhcnJvdyIvPjwvc3ZnPg==);
}

它无法显示 SVG

这是一个更完整的 codepen。

Answer 1

当在图像上下文中使用 SVG 时，无论是通过<img>还是在这种情况下通过 CSS 背景图像，它都必须在单个文档中完成。不允许在文档之外引用。

因此，#arrow 必须指向该 base64 编码的 SVG 文档中带有 id 箭头的元素。