SVG-Icons mit stroke-Color

[justme1968]

angenommen das icon schaut so aus:

Code Auswählen Erweitern

<?xml version="1.0" standalone="no"?>
<svg width="160" height="140" xmlns="http://www.w3.org/2000/svg" version="1.1">
  <rect x="10" y="10" width="100" height="100" stroke="#000000" fill="#000000"/>
</svg>


mit @red ändere ich bisher nur das fill. d.h. ich bekomme ein rotes rechteck mit schwarzem rand. dieses ist auf rotem (als umriß) und auf schwarzem untergrund zu sehen. das verhalten würde ich nicht als fehler bezeichnen sondern beabsichtigt. genau so haben früher ja z.b. maus zeiger funktioniert.

mit der änderung bekomme ich ein rotes rechteck mit rotem rand. dieses ist auf rotem untergrund nicht mehr (d.h. auch nicht als umriß) zu sehen. d.h. das verhalten hat sich geändert.

da ganze wäre noch viel auffälliger wenn ich mit stroke noch etwas in schwarz auf die rote fläche gemalt habe.

ich hatte z.b. früher ein mülltonnen icon das einen schwarzen rand hat damit es wenn es grau (restmüll bei uns) eingefärbt wird auf den schwarzen und grauen fhemweb zeilen besser sichtbar ist.

[justme1968]

icon@farbe1:farbe2 => füllung bekommt farbe1 und rand bekommt farbe2.

die idee finde ich gut.

[rudolfkoenig]

Eigentlich(TM) sollte ein SVG weder fill noch stroke spezifizieren, das muesste im CSS jeweils gesetzt werden, auch einzelne Elemente muessten ueber CSS gefaerbt werden, und nicht ueber FHEMWEB. FHEMWEB muss nur dafuer sorgen, dass die Elemente die passenden Klassen bekommen. Aber bevor wir die Welt umbauen, schlage ich vor die Idee mit "@fill:stroke" zu implementieren, damit koennte man fill und stroke jeweils optional setzen.

@Damian: hast Du was dagegen?

[xenos1984]

für neue icons löst kann man das lösen in dem man dunkelgrau 010101 verwendet. den unterschied sieht man sicher nicht.

So weit ich das sehe, wird nur #000000 ersetzt - wenn du also schwarz haben willst und stattdessen black schreibst statt numerischen Codes, bleibt es schwarz.

[Damian]

Eigentlich(TM) sollte ein SVG weder fill noch stroke spezifizieren, das muesste im CSS jeweils gesetzt werden, auch einzelne Elemente muessten ueber CSS gefaerbt werden, und nicht ueber FHEMWEB. FHEMWEB muss nur dafuer sorgen, dass die Elemente die passenden Klassen bekommen. Aber bevor wir die Welt umbauen, schlage ich vor die Idee mit "@fill:stroke" zu implementieren, damit koennte man fill und stroke jeweils optional setzen.

@Damian: hast Du was dagegen?

Ich habe nichts dagegen, hinterfrage aber den Sinn der zweiten Angaben.

Ich denke, die meisten "programmieren" nicht die Icons, sondern erstellen (malen) sie mit Programmen wie Inkscape. Was das Programm aus der Zeichnung macht, kann sehr unterschiedlich sein.

Das heißt, ob da ein stroke drinsteht oder fill, bestimmt eher die Software und nicht der User, daher ist die Option nur dann interessant, wenn man die SVG-Syntax intern kennt und sie bei der Erstellung des Icons auch beeinflussen kann - das dürfte für die meisten erstellen Icons nicht der Fall sein.

Abgesehen davon, stroke ist nicht immer nur der Rand von etwas, sondern kann z. B. ein nicht ganz gefüllter Kreis (Ring) sein, der irgendwo mitten im Bild liegt.

[justme1968]

gerade bei inkskape gibst du doch füll- und linienfarbe an. d.h. fill und stroke.

[Damian]

gerade bei inkskape gibst du doch füll- und linienfarbe an. d.h. fill und stroke.

Das finde ich gut, wenn sich da einer gut auskennt. Dann kannst du mal schauen, wie man den Ring von stroke in fill verwandelt, ohne unnötige Daten über path zu produzieren.

[rudolfkoenig]

Ich habe nichts dagegen[...]

Gut, dann habe ich es wie bestellt implementiert.

Btw. diese door_shutter_XXX.svg icons sind noch merkwuerdiger: da wird fill="none" stroke="#000000" gesetzt, mit dem Ergebnis, dass das explizite fill mit der @ Syntax nicht funktioniert (es wird nur #000000 ersetzt), aber CSS kann es umfaerben.

P.S.: Kinder, hoert auf zu streiten

[frank]

Gut, dann habe ich es wie bestellt implementiert

prima,
unerschöpfliche neue möglichkeiten.

[Damian]

P.S.: Kinder, hoert auf zu streiten

Wer streitet denn hier

Wenn du mich meinst. Ich wollte doch nur ernsthaft wissen, ob man das Icon aus Inkscape generiert mit fill statt mit stroke hinbekommt. Ich weiß nicht was ich da einstellen muss.

[habl]

kann es sein, dass die Funktion nicht mit devStateIcon kompatibel ist?
Ein:

Code Auswählen Erweitern

attr EV_WALLBOX devStateIcon Frei:ev_cssplug@green:green

führt den Befehl "green" aus, oder gibt es hier eine andere Schreibweise?

[rudolfkoenig]

kann es sein, dass die Funktion nicht mit devStateIcon kompatibel ist?

Ja: "devStateIcon: Space separated list of regexp:icon-name:cmd triples, icon-name and cmd may be empty."

Ich habe jetzt @ als alternativen Trenner zwischen fill- und stroke-Farbe hinzugefuegt.

[habl]

Ja: "devStateIcon: Space separated list of regexp:icon-name:cmd triples, icon-name and cmd may be empty."

Ich habe jetzt @ als alternativen Trenner zwischen fill- und stroke-Farbe hinzugefuegt.

Top, geht

vielen lieben Dank für schnelle einbinden!