Uzywam tailwindcss i w pewnym momencie na moim divie wolam bg-[url("/grabber-vertical.svg")] czyli uzywam svg jako bg image. Problem jest taki ze chcialbym zmienic kolor tego svg w zaleznosci od trybu light vs dark. Da sie go jakos wystylwoac poprzez selector czy musze zrobic dwa pliki svg?
0
0
SVG element ma taki atrybut jak fill, gdzie możesz sobie ustawić kolorek, albo wpisać currentColor i wtedy będzie dziedziczył kolor z parenta.
0
rjakubowski napisał(a):
SVG element ma taki atrybut jak fill, gdzie możesz sobie ustawić kolorek, albo wpisać currentColor i wtedy będzie dziedziczył kolor z parenta.
Tylko ze tutaj svg uzywam jako background-image: url(....svg) i w devtoolsach wtedy svg sie nie pojawia
0
No to w takim scenariuszu mógłbyś, np. jakiś filtr w css nakładać warunkowo albo mieć dwa pliki SVG.
Nie znam kontekstu w 100%.
0
O coś takiego robisz?
http://infinityhost.ct8.pl/auta.html
fajna zabawa.
0
<html>
<body>
<style>
#svge {
border: 1px solid;
width: 200px;
height: 200px;
background-color: green; /* kolor tła, przezroczystych elementów svg */
}
#svgee {
width: 200px;
height: 200px;
background-color: red; /* kolor elementu svg, ale dla całego */
-webkit-mask-image: url('https://upload.wikimedia.org/wikipedia/commons/6/6a/External_link_font_awesome.svg');
/*mask-image: url('https://upload.wikimedia.org/wikipedia/commons/6/6a/External_link_font_awesome.svg');*/
}
</style>
<div id="svge">
<div id="svgee">
</div>
</div>
</body>
</html>