SVG fill-Attribut funktioniert nicht

[Talkabout]

Hallo zusammen,

ich habe gerade festgestellt, dass das fill-Attribut, welches bei SVG-Grafiken angegeben wird, um die Farbe zu ändern, nicht funktioniert, wenn es direkt am svg-Objekt definiert wird. In den meisten Fällen wird dieses Attribut am g-Tag innerhalb der SVG-Grafik gesetzt. Jedoch, wenn kein g-Tag vorhanden ist, setzt FHEM das Attribut direkt am svg-Tag. Dann hat es aber keinen Effekt, da in der Standard-CSS von FHEM folgende Definition steckt:

Code Auswählen Erweitern

svg {
height:28px;
fill:#7b7b7b;
width:28px;
vertical-align:middle;
margin-right:5px;
}

Dies führt dazu, dass die SVG-Grafik immer die Farbe "7b7b7b" hat.

Mein Vorschlag wäre das Ganze so zu verändern:

Code Auswählen Erweitern

svg {
height:28px;
width:28px;
vertical-align:middle;
margin-right:5px;
}

svg:not([fill]) {
fill:#7b7b7b;
}

Bedeutet im Klartext, dass die default-Farbe nur dann greift, wenn der svg-Tag kein fill-Attribut besitzt. Damit wäre das Problem behoben. Hat jemand etwas gegen diese Änderung?

Danke!

Gruss

[rudolfkoenig]

Bevor ich was aendere, haette ich gerne ein konkretes Problem, um zu pruefen, ob die Aenderungen das Richtige bewirken.
Ich habe zunaechst gedacht, dass damit das Problem der Muelltonnen geloest ist, das ist aber bei mir nicht der Fall.

[Talkabout]

Bevor ich was aendere, haette ich gerne ein konkretes Problem, um zu pruefen, ob die Aenderungen das Richtige bewirken.
Ich habe zunaechst gedacht, dass damit das Problem der Muelltonnen geloest ist, das ist aber bei mir nicht der Fall.

Hallo Rudi,

sehr gerne

im Anhang findest Du das Icon "im_tv.svg". Ich habe dieses Icon bei einem meiner Geräte als devStateIcon so definiert:

Code Auswählen Erweitern

attr XXX devStateIcon on:im_tv@00FFFF off:im_tv@FF0000

Leider wurde mir die Farbe nicht angezeigt, weil das "fill"-Attribut bei diesem SVG im Browser direkt dem Tag "svg" zugewiesen ist. Bei diesem Tag greift aber auch das globale Style

Code Auswählen Erweitern

svg {
  height:32px; width:32px;
  fill:#278727;
  vertical-align:middle;
  margin:2px 0;
}

der besagt, dass alle SVGs erst einmal eine definierte Farbe erhalten sollen. Färbt man dann ein Icon per "@..." ein, wird dieser Style dem "g"-Tag innerhalb des SVGs zugewiesen, daher funktionieren die meisten Icons. Bei dem angehängten aber gibt es kein "g"-Tag innerhalb der Struktur, daher wird das "fill"-Attribut an das "svg"-Tag gehängt. Dort wird es aber von dem oben erwähnten Style überschrieben => Ergebnis ist, dass das SVG die default-Farbe bekommt. Mein Fix oben behebt dieses Problem.

Welches Problem gibt es denn bei den Mülltonnen?

Gruss

[rudolfkoenig]

Ich habs fuer alle default und dark styles gefixt. Die anderen Styles muessen von dem jeweiligen Maintainer gefixt werden.

Die Mülltonnen sind offensichtlich nicht eingecheckt. Habs vor einem halben Jahr wohl einchecken wollen, ist durch mein Test gefallen, und ich habe sie im SVN-Ordner vergessen.

[Talkabout]

Ich habs fuer alle default und dark styles gefixt. Die anderen Styles muessen von dem jeweiligen Maintainer gefixt werden.

Die Mülltonnen sind offensichtlich nicht eingecheckt. Habs vor einem halben Jahr wohl einchecken wollen, ist durch mein Test gefallen, und ich habe sie im SVN-Ordner vergessen.

Danke Dir!

Existiert denn noch ein Problem bei den Mülltonnen? Wenn ja, könnte ich es mir anschauen.

Gruss

[rudolfkoenig]

