1

Here is the code that i have

div.dashboard
    svg#menu-btn
        image(xlink:href="/static/icons/svg/menu-1.svg")

and the css is

#menu-btn:hover {
    margin-left: 5px;
    height: 50px;
    width: 50px;
    fill: red;
    image {
        height: 50px;
        width: 50px;
        fill: red;
    }
}

The color of the svg is still black and doesn't turn red. Where am i going wrong ?

georoot
  • 3,557
  • 1
  • 30
  • 59
  • Is there a fill applied in the .svg file? You are also not actually declaring that it should change ``red`` on ``:hover``. – Joshua Jun 15 '17 at 09:15
  • This question is similar did you try this approach ? https://stackoverflow.com/questions/11978995/how-to-change-color-of-svg-image-using-css-jquery-svg-image-replacement – loki Jun 15 '17 at 09:15
  • @Crowes pretty new but looking at the XML i don't see any fill.. Also can't use js on the site. I can change the svg file though – georoot Jun 15 '17 at 09:18
  • You need to put the CSS in the SVG or link to it from the SVG file itself. – Robert Longson Jun 15 '17 at 10:09

2 Answers2

0

I suppose you'll have to inline your SVG to make it work that way. A second way to do so must be to use css filters or mask, but it is a bit harder.

Gabriel Cousin
  • 11
  • 2
0

You have to specify the fill for the hover state. 

svg#menu-button:hover{
     fill:red;
     cursor:pointer; /*to change the cursor*/
    }
Samia Ruponti
  • 3,910
  • 12
  • 42
  • 62
  • my bad... the problem is fill not working... i removed the hover css part just to keep code precise :) – georoot Jun 15 '17 at 09:46
  • can you post a codepen / jsfiddle? also check if your svg code already has fill specified like this `fill="#000"? – Samia Ruponti Jun 16 '17 at 06:39