在悬停时更改svg颜色？

Question

这是我的代码

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

和css是

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

svg的颜色仍为黑色，不会变红。我哪里错了？

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*/
    }