用作背景图像时修改SVG填充颜色

HTML CSS

神乐小哥Near

2020-03-24

将SVG输出直接与页面代码内联放置,我能够像这样简单地用CSS修改填充颜色:

polygon.mystar {
    fill: blue;
}​

circle.mycircle {
    fill: green;
}

这很好用,但是我正在寻找一种方法,当它用作Background-IMAGE时,修改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>

第3505篇《用作背景图像时修改SVG填充颜色》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

9个回答
达蒙 2020.03.24

这是我最喜欢的方法,但是您的浏览器支持必须非常先进。使用mask属性,您可以创建应用于元素的遮罩。遮罩不透明或实心的任何地方,下面的图像都会显示出来。在透明的地方,基础图像被掩盖或隐藏。CSS遮罩图像的语法类似于背景图像。看看codepenmask

西里Tom 2020.03.24

但是,在此显示晚了,但是,如果您能够直接编辑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>
LGil 2020.03.24

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

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

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

2020.03.24

对于单色背景,您可以使用带遮罩的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);
2020.03.24

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

演示版

小胖 2020.03.24

将您的svg下载为文本。

使用javascript修改svg文本,以更改绘画/描边/填充颜色。

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

老丝 2020.03.24

另一方法是使用掩模。然后,您可以更改蒙版元素的背景颜色。这与更改svg的填充属性具有相同的效果。

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(不是我自己的)。它提出了多种方法(不限于掩模)。

飞云Eva 2020.03.24

一种方法是从某种服务器端机制为svg提供服务。只需创建一个资源服务器端,即可根据GET参数输出svg,然后将其提供给某个网址。

然后,您只需在CSS中使用该网址即可。

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

Stafan 2020.03.24
 .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文章和演示

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android