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

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

Answer 2

您可以使用SVG和CSS掩码重新创建此效果，然后使用普通CSS设置SVG内部的样式，甚至background-image < / p>

-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 Test - 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-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的{{1}}部分。

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

Answer 4

通过单独的CSS类对SVG进行样式设置对我来说不起作用，但是内联样式却可以：

&::after {
      content: url("data:image/svg+xml;charset=UTF-8, <svg viewBox='0 0 14 24' xmlns='http://www.w3.org/2000/svg' width='12px' height='18px'><path fill='rgb(13, 132, 254)' d='M2.1.1L0 2.2l8.3 8.3L9.8 12l-1.5 1.5L0 21.8l2.1 2.1L14 12z' /></svg>");
    }

注意：即使将fill道具指定为十六进制颜色也不起作用，即使在“正常” SVG中也是如此，这就是为什么我将其转换为RGB并对其进行样式设置的原因。

Answer 5

阅读所有这些答案，使我想到了一种很好的方式来处理SASS（.scss）中的SVG，该方式可以编译CSS，以实现我的样式主题，并使color正常工作。对于我的用例，我想（需要）使用content: url(..svg)，因为我的库支持通过在伪content: $my-icon;中使用:before来支持Font和现在的SVG，这是唯一可以同时使用两种Font / SVG。

首先是创建一个SASS函数来处理urlencode的颜色（由于content: url()需要被编码，#需要变成%23）。作为参考，我从其他人Gist复制了此函数。例如，这将使用#fafafa并返回%23fafafa，然后我可以在SVG的fill中使用它。您也可以不用它，只记得在#属性中将%23更改为fill。

/* sass-utilities.scss */
@function encodecolor($string) {
    @if type-of($string) == 'color' {
        $hex: str-slice(ie-hex-str($string), 4);
        $string:unquote("#{$hex}");
    }
    $string: '%23' + $string;
    @return $string;
}

我的库中有一些为主题样式定义的SASS变量，因此这就是我同时使用Font和/或SVG的方式（我添加了width和display，但也可能没有用）。

.sort-indicator-desc:before {
    content: $icon-sort-desc;
    display: inline-block;
    width: $icon-sort-font-size;    
    font-size: $icon-sort-font-size;
}

最后，最终用户仍然可以将其与Font Family（例如Font Awesome 4）一起使用

/* with a Font */
$icon-font-family:     "FontAwesome"; //  Font Awesome 4 
$icon-sort-color:      #0070d2;
$icon-sort-font-size:  13px;
$icon-sort-asc:        "\f0d8";       // unicode value of the icon
$icon-sort-desc:       "\f0d7";
// this compiles to => `content: "\f0d8";

或使用SVG（例如Font Awesome 5）

@import './sass-utilities'; // sass helper

/* with SVG */
$icon-sort-color:     #0070d2;
$icon-sort-font-size: 13px;
$icon-sort-asc:       url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="#{encodecolor($icon-sort-color)}" viewBox="0 0 24 24" id="arrowdown"><path d="M19.1 9.7c.4-.4.4-.9 0-1.3l-6.9-6.7c-.4-.4-.9-.4-1.3 0L4 8.4c-.4.4-.4.9 0 1.3l1.3 1.2c.3.4.9.4 1.3 0l2.1-2.1c.4-.4 1-.1 1 .4v12.5c0 .5.5.9 1 .9h1.8c.5 0 .9-.5.9-.9V9.2c0-.5.7-.8 1-.4l2.2 2.1c.4.4.9.4 1.3 0l1.2-1.2z"></path></svg>');
$icon-sort-desc:      url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="#{encodecolor($icon-sort-color)}" viewBox="0 0 24 24" id="arrowdown"><path d="M4.4 14.3c-.3.4-.3.9 0 1.3l7 6.7c.3.4.9.4 1.2 0l7-6.7c.4-.4.4-.9 0-1.3l-1.3-1.2c-.3-.4-.9-.4-1.3 0l-2.1 2.1c-.4.4-1.1.1-1.1-.4V2.3c0-.5-.4-.9-.9-.9h-1.8c-.5 0-.9.5-.9.9v12.5c0 .5-.7.8-1.1.4L7 13.1c-.4-.4-1-.4-1.3 0l-1.3 1.2z"></path></svg>');
// this compiles to => `content: url('data:image/svg+xml,<svg>...');

因此，最后，我使Font和SVG都使用了SASS变量，这很棒，因为这意味着我lib（Angular-Slickgrid）的任何用户仍可以使用Font Awesome 4图标（font），而其他人也可以使用SVG（例如Font Awesome 5），而不必安装字体库（.eof，.woff，...），具体取决于lib。最终结果仍然是带有content的已编译CSS文件，用于为SVG加载SVG颜色的额外fill属性。

瞧瞧！！！我两全其美：）

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

5 个答案: