SVG color not changing

Question

For a project, we've been using SVG images. I'm trying to color them but without success, here's the SVG:

<svg id="Calque_2" data-name="Calque 2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 313.89 311.93">
<defs>
    <style>
        .cls-1 {
            fill: #fff;
            opacity: 0.3;
        }
    </style>
</defs>
<title>goutte_background</title><path
    class="cls-1"
    d="M1145.43,987.78c-45,0-81.7-35.18-82.09-79.35v-4.3h0a63.88,63.88,0,0,1,2-14.07,90.58,90.58,0,0,1,6.25-17.2c13.68-30.49,38.7-63.33,38.7-63.33,18.76-26.58,27.36-46.91,30.88-59.81a147.8,147.8,0,0,0-57.07,12.12,158.6,158.6,0,0,0-83.26,83.26,151.14,151.14,0,0,0-12.12,60.59c0,21.5,3.91,41.83,12.12,60.59a158.6,158.6,0,0,0,83.26,83.26c18.76,8.21,39.09,12.12,60.59,12.12h2c21.5,0,41.83-3.91,60.59-12.12a158.6,158.6,0,0,0,83.26-83.26c8.21-18.76,12.12-39.09,12.12-60.59a151.14,151.14,0,0,0-12.12-60.59,158.6,158.6,0,0,0-83.26-83.26,147.8,147.8,0,0,0-57.07-12.12c3.52,12.9,12.12,33.23,30.88,59.81,0,0,25,32.84,38.7,63.33a90.58,90.58,0,0,1,6.25,17.2,63.88,63.88,0,0,1,2,14.07h0v4.3c-0.39,44.17-37.14,79.35-82.09,79.35h-0.39Z"
    transform="translate(-988.68 -749.72)"/><path
    class="cls-1"
    d="M1145.43,778.26l1.56,6.25c2,8.21,7.82,25.8,24.63,49.64,0,0,18.76,24.24,28.93,46.91a62.83,62.83,0,0,1,4.69,12.9,32.92,32.92,0,0,1,1.56,10.55h0v3.13c0,32.84-27.36,59-61,59h-0.39c-33.62,0-61-26.19-61-59v-3.13h0A32.93,32.93,0,0,1,1086,894a62.83,62.83,0,0,1,4.69-12.9c10.16-22.67,28.93-46.91,28.93-46.91,16.81-23.84,22.67-41.43,24.63-49.64Z"
    transform="translate(-988.68 -749.72)"/></svg>

I'm currently using this SVG as a background for a div, and I'm struggling to change it's color.

Here's what I've tried:

.someParent .cls-1 { fill: #0080FF !important; }

and

.someParent svg {
  fill: #0080FF !important;
}

I've also been trying to remove the style of the SVG but this had no effect.

This is the CSS for using the SVG as my div background:

background: #ffffff url("../images/goutte_background.svg") no-repeat right top;

CSS doesn't know nested selectors. I think `.someParent .cls-1 { /*...*/ }` or `.someParent svg { /*...*/ }` is what you're looking for. — Siguza, Apr 13 '16 at 15:58
Unless you have a Sass->CSS compilation issue, **only post the compiled CSS** — cimmanon, Apr 13 '16 at 17:46

score 8 · Answer 1 · answered Apr 13 '16 at 16:16

8

You can't adjust the SVG fill if it's a background-image. See: https://css-tricks.com/using-svg/#article-header-id-6.

A possible solution is to inline the SVG so you can modify its fill color, then absolutely position it behind what you want it to be behind.

answered Apr 13 '16 at 16:16

timolawl

5,434
13
29

Yeah that's what i thought, just wanted to make sure. Any idea why it doesn't work if it's a bg-image ? – Jorel Amthor Apr 13 '16 at 16:27
@Jorel Amthor Not entirely sure. My gut feeling is that the internals of background-image aren't accessible to the DOM, hence you can't style them. Whereas, if you inline the SVG, the internals can be manipulated. – timolawl Apr 13 '16 at 16:45
1

@JorelAmthor because CSS applies per document and the image is a separate document. Also the semantics of images are designed to be consistent which means like rasters. – Robert Longson Apr 13 '16 at 18:32

score 5 · Accepted Answer · answered Apr 13 '16 at 16:29

You can't adjust the SVG fill if it's a background-image. See: https://css-tricks.com/using-svg/#article-header-id-6.

A possible solution is to inline the SVG so you can modify its fill color, then absolutely position it behind what you want it to be behind.

As Timolawl said, that was it. I've used a different trick, i simply have duplicated the image and changed the color in the style tags

SVG color not changing

2 Answers2