Hier sind die Tonnen. Eigentlich braucht man nur 2 und nicht 6, eins mit und eins ohne Kreuz, und die Einfaerbung sollte man per @ durchfuehren.
In diesem Zustand sind sie in FHEM aber alle unsichtbar.

[Talkabout]

Hier sind die Tonnen. Eigentlich braucht man nur 2 und nicht 6, eins mit und eins ohne Kreuz, und die Einfaerbung sollte man per @ durchfuehren.
In diesem Zustand sind sie in FHEM aber alle unsichtbar.

Hallo Rudi,

ich schaue mir das Thema gerade an. Der Grund, warum man die Mülltonnen gar nicht sieht ist die Tatsache, dass die Zeichenfläche zu gross ist. Ich bin dabei, das zu korrigieren. Allerdings bräuchte ich von Dir die Information, an welcher Stelle in FHEM die SVG-Grafiken mit den Farben versorgt werden. Passiert das im FHEM-Code oder in irgendeiner Bibliothek?

Danke Dir!

Gruss

Edit: Habe es gefunden.

[Talkabout]

Hallo Rudi,

das Problem ist Folgendes: Ich habe es nun geschafft, die Mülltonne auch in FHEM einzufärben. Leider ist diese auch mit der "stroke"-Eigenschaft versehen, die in FHEM nicht ersetzt wird. Meine Idee ist nun folgende:

Innerhalb des SVG-XMLs könnte man in die fill/stroke Eigenschaften Platzhalter hinterlegen. Etwas in der Art:

Code Auswählen Erweitern

...fill="FHEM_COLOR" stroke="FHEM_COLOR"

in FHEM könnte man diese Platzhalter dann mit der gewünschten Farbe ersetzen. Damit wäre ma nicht mehr darauf angewiesen, nur die Farbe schwarz (#000000) hardcodiert zu ersetzen. Es kann ja durchaus sein, dass dies bei einem Bild vielleicht nicht gewünscht ist.

Der Browser interpretiert diesen Platzhalter übrigens einfach nicht, die Farbe bleibt schwarz.

Im Anhang findest Du ein Diff für die 01_FHEMWEB.pm und die Mülltonne als korrigierte SVG.

Gruss

[rudolfkoenig]

Habs eingecheckt, auch die Muelltonne.
Zu beachten: fill:#000000 wird weiterhin ersetzt, zusaetzlich zu FHEM_COLOR. So muessen wir aber nicht alle bisherigen icons fixen und verteilen. Wer schwarz haben will, muss black oder #000 verwenden.

@Talkabout: Hast du Lust nach measure_battery_25 noch zu schauen? 0, 50, 75 und 100 sind ok, nur 25 nicht.
Ist in fhem/www/images/fhemSVG eingecheckt.

[Talkabout]

Hallo Rudi,

Habs eingecheckt, auch die Muelltonne.
Zu beachten: fill:#000000 wird weiterhin ersetzt, zusaetzlich zu FHEM_COLOR. So muessen wir aber nicht alle bisherigen icons fixen und verteilen. Wer schwarz haben will, muss black oder #000 verwenden.

Die Lösung passt. Andernfalls müssten wir tatsächlcih alle Icons umbauen.

@Talkabout: Hast du Lust nach measure_battery_25 noch zu schauen? 0, 50, 75 und 100 sind ok, nur 25 nicht.
Ist in fhem/www/images/fhemSVG eingecheckt.

Schaue ich mir heute an.

Gruss

[Talkabout]

Hallo Rudi,

im Pfad "fhem/www/images/fhemSVG/" habe ich das von Dir genannte Bild nicht gefunden. Das existiert aber im Pfad "fhem/www/images/openautomation", zusammen mit den anderen Versionen. Allerdings konnte ich kein Problem bei der Einfärbung feststellen, bei mir funktioniert das einwandfrei. Kannst Du das bei Dir bitte noch mal prüfen.

Im Anhang das eingefärbte Bild in grün.

Gruss

[rudolfkoenig]

Sorry, mein Fehler, bei mir ist es auch in openautomation.
Eingefaerbt ist es bei mir auch sichtbar, aber ohne Farbe komplett durchsichtig.
Faellt auf, wenn man es nicht einfaerbt, oder "Select icon"/"Extend devStateIcon" aufruft, siehe Anhang.

[Talkabout]

Hallo Rudi,

im Anhang das korrigiert SVG.

Gruss

[rudolfkoenig]

Vielan dank, habs eingecheckt.