SVG CSS für deckende Füllung

[breaker27]

Hallo,

ich wollte gern einen SVG Graphen, bei dem die Balken (fsteps) in drei Bereiche unterteilt sind.
Das kann ich durch Hilfsvariablen hinbekommen, die die Wertereihen addieren.

Nun wollte ich die Transparenz der Balken in den SVG Plots wegbekommen, da sich sonst die Farben mischen.
Nach testweiser Änderung der Styles in der svg_style.css sieht das ok aus (s. Anhang):

.SVGplot.l0fill { stroke:red;         fill:#F88; }
.SVGplot.l1fill { stroke:forestgreen; fill:#484; }
.SVGplot.l2fill { stroke:blue;        fill:#88F; }

(d.h. feste Füllung statt der Transparenz mit "url(#gr_X)")

Nun wollte ich einfach neue styles hinzufügen, um beide Varianten verwenden zu können. Also:

.SVGplot.l0opaque { stroke:red;         fill:#F88; }
.SVGplot.l1opaque { stroke:forestgreen; fill:#484; }
.SVGplot.l2opaque { stroke:blue;        fill:#88F; }

text.SVGplot... ist ebenso erweitert.

Nach FHEM-Restart tauchen diese Styles auch im plot-Editor auf, aber der Plot ist nun zerstört (Balken gehen nicht mehr bis zur y-Achse) und sieht etwas merkwürdig aus, s. Screenshot.

Wo muss ich hinlangen, dass ich die Styles einfach entsprechend erweitern kann und die Plots normal aussehen?

Generell fände ich es toll, wenn die "opaque"-Styles für den o.g. Zweck wie von mir vorgeschlagen in FHEM aufgenommen werden. Ich denke der Use-Case dürfte häufiger vorkommen.

Da mir die SVG Plots und einfache Dashboards in FHEM ansonsten vollkommen ausreichen, möchte ich nicht auf externe zusätzliche Tools wie Grafana zurückgreifen.

[rudolfkoenig]

Wo muss ich hinlangen, dass ich die Styles einfach entsprechend erweitern kann und die Plots normal aussehen?

Das "normale" fill in SVG verbindet den letzten Punkt der Linie mit dem Ersten und fuellt die so geschlossene Flaeche.

l0fill & co verwendet fuers Fuellen mit fill:url(#gr_0) das in svg_defs gespeicherte linearGradient, dessen Fuellalgorithmus anders funktioniert, siehe https://developer.mozilla.org/en-US/docs/Web/SVG/Element/linearGradient.

Generell fände ich es toll, wenn die "opaque"-Styles für den o.g. Zweck wie von mir vorgeschlagen in FHEM aufgenommen werden. Ich denke der Use-Case dürfte häufiger vorkommen.

Wir haben aktuell 40 unterschiedliche Styles.
Falls noch 2 weitere Benutzer sich dafuer aussprechen, koennen wir darueber reden.

[breaker27]

l0fill & co verwendet fuers Fuellen mit fill:url(#gr_0) das in svg_defs gespeicherte linearGradient

Und wo ist definiert, dass l0fill anders gehandhabt wird? Es ist ja offenbar nicht nur durch den Verweis auf fill:url(#gr_0) definiert, denn wenn ich wie beschrieben für l0fill als Füllung eine Vollfarbe angebe (fill:#F88;), dann wird es ja auch richtig gefüllt.

Falls noch 2 weitere Benutzer sich dafuer aussprechen, koennen wir darueber reden.

Hier https://forum.fhem.de/index.php/topic,128785.msg1231982.html#msg1231982 geht es auch um einen Fall, bei dem der Style sinnvoll wäre. Brauchen wir nur noch einen User.

Als Füllfarben habe ich nun etwas hellere eingestellt, damit die Linien sich noch absetzen. Für die ersten drei sind das #F99, #9F9, #99F (s. Screenshot).

[rudolfkoenig]

Bitte meine vorherige Erklaerung ignorieren: es ist einfach falsch.

Das SVG Modul prueft, ob der Stylename fuer die Linie "fill" enthaelt, und wenn ja, dann ergaenzt den Pfad so, dass die gefuellte Flaeche sinnvoll ausschaut.

[breaker27]

OK, besten Dank. Dann kann ich mir zumindest einen Style entsprechend erweitern.

Mir ist aufgefallen, dass die Farben im stylesheet generell durcheinander sind. In der Combobox vom Plot Editor ist l3 rosa, im CSS (und SVGs) ist es magenta (dunkleres lila). Im Plot Editor ist l4 braun, im CSS bei l4fill gelb. Cyan taucht bei l5fill auf, l5 ist aber schwarz... Oder ist das so gedacht, dass Linien und Fill-Farben unterschiedlich sind und die Farben in den "Style-Sets" tw. anders?

Wenn definiert ist, was die Palette sein soll, kann ich das CSS auch gern mal aufräumen...

Zur Doku (falls es noch jemand braucht):

Code Auswählen Erweitern

.SVGplot.l0fill_opaque { stroke:red;         fill:#F99; }
.SVGplot.l1fill_opaque { stroke:forestgreen; fill:#9F9; }
.SVGplot.l2fill_opaque { stroke:blue;        fill:#99F; }
.SVGplot.l3fill_opaque { stroke:magenta;     fill:#F9F; }
.SVGplot.l4fill_opaque { stroke:brown;       fill:#C88; }
.SVGplot.l5fill_opaque { stroke:black;       fill:#888; }
.SVGplot.l6fill_opaque { stroke:olive;       fill:#AA6; }
.SVGplot.l7fill_opaque { stroke:gray;        fill:#CCC; }
.SVGplot.l8fill_opaque { stroke:#FA0;        fill:#FFA; }
text.SVGplot.l0fill_opaque { stroke:none; fill:red;         }
text.SVGplot.l1fill_opaque { stroke:none; fill:forestgreen; }
text.SVGplot.l2fill_opaque { stroke:none; fill:blue;        }
text.SVGplot.l3fill_opaque { stroke:none; fill:magenta;     }
text.SVGplot.l4fill_opaque { stroke:none; fill:brown;       }
text.SVGplot.l5fill_opaque { stroke:none; fill:black;       }
text.SVGplot.l6fill_opaque { stroke:none; fill:olive;       }
text.SVGplot.l7fill_opaque { stroke:none; fill:gray;        }
text.SVGplot.l8fill_opaque { stroke:none; fill:#FA0;        }

Anm: Da gelbe Schrift schlecht lesbar, und der Rahmen um Bars sonst nicht sichtbar ist, habe ich als Textfarbe und Rahmenfarbe für die gelbe Füllung (l8) ein helles Orange gewählt. Ich habe alle Farben ausprobiert und so sehen sie mmg. gut aus.

[frank]

hilfreich fände ich, wenn in der auswahlbox der linienfarbe im svg editor die jeweilige farbe zu sehen wäre.
zb am anfang jeder zeile ein entsprechend eingefärbtes rechteck.

[rudolfkoenig]

Mir ist aufgefallen, dass die Farben im stylesheet generell durcheinander sind.

Das "l3" Problem habe ich gerade gefixt. Die Einfaerbung der select-Liste ist ein "Quick-Hack", sie beruecksichtigt nur die ersten beiden Buchstaben von l4fill usw. Ich war zu faul fuer die 40 Styles einen Eintrag zu machen, bei manchen (wie die mit dem Verlauf) bin ich auch ratlos.

hilfreich fände ich, wenn in der auswahlbox der linienfarbe im svg editor die jeweilige farbe zu sehen wäre.

Geht sowas mit vertretbaren Aufwand, vulgo ohne das Select-Widget neu zu programmieren?
Weitere Bibliotheken einzubinden ist keine Option.