Edycja ikonek .svg za pomocą stylu CSS. Jak?

Question

Witam, chciałbym aby po najechaniu na button jego ikonka .svg płynnie zmieniła kolor na biały. Aktualnie moje próby uzyskania tego efektu wyglądają tak:

<div id="button"><div class="marginline"></div><div id="buttonicon"><div class="icon"><img src="ikonki/menu/play.svg"></object></div></div><div id="buttontext">PLAY</div></div><div style="clear:both;"></div>

#button:hover svg
{
	transition: all 200ms ease;
	fill: #ffffff;
}

Lecz niestety to rozwiązanie nie działa. Jak można rozwiązać ten problem? Próbowałem wstawiać .svg selektorami <object> lecz niestety efekt był ten sam czyli żaden.

Answer 1

To SVG powinno być wsadzone bezpośrednio do kodu HTML. Wówczas mamy możliwość stylowania go jak chcemy. Poczytaj sobie o svg icons na css-tricks.com - tam jest o nich wszystko.

Answer 2

Do stylu buttona dodaj: Fill : kolor początkowy Transition Do hovera : Fill jaki tam chcesz Powinno działać

Comments

Jeżeli wypełniłbym button to miałbym jedynie biały kwadrat. Albo nie rozumiem o co ci chodzi. Mógłbyś podać swoją propozycję kodu?

---

Źle napisałem, miałem na myśli coś takiego: 
 

#button svg
{
    transition: all 200ms ease;
    fill: #000000;
}
#button:hover svg
{
    fill: #ffffff;
}

Jeśli nie zadziała, to zmień jeszcze tego hovera w taki sposób:
 

#button:hover > svg
{
    fill: #ffffff;
}

 

---

Niestety ;)
Zastanawiam się nad "svg" czy aby przypadkiem to nie jest błędne. Zamienione na img również nie działa.

Answer 3

Stworzyłem też  taki css:

.ikonka
{
    transition: all 200ms ease;
    fill: #7D7D7D;
}

#button:hover .ikonka
{
	transition: all 200ms ease;
    fill: #ffffff;
}

A w pliku .svg dodałem klasę ikonka do znacznika svg i nie działa. Dodanie tej klasy do znacznika patch również nie przynosi pożądanego rezultatu.