在作为Background-Image提供时修改SVG填充颜色

Question

将SVG输出直接与页面代码一起放置我可以使用CSS简单地修改填充颜色,如下所示:

polygon.mystar {
    fill: blue;
}?

circle.mycircle {
    fill: green;
}

这很好用,但是我正在寻找一种方法来修改SVG的"填充"属性,当它被用作背景图像时.

html {      
    background-image: url(../img/bg.svg);
}

我现在该如何改变颜色？它甚至可能吗？

作为参考,这是我的外部SVG文件的内容:

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     width="320px" height="100px" viewBox="0 0 320 100" enable-background="new 0 0 320 100" xml:space="preserve">
<polygon class="mystar" fill="#3CB54A" points="134.973,14.204 143.295,31.066 161.903,33.77 148.438,46.896 151.617,65.43 134.973,56.679 
    118.329,65.43 121.507,46.896 108.042,33.77 126.65,31.066 "/>
<circle class="mycircle" fill="#ED1F24" cx="202.028" cy="58.342" r="12.26"/>
</svg>

Answer 1

我需要类似的东西,并希望坚持使用CSS.这里有LESS和SCSS mixins以及可以帮助你解决这个问题的简单CSS.不幸的是,它的浏览器支持有点松懈.有关浏览器支持的详细信息,请参阅

混合:

.element-color(@color) {
  background-image: url('data:image/svg+xml;utf8,<svg ...><g stroke="@{color}" ... /></g></svg>');
}

使用率较低:

