指定 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

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

Answer 2

实际上，对于那些可以在生产中使用预处理器的人来说，通过“内联”背景 SVG 和一些 SASS mixins（“切片”整个 svg 乱码）来获得访问权限是可能的。到您想要通过 SASS 变量操作的部分。

在您最初的场景中，您有一个元素

，

因此您需要一个 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 变量是您的 内容，不包括

这只需包含在内部传递的值中即可：
@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 映射 传递给我的 mixin，其中 css 样式定义为 key、value 对，将整堆 css 样式注入到 svg 的

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

Answer 3

您可以使用 SVG 和 CSS 遮罩重新创建此效果，然后使用普通 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 对其进行样式化来使用它来创建阴影-索引并设置不透明度。

希望有帮助！

编辑：链接

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

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) 因为我的库支持 Font，现在通过使用 content: $my-icon; 支持 Font > 在伪 :before 中，这是唯一适用于 Font/SVG 的东西。

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

/* 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>...');

使用。 SVG 使用 SASS 变量，这很棒，因为这意味着我的库的任何用户 (Angular-Slickgrid）仍然可以使用 Font Awesome 4 图标（字体），而其他人也可以使用 SVG（如 Font Awesome 5），而无需安装 Font Family (.eof, .woff, ...) 往往会很大，具体取决于库。最终结果仍然是一个编译后的 CSS 文件，其中包含用于加载 SVG 的 content 以及 SVG 颜色的额外 fill 属性。

瞧！我得到了两者最好的:)