SVG pozadie a zmena farby

23. 1. 2025 03:25:55

Ahojte,

chcem pouzit svg ako pozadie pre prvok a nasiel som ze je to slusne podporovane tak som isiel cestou url() a base64 v css. Chcel by som vsak zmenit farbu "obrazku" pri hovery. Kedze ide o background image a nie objekt v html kode tak neviem ako napisat css pravidlo. Je to vobec mozne alebo musim mat dve background image definicie?

23. 1. 2025 03:25:55

https://webtrh.cz/diskuse/svg-pozadie-a-zmena-farby#reply1534168

Filip Mareš

23. 1. 2025 09:34:23

Ahojte,

chcem pouzit svg ako pozadie pre prvok na webu a nasiel som ze je to slusne podporovane tak som isiel cestou url() a base64 v css. Chcel by som vsak zmenit farbu "obrazku" pri hovery. Kedze ide o background image a nie objekt v html kode tak neviem ako napisat css pravidlo. Je to vobec mozne alebo musim mat dve background image definicie?

Zkuste použít filtr CSS invert(). Ten invertuje barvy SVG.

background-image: url(„your-svg.svg“); filter: invert(100%);

Editováno 5. 2. 2025 11:03:23 uživatelem Filip Mareš

23. 1. 2025 09:34:23

https://webtrh.cz/diskuse/svg-pozadie-a-zmena-farby#reply1534175

Ondřej Musil

(15 hodnocení)

23. 1. 2025 14:56:03

Ahoj, přesně tak, jak píšeš. Ve chvíli, kdy je SVG nastavené jako background-image (např. v CSS pomocí url(...)), nemůžeš přímo měnit jeho barvu přes CSS styl typu fill. To proto, že se k SVG chováš jako k obrázku, nikoli jako k HTML prvku. Je tedy nutné mít dvě různé verze SVG souboru – jednu pro normální zobrazení a druhou (s jinou barvou) pro hover.

Alternativou je nastylovat HTML prvek jako pozadí...

23. 1. 2025 14:56:03

Laravel & WordPress vývojář

https://webtrh.cz/diskuse/svg-pozadie-a-zmena-farby#reply1534185

Pro odpověď se přihlašte.

Přihlásit