指定一个SVG作为背景图像,并在CSS中设置SVG样式？

Question

是否可以将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的路径

这可能吗？

Answer 1

不,这是不可能的.必须在一个文档(可能是数据URI或外部引用的文件)中准备SVG ,然后将其用作另一个文件的背景.

Answer 2

您可以使用SVG和CSS掩码重新创建此效果,然后使用normal 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 */

您可以使用此通过附加的创造阴影element的DOM和造型,与较低的z-index和设置不透明度.

希望有所帮助!

编辑:链接

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

Answer 3

实际上,那些可以在生产中使用预处理器的人,通过"内联"背景SVG,以及mixins"切片"整个svg乱码的SASS位来访问您想要操作的部件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-content变量是你的<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对,注入一大堆css风格的<style>一部分svg.

所以它在技术上是可行的,但需要更多的复杂性,但是一旦你完成这项工作,你将获得mixin在整个项目中重复使用它的好处,这很酷.