指定一个SVG作为背景图像，并在CSS样式SVG？

是否有可能指定一个SVG作为背景图像，并在同一个CSS文件中样式SVG？

我很舒服的放置，缩放和裁剪SVG图像，无论是单个文件还是精灵，但是我一直无法弄清楚是否可以在相同的CSS文件中设置SVG作为背景图像。

在伪CSS我想要做以下改变基于父元素的类的简单形状的颜色：

element1 { background-image(icon.svg); } element1.black .svg-pathclass { fill: #000000; } element1.white .svg-pathclass { fill: #ffffff; } 

显然这假定在SVG中有一个类为.svg-pathclass的path

这可能吗？

Answer 1

不，这是不可能的。 SVG必须在一个文档（可能是一个数据URI或一个外部引用的文件）中准备好， 然后用作另一个文件的背景。

Answer 2

您可以使用SVG和CSS蒙版重新创build这个效果，然后使用普通的CSS来设置SVG的内部，甚至background-image

 -webkit-mask: url(filename.svg) 50% 50% / 100px 50px no-repeat; -o-mask: url(filename.svg) 50% 50% / 100px 50px no-repeat; -ms-mask: url(filename.svg) 50% 50% / 100px 50px no-repeat; background-color: red; background-image: url(animated.gif); /* Filename, Position / Size, Repeat */ /* Modernizr.cssmask is the test needed to pass - snippet below */ 

你可以使用这个来创build阴影，方法是在DOM附加一个element ，然后使用较低的z-index和设置不透明度。

希望有所帮助！

编辑：链接

• Modernizrtesting – http://pastebin.com/w4eVbEKr
• 更多信息 – https://www.webkit.org/blog/181/css-masks/

Answer 3

实际上，对于那些可以在生产中使用预处理器的人来说，通过“内联”SVG背景和一些SASS mixins来“分割”整个svg乱码，可以访问想要通过SASS variables操作的部分。

在你原来的场景中，你有一个元素
<div class="element1"></div> ，

所以你需要一个mixin/function来为你提供内联的SVG。 假设你想控制fill ，所以：

 @mixin inline-svg($color, $svg-content) { $start: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><style>path { fill:#{$color}; }</style>'; $end: '</svg>'; background-image: url('data:image/svg+xml;utf8, #{$start}#{$svg-content}#{$end}'); } 

其中$svg-contentvariables是你的<svg>东西，不包括<style>元素（你想从mixin访问）和包装svg标签，即： $svg-content = "<path .... />"

这只需要包含在里面传递的值：
@include inline-svg(salmon, $svg-content);

综上所述，这是SASS代码的一个例子：

 $svg-content = "<path .... />" @mixin inline-svg($color, $svg-content) { $start: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><style>path { fill:#{$color}; }</style>'; $end: '</svg>'; background-image: url('data:image/svg+xml;utf8, #{$start}#{$svg-content}#{$end}'); } .element1 { @include inline-svg(rgba(0,0,0,0.6), $svg-content); } 

我认为这里的可能性相当大（这种方法在这里也有限制）。 实际上，我将一个SASS map传递给我的mixin并将css样式定义为key ， value pair，以将大量的css样式注入到svg的<style>部分。

所以这在技术上是可行的，但是需要更多的强制性，但是一旦你完成了这个任务，你将在整个项目中重用这个mixin ，这很酷。