当用作背景图片时，我的SVG图片忽略它的样式表 [英] My SVG image ignores it's stylesheet when used as background image

问题描述

我有一个SVG图标，我风格使用CSS。 CSS使用< link> 标签从SVG文件本身加载。

I'm having an SVG icon that I style using CSS. The CSS is loaded from whithin the SVG file itself using a <link> tag.

SVG作为背景图片，虽然在访问所述SVG时没有应用样式，但它工作正常。

When I use that SVG as a background image though no styles are applied while visiting said SVG directly, it works fine.

这里是示例

Here is an example

有什么想法？ p>

Any ideas of what's wrong?

推荐答案

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

That's how SVG works when used as an image. The data must be complete in a single file in order to protect user's privacy.

你需要的心理模型是，它将工作，并以类似的方式对光栅图像，它们是单个文件。

The mental model you need is that it's going to work and act in a similar way to a raster image, they are single files too.

您仍然可以使用< link> 标记错误，您必须将数据编码为数据URI 。

You can still use a <link> tag bug you'd have to encode the data as a data URI within the svg file itself.

这篇关于当用作背景图片时，我的SVG图片忽略它的样式表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！