FireFoxでSVGホバーの塗りつぶしが機能しない

まず、SVGの塗りつぶしを追加し、次にon：hoverを押して別の色に変更します。 FireFox以外のすべてのブラウザで動作します（IEについてはわかりません）。FireFoxでSVGホバーの塗りつぶしが機能しない

svg { 
    height: 25px; 
    width: 40px; 
    fill: #fff; 
} 
.facebook:hover { 
    fill: #3b5998; 
}

私はsvgの最初の塗りつぶしを削除するとFFでうまく動作しますが、それは明らかに解決策ではありません。

これを修正する方法はありますか？ここで

は、FirefoxのSVGホバーが<使用>とうまく動作しないhttp://codepen.io/shatkovski/pen/aZzmJJ?editors=1100

出典

2016-06-01 Stepan Shatkovski

ペンです。

あなたはSVG要素の内側にパスを入れた場合は、それが正常に動作します：

<svg class="facebook" viewBox="0 0 510 510">           
    <path d="M459 0H51C23 0 0 23 0 51v408c0 28.1 23 51 51 51h408c28.1 0 51-22.9 51-51V51C510 23 487.1 0 459 0zM433.5 51v76.5h-51c-15.3 0-25.5 10.2-25.5 25.5v51h76.5v76.5H357V459h-76.5V280.5h-51V204h51v-63.7C280.5 91.8 321.3 51 369.8 51H433.5z" /> 
</svg>

出典

2016-06-01 18:11:37 nixkuroi

は、Firefoxではない - スペックに応じて - ここに正しく動作？ [SVG 1.1仕様]（https://www.w3.org/TR/SVG/struct.html#UseElement）は次のように述べています。「概念的にクローン化されたDOMツリーにその内容が含まれていないため、CSS2セレクタを適用できません正式な文書構造 "と述べた。したがって、「うまく動作しない」という記述は、やや誤解を招くものである。 –

@ThomasWスタイルを適用しますが、再定義したくありません。 svg - hoverに "fill"が適用されていないと、予期したとおりに動作します。 –

@ThomasW - 直感的な方法で他のブラウザと比べてうまく動作しません。 – nixkuroi

FireFoxでSVGホバーの塗りつぶしが機能しない

答えて

関連する問題