在懸停時更改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*/
    }