Hover na svg - firefox nie działa

Question

Witam.

Dłuższej walce z tym, przejrzeniu całego internetu, morza łez wypłakanych w poduszkę, podaję się.

Czy ktoś wie jak zastosować hover na svg, żeby działał na firefoxie? Na chromie i IE działa.

    <button class="button-left">
        <svg height="100" width="80"   xmlns="http://www.w3.org/2000/svg" version="1.1"
             xmlns:xlink="http://www.w3.org/1999/xlink">
            <circle class="circleButton" cx="32" cy="50" r="30" stroke="#000000" stroke-width=".1" fill="#04383e" fill-opacity="0.3" />
            <polygon style="fill:white;" points="12,49 35,49 40,30" />
            <polygon style="fill:#008b8b;" points="12,51 35,51 40,70" />
        </svg>
    </button>

 

.button-left svg .circleButton {
    transition: 200ms;
    transition-timing-function: ease-in-out;
}
.button-left svg:hover .circleButton{
    fill: #111111;
    cursor: pointer;
}

 

Answer 1

Lisek nie lubi się z SVG

.button-left:hover svg .circleButton

Comments

Właśnie to odczuwam. Szkoda bo z tego co czytam jest to lepsze rozwiązanie niż rysowanie w css.

PS. Właściwie to tylko tak działa: .button-left:hover circle.circleButton

---

Zazwyczaj wystarczy opakować SVG w jakiegoś diva, tak, żeby do samego SVG się nie odnosić.

---

Zwykle tak, ale jak chce się mieć interakcje na svg np. zmiana kolorów, animacja, to zaczynają się schody.

---

Akcja na divie -> reakcja na SVG : )

Answer 2

Spróbuj wyzerować style nakładane przez przeglądarkę.

Comments

Mam użyte normalize.