通过使用参考将 SVG 嵌入 CSS

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

这里是 more complete codepen。

Answer 1

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

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

通过使用参考将 SVG 嵌入 CSS

Embedding SVG in CSS via use reference

css

svg

inline-svg