ホバーでsvgの色を変更しますか？ここ

iがホバーでsvgの色を変更しますか？ここ

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の色がまだ黒と赤点灯しないでコードです。どこが間違っていますか？

出典

2017-06-15 georoot

.svgファイルに塗りつぶしが適用されていますか？実際には、 ''ホバー ''に ''赤 ''を変えるべきであると宣言しているわけでもありません。 – Crowes

この質問は、このアプローチを試しても同様ですか？ https://stackoverflow.com/questions/11978995/how-to-change-color-of-svg-image-using-css-jquery-svg-image-replacement – varto

@Crowesかなり新しいですが、XMLを見ています。任意の塗りつぶしを参照してください..また、サイト上でjsを使用することはできません。私はsvgファイルを変更することができます – georoot

SVGをインライン化してそのようにする必要があると思います。これを行うもう1つの方法は、CSSフィルタまたはマスクを使用することです。ただし、少し難しくなります。

出典

2017-06-15 09:23:04

SVGにCSSを置くとうまくいくはずです。 CSSのクロスドキュメントを適用することはできません。 –

ホバーの状態にはfillを指定する必要があります。

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

出典

2017-06-15 09:35:41

私の悪い...問題はうまくいっていません...コードを正確に保つためにホバリングCSSの部分を削除しました:) – georoot

codepen/jsfiddleを投稿できますか？あなたのsvgコードがすでに 'fill ="＃000 "のように指定されているかどうかをチェックしますか？ –

ホバーでsvgの色を変更しますか？ここ

答えて

関連する問題