通过使用引用在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

这是more complete codepen。

Answer 1

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

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