在悬停时更改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

我想你必须内联你的SVG才能让它以这种方式工作。 第二种方法必须是使用css过滤器或掩码，但它有点难。

Answer 2

您必须指定悬停状态的fill 。

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