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

当前回答

在某些(非常特定的)情况下，这可以通过使用过滤器来实现。例如，您可以通过使用过滤器将色调旋转45度将蓝色SVG图像更改为紫色:hue-rotate(45deg);。浏览器支持很少，但它仍然是一项有趣的技术。

Demo

2016-05-11 13:59:28

其他回答

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

还有一种方法是使用蒙版。然后更改蒙面元素的背景颜色。这与更改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(不是我自己的)。它提出了多种方法(不限于掩码)。

2015-08-03 23:28:05

SCSS创建函数

@function url-svg($icon) {
  @return url("data:image/svg+xml;utf8,#{str-replace($icon, "#", "%23")}");
}

scss使用

url-svg('<svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M13.125 0H1.875C0.84082 0 0 0.84082 0 1.875V10.3125C0 11.3467 0.84082 12.1875 1.875 12.1875H4.6875V14.6484C4.6875 14.9355 5.01563 15.1025 5.24707 14.9326L8.90625 12.1875H13.125C14.1592 12.1875 15 11.3467 15 10.3125V1.875C15 0.84082 14.1592 0 13.125 0Z" fill="#8A8A8F"/></svg>')

css生成

url('data:image/svg+xml;utf8,<svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M13.125 0H1.875C0.84082 0 0 0.84082 0 1.875V10.3125C0 11.3467 0.84082 12.1875 1.875 12.1875H4.6875V14.6484C4.6875 14.9355 5.01563 15.1025 5.24707 14.9326L8.90625 12.1875H13.125C14.1592 12.1875 15 11.3467 15 10.3125V1.875C15 0.84082 14.1592 0 13.125 0Z" fill="%238A8A8F"/></svg>')

str-replace函数从bootstrap开始使用。

2021-10-21 07:33:02

您可以使用亮度过滤器，任何大于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与PHP和传递查询字符串来设置颜色。

SVG，这里叫做arrow。php

<?php
$fill = filter_input(INPUT_GET, 'fill');
$fill = strtolower($fill);
$fill = preg_replace("/[^a-z0-9]/", '', $fill);
if(empty($fill)) $fill = "000000";
header('Content-type: image/svg+xml');
echo '<?xml version="1.0" encoding="utf-8"?>';
?>
<svg xmlns="http://www.w3.org/2000/svg" width="7.4" height="12" viewBox="0 0 7.4 12">
    <g>
        <path d="M8.6,7.4,10,6l6,6-6,6L8.6,16.6,13.2,12Z" transform="translate(-8.6 -6)" fill="#<?php echo htmlspecialchars($fill); ?>" fill-rule="evenodd"/>
    </g>
</svg>

然后像这样调用图像

.cssclass{ background-image: url(arrow.php?fill=112233); }

仅适用于PHP。记住，每次你改变颜色值，你的浏览器将加载一个新的图像。

2021-10-04 14:07:57

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

推荐文章

最新文章

标签