如何修改SVG图像作为背景图像时的填充颜色?

将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>

当前回答

你可以使用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

2017-10-24 07:49:48

其他回答

您可以使用亮度过滤器，任何大于1的值使元素更亮，任何小于1的值使元素更暗。因此，我们可以将这些浅色SVG设为深色，反之亦然，例如，这将使SVG变暗:

filter: brightness(0);

为了改变颜色和亮度级别，我们可以使用暗色滤镜和色调旋转，亮度，例如:

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

2021-06-07 09:08:12

但是，如果您能够直接编辑SVG代码，那么我能够为SVG多边形添加填充颜色，例如下面的SVG呈现红色，而不是默认的黑色。不过我还没有在Chrome之外测试过:

<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="500px" height="500px" viewBox="0 0 500 500" enable-background="new 0 0 500 500" xml:space="preserve">
    <polygon 


        fill="red"


        fill-rule="evenodd" clip-rule="evenodd" points="452.5,233.85 452.5,264.55 110.15,264.2 250.05,390.3 229.3,413.35 
47.5,250.7 229.3,86.7 250.05,109.75 112.5,233.5 "/>
</svg>

2015-04-09 00:29:05

我需要一些类似的东西，并想坚持使用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 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文件中的信息。它还提到浏览器兼容性有点太小，这是一个可行的选择。

2015-01-07 19:25:28

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

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

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

2020-02-11 11:09:48

很多if，但如果你的前base64编码SVG开始:

<svg fill="#000000

然后base64编码的字符串将开始:

PHN2ZyBmaWxsPSIjMDAwMDAw

如果预先编码的字符串开始:

<svg fill="#bfa76e

然后编码为:

PHN2ZyBmaWxsPSIjYmZhNzZl

两个编码字符串的开头相同:

PHN2ZyBmaWxsPSIj

base64编码的怪癖是每3个输入字符变成4个输出字符。有了这样的SVG, 6个字符的十六进制填充颜色就恰好开始于编码块的“边界”。因此，你可以轻松地做一个跨浏览器的JS替换:

output = input.replace(/MDAwMDAw/, "YmZhNzZl");

但是tnt火箭的答案是前进的方向。

2016-02-17 11:52:53

如何修改SVG图像作为背景图像时的填充颜色?

推荐文章

最新文章

标签