0

I am currently trying to take a logo used on a site and apply it to a certain spot on a print page. In doing so, I would like to fill it differently. However, the fill effects do not seem to be working.

When I view the logo.svg in a separate tab and inspect it, I can successfully fill each one of the two of its components with a new color.

However, when I bring it as a background image into a DIV on the print page, the fill no longer works. Could someone tell me what the cause of this may be?

<div class="print-logo">
</div>

.print-logo {
  background: url(../img/logo.svg);
  background-size: contain;
  background-repeat: no-repeat;
  height: 180px;
  width: 200px;
  background-position: center center;
  margin: auto;
  fill: black; 
}

On the SVG page, I can do the following things successfully.

.fil0 {
    fill: green;
}

.fil1 {
    fill: red;
}

(As I mentioned above, the SVG seems to consist of two paths and classes).

MadPhysicist
  • 5,401
  • 11
  • 42
  • 107
  • 1
    Consider inlining the SVG. That means taking the actual code of the SVG and putting it in your document inline with your other HTML. Now you can target it like any other DOM element. – BugsArePeopleToo Jun 12 '19 at 01:28
  • 1
    You need to embed the svg code into your html - This way the svg markup and it's css classes are editable. When you link to the svg file through background url, the browser just treats the svg file like it's any other image file. – MichaelvE Jun 12 '19 at 01:29
  • I do not see how it is a duplicate. Most of the answers on the other question are discussing CSS in-passing. I have looked and tried their approaches, but none seem to be working for me. Part of the explanation could be the fact that that question is three years old. That is ancient in the land of CSS. – MadPhysicist Jun 13 '19 at 01:31

2 Answers2

2

You cannot use fill on a SVG when it is being the background picture. You can do something like background-color: black;. That will fill all of the transparent things in the your logo.

Some hacky workaround would be to in your logo make transparent just things you want to change color of (rest of the background should not be transparent) and use background-color: black; to color the transparent parts.

someRandomSerbianGuy
  • 471
  • 4
  • 18
1

Once you've removed the SVG from the document scope, it can no longer be affected by CSS properties.

One way to accomplish this is to overlap the elements using position: absolute and z-index to layer the elements within the document scope.

PaulProgrammer
  • 16,175
  • 4
  • 39
  • 56