SVG hover fill не работает в FireFox

Сначала я добавляю заливку для SVG, затем на: hover меняет ее на другой цвет. Он работает во всех браузерах, кроме FireFox (не знаю об IE).SVG hover fill не работает в FireFox

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

Он отлично работает в FF, когда я удаляю первую заливку для svg, но это, очевидно, не решение.

Любые идеи, как исправить это?

Вот ручка http://codepen.io/shatkovski/pen/aZzmJJ?editors=1100

источник

2016-06-01 Stepan Shatkovski

Firefox парения SVG не очень хорошо работает с < использования >.

Если поместить путь внутри элемента 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) говорится: «Селекторы CSS2 не могут применяться к (концептуально) клонированному дереву DOM, поскольку его содержимое не является частью формальная структура документа ». Поэтому утверждение «не работает», поэтому несколько вводит в заблуждение. –

@ThomasW применяет стиль, но не хочет переопределять его. Когда «fill» не применяется для svg-hover работает как ожидалось –

@ThomasW - я имел в виду, что он не работает хорошо по сравнению с другими браузерами, которые реализуют его интуитивным способом. – nixkuroi

SVG hover fill не работает в FireFox

ответ

Смежные вопросы