.element-color(#fff);

SCSS mixin:

@mixin element-color($color) {
  background-image: url('data:image/svg+xml;utf8,<svg ...><g stroke="#{$color}" ... /></g></svg>');
}

SCSS用法:

@include element-color(#fff);

CSS:

// color: red
background-image: url('data:image/svg+xml;utf8,<svg ...><g stroke="red" ... /></g></svg>');

以下是有关将完整SVG代码嵌入CSS文件的更多信息.它还提到了浏览器兼容性,这对于一个可行的选择而言有点小.

Answer 2

一种方法是从服务器端机制服务你的svg.只需创建一个资源服务器端,根据GET参数输出您的svg,然后在某个URL上提供它.

然后你只需在你的CSS中使用该URL.

因为作为背景img,它不是DOM的一部分,你不能操纵它.另一种可能性是定期使用它,以正常方式将其嵌入页面中,但绝对定位,使其成为页面的全宽和高度,然后使用z-index css属性将其置于所有其他DOM元素之后在页面上.

Answer 3

您可以使用CSS掩码,使用'mask'属性,可以创建应用于元素的掩码.

.icon {
    background-color: red;
    -webkit-mask-image: url(icon.svg);
    mask-image: url(icon.svg);
}

有关更多信息,请参阅此文章:https://codepen.io/noahblon/post/coloring-svgs-in-css-background-images

Answer 4

另一种方法是使用面罩.然后,您可以更改蒙版元素的背景颜色.这与更改svg的fill属性具有相同的效果.

HTML:

<glyph class="star"/>
<glyph class="heart" />
<glyph class="heart" style="background-color: green"/>
<glyph class="heart" style="background-color: blue"/>

CSS:

glyph {
    display: inline-block;
    width:  24px;
    height: 24px;
}

glyph.star {
  -webkit-mask: url(star.svg) no-repeat 100% 100%;
  mask: url(star.svg) no-repeat 100% 100%;
  -webkit-mask-size: cover;
  mask-size: cover;
  background-color: yellow;
}

glyph.heart {
  -webkit-mask: url(heart.svg) no-repeat 100% 100%;
  mask: url(heart.svg) no-repeat 100% 100%;
  -webkit-mask-size: cover;
  mask-size: cover;
  background-color: red;
}

你会在这里找到一个完整的教程:http://codepen.io/noahblon/blog/coloring-svgs-in-css-background-images(不是我自己的).它提出了各种方法(不限于掩模).

Answer 5

使用棕褐色滤镜以及色调旋转、亮度和饱和度来创建我们想要的任何颜色。

.colorize-pink {
  filter: brightness(0.5) sepia(1) hue-rotate(-70deg) saturate(5);
}

https://css-tricks.com/solved-with-css-colorizing-svg-backgrounds/

Answer 6

这可能与萨斯!你唯一要做的就是对你的svg代码进行url编码.这可以通过Sass中的辅助函数实现.我为此制作了一个编码器.看这个:

http://codepen.io/philippkuehn/pen/zGEjxB

// choose a color

$icon-color: #F84830;


// functions to urlencode the svg string

@function str-replace($string, $search, $replace: '') {
  $index: str-index($string, $search);
  @if $index {
    @return str-slice($string, 1, $index - 1) + $replace + str-replace(str-slice($string, $index + str-length($search)), $search, $replace);
  }
  @return $string;
}

@function url-encode($string) {
  $map: (
    "%": "%25",
    "<": "%3C",
    ">": "%3E",
    " ": "%20",
    "!": "%21",
    "*": "%2A",
    "'": "%27",
    '"': "%22",
    "(": "%28",
    ")": "%29",
    ";": "%3B",
    ":": "%3A",
    "@": "%40",
    "&": "%26",
    "=": "%3D",
    "+": "%2B",
    "$": "%24",
    ",": "%2C",
    "/": "%2F",
    "?": "%3F",
    "#": "%23",
    "[": "%5B",
    "]": "%5D"
  );
  $new: $string;
  @each $search, $replace in $map {
    $new: str-replace($new, $search, $replace);
  }
  @return $new;
}

@function inline-svg($string) {
  @return url('data:image/svg+xml;utf8,#{url-encode($string)}');
}


// icon styles
// note the fill="' + $icon-color + '"

.icon {
  display: inline-block;
  width: 50px;
  height: 50px;
  background: inline-svg('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
   viewBox="0 0 30 30" enable-background="new 0 0 30 30" xml:space="preserve">
<path fill="' + $icon-color + '" d="M18.7,10.1c-0.6,0.7-1,1.6-0.9,2.6c0,0.7-0.6,0.8-0.9,0.3c-1.1-2.1-0.4-5.1,0.7-7.2c0.2-0.4,0-0.8-0.5-0.7
  c-5.8,0.8-9,6.4-6.4,12c0.1,0.3-0.2,0.6-0.5,0.5c-0.6-0.3-1.1-0.7-1.6-1.3c-0.2-0.3-0.4-0.5-0.6-0.8c-0.2-0.4-0.7-0.3-0.8,0.3
  c-0.5,2.5,0.3,5.3,2.1,7.1c4.4,4.5,13.9,1.7,13.4-5.1c-0.2-2.9-3.2-4.2-3.3-7.1C19.6,10,19.1,9.6,18.7,10.1z"/>
</svg>');
}

Answer 7

如果您尝试直接在 CSS 上使用 SVG，url()如下所示；

a:before {
  content: url('data:image/svg+xml; utf8, <svg xmlns="http://www.w3.org/2000/svg" x="0" y="0" viewBox="0 0 451 451"><path d="M345.441,2...

您应该将其编码#为%23，否则它将无法工作。

<svg fill="%23FFF" ...

Answer 8

下载您的svg作为文本.

使用javascript修改您的svg文本以更改绘画/笔触/填充颜色[s].

如上所述然后嵌入SVG修改字符串内嵌到你的CSS 这里.

Answer 9

现在您可以在客户端实现此目的:

var green = '3CB54A';
var red = 'ED1F24';
var svg = '<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"  width="320px" height="100px" viewBox="0 0 320 100" enable-background="new 0 0 320 100" xml:space="preserve"> <polygon class="mystar" fill="#'+green+'" points="134.973,14.204 143.295,31.066 161.903,33.77 148.438,46.896 151.617,65.43 134.973,56.679 118.329,65.43 121.507,46.896 108.042,33.77 126.65,31.066 "/><circle class="mycircle" fill="#'+red+'" cx="202.028" cy="58.342" r="12.26"/></svg>';      
var encoded = window.btoa(svg);
document.body.style.background = "url(data:image/svg+xml;base64,"+encoded+")";

小提琴!

Answer 10

 .icon { 
  width: 48px;
  height: 48px;
  display: inline-block;
  background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/18515/heart.svg) no-repeat 50% 50%; 
  background-size: cover;
}

.icon-orange { 
  -webkit-filter: hue-rotate(40deg) saturate(0.5) brightness(390%) saturate(4); 
  filter: hue-rotate(40deg) saturate(0.5) brightness(390%) saturate(4); 
}

.icon-yellow {
  -webkit-filter: hue-rotate(70deg) saturate(100);
  filter: hue-rotate(70deg) saturate(100);
}

Codeben文章和演示

Answer 11

由于尽管年龄很大，但谷歌上仍然出现了这个问题，所以在查看了这里的选项后，我想我不妨给出一个我在 2022 年遥远的未来使用的解决方案。

这实际上只是之前的掩模解决方案，但是在伪元素上。

.icon {
    height: 1.5rem;
    width: 1.5rem;
}
.icon::before {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: contain;
    mask-image: url("path/to/svg/icon.svg");
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: contain;
    -webkit-mask-image: url("path/to/svg/icon.svg");
}

这适用于当今所有主要浏览器，尽管显然您不能使用它来获得具有多种颜色的 SVG。如果网站不允许您内联注入它们，或者您不喜欢做字体图标等，这就是业务成本。

Answer 12

您可以将SVG存储在变量中.然后根据您的需要(即设置宽度,高度,颜色等)操纵SVG字符串.然后使用结果设置背景,例如

$circle-icon-svg: '<svg xmlns="http://www.w3.org/2000/svg"><circle cx="10" cy="10" r="10" /></svg>';

$icon-color: #f00;
$icon-color-hover: #00f;

@function str-replace($string, $search, $replace: '') {
    $index: str-index($string, $search);

    @if $index {
        @return str-slice($string, 1, $index - 1) + $replace + str-replace(str-slice($string, $index + str-length($search)), $search, $replace);
    }

    @return $string;
}

@function svg-fill ($svg, $color) {
  @return str-replace($svg, '<svg', '<svg fill="#{$color}"');
}

@function svg-size ($svg, $width, $height) {
  $svg: str-replace($svg, '<svg', '<svg width="#{$width}"');
  $svg: str-replace($svg, '<svg', '<svg height="#{$height}"');

  @return $svg;
}

.icon {
  $icon-svg: svg-size($circle-icon-svg, 20, 20);

  width: 20px; height: 20px; background: url('data:image/svg+xml;utf8,#{svg-fill($icon-svg, $icon-color)}');

  &:hover {
    background: url('data:image/svg+xml;utf8,#{svg-fill($icon-svg, $icon-color-hover)}');
  }
}

我也做了一个演示,http://sassmeister.com/gist/4cf0265c5d0143a9e734.

此代码对SVG做了一些假设,例如,该<svg />元素没有现有的填充颜色,并且既没有设置宽度或高度属性.由于输入在SCSS文档中是硬编码的,因此很容易实施这些约束.

不要担心代码重复.gzip压缩使差异可以忽略不计.

Answer 13

您可以使用亮度滤镜，任何大于 1 的值都会使元素更亮，任何小于 1 的值都会使其更暗。因此，我们可以使那些亮的 SVG\xe2\x80\x99s 变暗，反之亦然，例如，这将使 svg 变暗：

\n

filter: brightness(0);\n

\n

为了改变颜色而不仅仅是亮度级别，我们可以使用棕褐色滤镜以及色调旋转、亮度，例如：

\n

.colorize-blue {\n  filter: brightness(0.5) sepia(1) hue-rotate(140deg) saturate(6);\n}\n

\n

Answer 14

如果您想以简单的方式从白色切换为黑色或类似的方式，请尝试以下操作：

filter: invert(100%);