当用作背景图像时，我的SVG图像忽略其样式表

Question

我有一个SVG图标，我使用CSS设置样式。使用<link>标记从SVG文件本身加载CSS。

当我使用该SVG作为背景图像虽然在直接访问所述SVG时没有应用样式，但它可以正常工作。

这是example

知道什么是错的吗？

Answer 1

这就是SVG在用作图像时的工作原理。数据必须在单个文件中完成，以保护用户的隐私。

你需要的心智模型是它能够以与光栅图像类似的方式工作和行动，它们也是单个文件。

您仍然可以使用<link>代码，但您必须在svg文件中将数据编码为data URI。