FireFox에서 SVG 호버 채우기가 작동하지 않습니다.

먼저 SVG에 채우기를 추가 한 다음 마우스를 올려 놓으면 다른 색상으로 변경됩니다. 그것은 파이어 폭스를 제외한 모든 브라우저에서 작동합니다 (IE에 대해 모른다).FireFox에서 SVG 호버 채우기가 작동하지 않습니다.

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

svg의 첫 번째 채우기를 삭제하면 FF로 잘 작동하지만 분명히 해결책이 아닙니다.

어떻게 해결할 수 있습니까? 여기

는 http://codepen.io/shatkovski/pen/aZzmJJ?editors=1100

출처

2016-06-01 Stepan Shatkovski

파이어 폭스 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

파이어 폭스 아닌가요 - 제대로 여기에 행동 - 사양에 따라? [SVG 1.1 사양] (https://www.w3.org/TR/SVG/struct.html#UseElement)은 "개념적으로 복제 된 DOM 트리에는 내용이 포함되어 있지 않으므로 CSS2 선택기를 적용 할 수 없습니다 공식적인 문서 구조. " 따라서 "잘 작동하지 않는다"는 말은 오해의 소지가 있습니다. –

@ThomasW 스타일을 적용하지만 다시 정의하고 싶지는 않습니다. svg-hover에 "채우기"가 적용되지 않으면 예상대로 작동합니다. –

@ThomasW - 직관적 인 방식으로 구현 한 다른 브라우저와 비교할 때 잘 작동하지 않는다는 것을 의미합니다. – nixkuroi

FireFox에서 SVG 호버 채우기가 작동하지 않습니다.

답변

관련 문제