指定 SVG 作为背景图像并在 CSS 中设置 SVG 样式? [英] Specify an SVG as a background image and ALSO style the SVG in CSS?

问题描述

是否可以将 SVG 指定为背景图像并在同一个 CSS 文件中为 SVG 设置样式?

Is it possible to specify an SVG as a background image and ALSO style the SVG in the same CSS file?

我很乐意将 SVG 图像作为单个文件或精灵放置、缩放和裁剪，但我无法确定是否可以在将其设置为背景的同一 CSS 文件中设置 SVG 的样式图片.

I'm very comfortable placing, scaling and clipping SVG images as either single files or sprites, but I haven't been able to work out if it possible to style the SVG within the same CSS file as sets it as a background image.

在伪 CSS 中，我想根据父元素的类来改变简单形状的颜色:

In pseudo CSS i'd like to do the following to vary the colour of simple shape based on the class of the parent element:

element1 {
 background-image(icon.svg);
}

element1.black .svg-pathclass {
 fill: #000000;
}

element1.white .svg-pathclass {
 fill: #ffffff;
}

显然，这假定 SVG 中的路径具有类 .svg-pathclass

obviously this assumes a path in the SVG having class .svg-pathclass

这可能吗?

推荐答案

不，这是不可能的.SVG 必须准备在一个文档中(可以是 data URI 或外部引用的文件) 和 then 在另一个文件中用作背景.

No, this is not possible. The SVG has to be prepared in one document (which may be a data URI or an externally referenced file) and then used as a background in another file.

这篇关于指定 SVG 作为背景图像并在 CSS 中设置 SVG 样式?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！