Change svg color on hover?

Question

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 ?

Answer 1

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.

Answer 2

You have to specify the fill for the hover state.

svg#menu-button:hover{
     fill:red;
     cursor:pointer; /*to change the cursor*/
    }