SVG: font-opacity: 0

[Dr. Boris Neubert]

Hallo,

im Moment wird der Hintergrund der SVG-Grafiken in FHEMWEB mit einer Farbe gezeichnet. Wenn die Klasse "background" im CSS um font-opacity:0 ergänzt würde, wäre der Hintergrund transparent. Das bringt möglicherweise Erleichterungen bei der Pflege der verschiedenen Styles. Ganz konkret nützlich ist es aber, wenn SVG-Grafiken nach PNG gewandelt und Bildern überblendet werden (bei RSS).

Ich habe jetzt aber nicht das Style-Sheet gefunden, wo die Klasse "background" definiert ist. Wer kann bitte helfen?

Grüße
Boris

[betateilchen]

[vermutung]
pgm2/svg_style.css
[/vermutung]

[Dr. Boris Neubert]

Danke. Muß wohl an der vorgerückten Stunde liegen, daß ich Tomaten auf den Augen hatte.

Es sind die Dateien der Form

Code Auswählen Erweitern

<styleprefix>svg_style.css

Wenn

Code Auswählen Erweitern

.background um

Code Auswählen Erweitern

font-opacity: 0; ergänzt wird, sehen die den Bildern auf meinem Bilderrahmen überblendeten Plots gleich viel besser aus, und die Plots in FHEMWEB so wie bisher.

Ich plädiere für eine Aufnahme in den Standard.

Grüße
Boris

[betateilchen]

Hast Du auch getestet, wie es aussieht, wenn in dem RSS gar kein Hintergrundbild definiert ist? (ich arbeite immer ohne Hintergrundbilder)

BTW: welchen Bilderrahmen hast Du eigentlich im Einsatz? Mit meinem Dual werde ich nicht so recht glücklich.

[Dr. Boris Neubert]

Kein Hintergrundbild = Bild mit schwarzem Hintergrund.

OT: Ich habe einen Philips-Rahmen (8", WLAN). Genaue Type habe ich nicht parat. Gibt es m.W. nicht mehr. Hatte ich Anfang letzten Jahres in der Bucht gefunden.

Gute Nacht
Boris

[rudolfkoenig]

Hab *svg_style.css mit  font-opacity: 0; ergaenzt

[Dr. Boris Neubert]

Vielen Dank, Rudi!

Boris

[betateilchen]

OT: Ich habe einen Philips-Rahmen (8", WLAN).

ich habe mein Bilderrahmen-"Problem" jetzt mittels eines Trekstor Breeze 7 (Android Tablet) gelöst, das derzeit für ca. 69 Euro überall abverkauft wird. Ist vermutlich preislich als auch funktional jedem reinen Bilderrahmen weit überlegen.

[rudolfkoenig]

Firefox meldet in der JavaScript-Console

Code Auswählen Erweitern

Unknown property 'font-opacity'.  Declaration dropped.
Kann mir jemand sagen, wie man das richtig macht, bzw. wo man Doku zu diesem Feature findet?

So im nachhinein verstehe den Grund fuer den Einbau auch nicht mehr: inwieweit wird durch font-opacity:0 das SVG Hintergrund transparent? Erstens will ich das nicht, zweitens ist es in Chrome/Safari/FF nicht transparent geworden.

[Dr. Boris Neubert]

Hallo, ich hoffe Deine Frage am Wochenende beantworten zu können, wenn ich wieder am Rechner sitze. Grüße, Boris

Gesendet von meinem A501 mit Tapatalk

[Dr. Boris Neubert]

Hallo,

der Eintrag lautet nicht font-opacity sondern fill-opacity. Ich war wohl etwas durcheinander, als ich das obige schrieb 

Der korrekte Eintrag in <prefix>svg_style.css lautet

Code Auswählen Erweitern

.background { fill:none; fill-opacity:0.0; }

fill:none wird von Firefox korrekt interpretiert. Für alle Renderer, die none bei fill nicht kennen, wird mit fill-opacity noch die Durchsichtigkeit auf voll transparent eingestellt.

Das betrifft allen Hintergrund außerhalb des Rechtecks, in welchem sich der Graph befindet. Das Rechteck selbst ist weiterhin mit der Farbe gemäß Style. Anbei ein Bild, das den Effekt zeigt: ich habe den Seitenhintergrund beim darkstyle auf rot gesetzt, damit man sieht, daß die Umgebung des Plots durchsichtig ist. Im Originalzustand hätte man sonst einen schwarzen Kasten.

Viele Grüße
Boris

[rudolfkoenig]

Eingecheckt.

[FS_Frank]

Kleine Anmerkung von mir:

Man sollte abwägen ob man nicht 'transparent' anstatt opacity nutzt:

background-color: transparent;
Edit: Habe eben nachgesehen, bin mir nicht ganz sicher ob es nur um die Hintergrundfarbe oder 'nur' um den Text geht, man könnte mal prüfen ob man bei font auch transparent setzt (bin mir gerade net sicher ob das geht? Kann das mal jemand prüfen? Muss langsam mal ins Bett ^^)

Grund:
Opacity kann durchaus zur Last aufgrund der Vererbung fallen, bei transparent hat man keine Zwangsvererbung.

Ich kann leider nicht einschätzen inwiefern das bei den SVG-Plots eine Rolle spielt, aber genau das Problem mit transparent vs opacity hatten wir gerade im Forschungsprojekt. Da gings aber nur um das Color-Attribut, natürlich. Ich hoffe, die Überlegung hilft!

LG Frank