我的 SVG 图像在用作背景图像时会忽略其样式表 [英] My SVG image ignores its stylesheet when used as background image

问题描述

我有一个使用 CSS 设置样式的 SVG 图标.使用 标签从 SVG 文件本身加载 CSS.

I'm have an SVG icon that I style using CSS. The CSS is loaded from within 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.

这是一个示例

知道出了什么问题吗?

推荐答案

这就是 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.

您仍然可以使用 标签，但您必须将数据编码为 svg 文件本身中的数据 URI.

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

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