[HTML][CSS][svg] zmiana koloru po najechaniu na obiekt, Noob Quest Opcje

[poczatkujaca12]

mam svg

[HTML] pobierz, plaintext 
<svg width="86" height="86" viewBox="0 0 86 86" fill="none" xmlns="http://www.w3.org/2000/svg" class="svgFill">
<defs>
    <style type="text/css"><![CDATA[
.svg{
    fill: #000;
}
.svg:hover{
    fill: #0f0;
}
    ]]></style>
  </defs>
<path d="...." class="svg"/>
</svg>
[HTML] pobierz, plaintext 

jak otwieram sam obrazek to działa - po najechaniu zmienia kolor
ale w aplikacji na stronie już nie chce

próbowałam dodać też w stylach strony

[HTML] pobierz, plaintext 
img:hover {
    fill: #0f0 !important;
}
[HTML] pobierz, plaintext 

lub

[HTML] pobierz, plaintext 
div:hover > img {
    fill: #0f0 !important;
}
[HTML] pobierz, plaintext 

[HTML] pobierz, plaintext 
div:hover > img  > svg {
    fill: #0f0 !important;
}
[HTML] pobierz, plaintext 

Ale nie działa - mam tylko czarny obrazek... ktoś wie dlaczego?

Ten post edytował poczatkujaca12 8.11.2020, 18:56:18

[trueblue]

Tabelka na końcu: https://www.smashingmagazine.com/2014/11/st...-svgs-with-css/
Tam też jest rozwiązanie Twojego problemu.

[poczatkujaca12]

Dzięki, embed rozwiązało problem, ale nadal mam z manipulowaniem właściwością fill i nie mogę zmusić by się zmieniał już po najechaniu na diva, a nie dopiero na obrazek...

[HTML] pobierz, plaintext 
<div><embed src="obraz.svg"/></div>
[HTML] pobierz, plaintext 

[HTML] pobierz, plaintext 
div:hover > embed {
fill:#0f0 !important;
}
[HTML] pobierz, plaintext 

[HTML] pobierz, plaintext 
div:hover > embed  > svg{
fill:#0f0 !important;
}
[HTML] pobierz, plaintext 

i żadna wariacja nie działa.

Czy jedyna możliwość manipulowania fill to umieszczenie obrazka inline w kodzie html?


Ten post edytował poczatkujaca12 8.11.2020, 20:23:10

[trueblue]

W tym przypadku tak.
<embed> nie ma właściwości fill, w kodzie nie istnieje również element <svg> zagnieżdżony w <embed>, a więc nie dostaniesz się do fill.

Ten post edytował trueblue 9.11.2020, 09:06:50

[poczatkujaca12]

OK, na szczęście to nie duże ikony to umieściłam obrazek bezpośrednio w kodzie...
A istnieją jakieś sposoby aby dostać się z zewnątrz do wartości fill w pliku svg?

[trueblue]

https://blog.comandeer.pl/stylowalne-ikonki-svg.html