如何修改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>

当前回答

由于这是谷歌上的问题，尽管年龄很大，我想我不妨在看了这里的选项后，给出一个我在遥远的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。如果站点不允许你内联插入它们，或者你不喜欢字体图标等等，这就是商业成本。

2022-09-30 12:36:35

其他回答

实现这一点的一种方法是从某种服务器端机制提供svg。只需创建一个资源服务器端，根据GET参数输出svg，并在某个url上提供它。

然后在css中使用这个url。

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

2012-11-13 20:06:13

对于单色背景，您可以使用带有掩码的SVG，其中应该显示背景颜色

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" preserveAspectRatio="xMidYMid meet" focusable="false" style="pointer-events: none; display: block; width: 100%; height: 100%;" >
    <defs>
        <mask id="Mask">
            <rect width="100%" height="100%" fill="#fff" />
            <polyline stroke-width="2.5" stroke="black" stroke-linecap="square" fill="none" transform="translate(10.373882, 8.762969) rotate(-315.000000) translate(-10.373882, -8.762969) " points="7.99893906 13.9878427 12.7488243 13.9878427 12.7488243 3.53809523"></polyline>
        </mask>
    </defs>
    <rect x="0" y="0" width="20" height="20" fill="white" mask="url(#Mask)" />
</svg>

然后使用这个CSS

background-repeat: no-repeat;
background-position: center center;
background-size: contain;
background-image: url(your/path/to.svg);
background-color: var(--color);

2019-08-07 15:21:55

您可以使用亮度过滤器，任何大于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直接在CSS与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" ...

2021-08-15 01:05:03

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

.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

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

推荐文章

最新文章

标签