使用 CSS 修改 SVG 作为背景图像

Question

我想知道在使用它们时是否有办法通过 CSS 访问 SVG：

.logo {
...
  background-image: url("../VectorImages/logo.svg");
}

我发现了一些有助于将 svg 转换为内联 SVG 的脚本，这使得它们可以被 CSS 访问。试过了，它适用于 img-Tags，但是当使用 SVG 作为 div 的背景图像时，这些解决方案都不起作用。

我正在尝试更改 SVG 的颜色，所以我想要做的是

svg path { fill: #000; }

Answer 1

如果您使用的是 SCSS——我已经制作了一个 mixin 来处理 SVG 编码

笔：http://codepen.io/jakob-e/pen/doMoML/

SCSS：http://codepen.io/jakob-e/pen/GjgXmK.scss

$color-1: red;
$color-2: green;

$svg-1: '<svg viewBox="0 0 2 2"><circle fill="#{$color-1}" cx="1" cy="1" r="1"/></svg>';
$svg-2: '<svg viewBox="0 0 2 2"><circle fill="#{$color-2}" cx="1" cy="1" r="1"/></svg>';

.class-1 { @include background-svg($svg-1); } 
.class-2 { @include background-svg($svg-2); } 

Answer 2

您可以使用 data URI 将 SVG 导入 CSS。

HTML

<img src='data:image/svg+xml;utf8,<svg ... > ... </svg>'>

CSS

.logo {
    background: url('data:image/svg+xml;utf8,<svg ...> ... </svg>');
}

使用此方法将允许您使用fill 为SVG 着色，同时将其用作background。

注意：有关在 CSS 中使用 data URI 实现 SVG 的更多信息，请参阅 this article。