[SOLVED] Coloring SVG <IMG> in habpanel

Apps & Services HABPanel
,
1

Hi,

I’m setting up a new Weather Widget, based on the darksky binding. For the wind direction I’m using the weathericons from eric flowers. I’m rotating the SVG image using CSS. I also want to color the icon to white, but that does not work with the “fill” property in the css class.

.darksky-wind-icon{
  fill: white !important;
  transform: rotate({{itemValue('localCurrentWindDirection')}}deg);
}

and the widget contains:

<img height="92" src="{{ServerPath}}/static/icons/wi-wind-deg.svg" style="width: 92px;" class="darksky-wind-icon"/>

the rotation woks, but the SVG does not accept the “fill” in CSS. Is there any other way to get the icon/ image colored?

Thank you in advance!

2

Found a working solution. The CSS filter is doing the trick:

.darksky-wind-icon{
  filter: brightness(0) invert(1);
  transform: rotate({{itemValue('localCurrentWindDirection')}}deg);
}

This sets the icon to black (brightness 0) and inverts it (invert 1) which results in a white display of the SVG icon.

solved.