Hintergrundfarbe von svg plots ändern

Begonnen von The Grue, 15 August 2018, 19:49:52

Vorheriges Thema - Nächstes Thema

The Grue

Servus!

Im Februar gab's schon mal eine ähnliche Frage, aber die Antwort hilft mir leider gar nicht: https://forum.fhem.de/index.php/topic,84759.msg772148.html#msg772148

Ich habe alle drei nötigen css/svg-Dateien:

% ls -1 lcars*
lcarsstyle.css
lcarssvg_defs.svg
lcarssvg_style.css


% cat lcarsstyle.css   
@import url("darkstyle.css");



% cat lcarssvg_style.css
/* Author: Volker */
@font-face {
    font-family: 'lcars';
    src: url('/fhem/images/default/lcars/lcarsgtj3-webfont.eot');
    src: url('/fhem/images/default/lcars/lcarsgtj3-webfont.eot?#iefix') format('embedded-opentype'),
         url('/fhem/images/default/lcars/lcarsgtj3-webfont.woff') format('woff'),
         url('/fhem/images/default/lcars/lcarsgtj3-webfont.ttf') format('truetype'),
         url('/fhem/images/default/lcars/lcarsgtj3-webfont.svg#lcarsgtj3lcarsgtj3') format('svg');
    font-weight: normal;
    font-style: normal;
}

text { font-family:lcars; font-size:20px; fill:#9999ff;}
text.title { height:0px; width:0px; visibility:hidden; }
text.legend{ cursor:pointer; }
text.copy  { text-decoration:underline; stroke:none; fill:blue; cursor:pointer;}
text.paste { text-decoration:underline; stroke:none; fill:blue; cursor:pointer;}


path.SVGplot     { stroke:black; fill:none; }
rect.SVGplot     { stroke:black; fill:none; }
polyline.SVGplot { stroke:black; fill:none; }
.border  { stroke:black;}
.vgrid   { stroke:gray; stroke-dasharray:2,6;}
.hgrid   { stroke:gray; stroke-dasharray:2,6;}
.pasted  { stroke:black; stroke-dasharray:1,1;}

.SVGplot.l0     { stroke:#cd6566;     }
.SVGplot.l1     { stroke:green;   }
.SVGplot.l2     { stroke:blue;    }
.SVGplot.l3     { stroke:magenta; }
.SVGplot.l4     { stroke:brown;   }
.SVGplot.l5     { stroke:black;   }
.SVGplot.l6     { stroke:olive;   }
.SVGplot.l7     { stroke:gray;    }
.SVGplot.l8     { stroke:yellow;  }
.SVGplot.l0fill { stroke:#cd6566; fill:url(#gr_0); }
.SVGplot.l1fill { stroke:#291; fill:url(#gr_1); }
.SVGplot.l2fill { stroke:#00f; fill:url(#gr_2); }
.SVGplot.l3fill { stroke:#f0f; fill:url(#gr_3); }
.SVGplot.l4fill { stroke:#ff0; fill:url(#gr_4); }
.SVGplot.l5fill { stroke:#0ff; fill:url(#gr_5); }
.SVGplot.l6fill { stroke:#000; fill:url(#gr_6); }
.SVGplot.l0dot  { stroke:red;   stroke-dasharray:2,4; }
.SVGplot.l1dot  { stroke:green; stroke-dasharray:2,4; }
.SVGplot.l0fill_stripe { stroke:red; fill:url(#gr0_stripe);}
.SVGplot.l1fill_stripe { stroke:green; fill:url(#gr1_stripe);}
.SVGplot.l0fill_gyr    { stroke:red; fill:url(#gr0_gyr);}

text.SVGplot.l0     { stroke:none; fill:#cd6566; }
text.SVGplot.l1     { stroke:none; fill:green;   }
text.SVGplot.l2     { stroke:none; fill:#9999ff; }
text.SVGplot.l3     { stroke:none; fill:magenta; }
text.SVGplot.l4     { stroke:none; fill:brown;   }
text.SVGplot.l5     { stroke:none; fill:black;   }
text.SVGplot.l6     { stroke:none; fill:olive;   }
text.SVGplot.l7     { stroke:none; fill:gray;    }
text.SVGplot.l8     { stroke:none; fill:yellow;  }
text.SVGplot.l0fill { stroke:none; fill:#cd6566; }
text.SVGplot.l1fill { stroke:none; fill:#291;    }
text.SVGplot.l2fill { stroke:none; fill:#9999ff; }
text.SVGplot.l3fill { stroke:none; fill:#f0f; }
text.SVGplot.l4fill { stroke:none; fill:#ff0; }
text.SVGplot.l5fill { stroke:none; fill:#0ff; }
text.SVGplot.l6fill { stroke:none; fill:#000; }
text.SVGplot.l0dot  { stroke:none; fill:red;     }
text.SVGplot.l1dot  { stroke:none; fill:green;   }
text.SVGplot.l0fill_stripe {stroke:none; fill:red;  }
text.SVGplot.l1fill_stripe {stroke:none; fill:green;}
text.SVGplot.l0fill_gyr    {stroke:none; fill:red;  }



% cat lcarssvg_defs.svg
<!-- will be included in each svg plot -->
<defs>
  <linearGradient id="gr_bg" x1="0%" y1="0%" x2="0%" y2="100%">
    <stop offset="0%"   style="stop-color:#FFFFF7; stop-opacity:1"/>
    <stop offset="100%" style="stop-color:#A7A7A7; stop-opacity:1"/>
  </linearGradient>

  <linearGradient id="gr_0" x1="0%" y1="0%" x2="0%" y2="100%">
    <stop offset="0%"   style="stop-color:#cd6566; stop-opacity:.8"/>
    <stop offset="100%" style="stop-color:#A63637; stop-opacity:.8"/>
  </linearGradient>

  <linearGradient id="gr_1" x1="0%" y1="0%" x2="0%" y2="100%">
    <stop offset="0%"   style="stop-color:#291; stop-opacity:.8"/>
    <stop offset="100%" style="stop-color:#8f7; stop-opacity:.8"/>
  </linearGradient>

  <linearGradient id="gr_2" x1="0%" y1="0%" x2="0%" y2="100%">
    <stop offset="0%"   style="stop-color:#9999ff; stop-opacity:1"/>
    <stop offset="100%" style="stop-color:#0C287D; stop-opacity:1"/>
  </linearGradient>

  <linearGradient id="gr_3" x1="0%" y1="0%" x2="0%" y2="100%">
    <stop offset="0%"   style="stop-color:#f0f; stop-opacity:.6"/>
    <stop offset="100%" style="stop-color:#f8f; stop-opacity:.4"/>
  </linearGradient>

  <linearGradient id="gr_4" x1="0%" y1="0%" x2="0%" y2="100%">
    <stop offset="0%"   style="stop-color:#ff0; stop-opacity:.6"/>
    <stop offset="100%" style="stop-color:#ff8; stop-opacity:.4"/>
  </linearGradient>

  <linearGradient id="gr_5" x1="0%" y1="0%" x2="0%" y2="100%">
    <stop offset="0%"   style="stop-color:#0ff; stop-opacity:.6"/>
    <stop offset="100%" style="stop-color:#8ff; stop-opacity:.4"/>
  </linearGradient>

  <linearGradient id="gr_6" x1="0%" y1="0%" x2="0%" y2="100%">
    <stop offset="0%"   style="stop-color:#000; stop-opacity:.6"/>
    <stop offset="100%" style="stop-color:#ccc; stop-opacity:.4"/>
  </linearGradient>

  <pattern id="gr0_stripe" width="4" height="4"
           patternUnits="userSpaceOnUse" patternTransform="rotate(-45 2 2)">
      <path d="M -1,2 l 6,0" stroke="#f00" stroke-width="0.5"/>
  </pattern>

  <pattern id="gr1_stripe" width="4" height="4"
           patternUnits="userSpaceOnUse" patternTransform="rotate(45 2 2)">
      <path d="M -1,2 l 6,0" stroke="green" stroke-width="0.5"/>
  </pattern>

  <linearGradient id="gr0_gyr" x1="0%" y1="0%" x2="0%" y2="100%">
    <stop offset=  "0%" style="stop-color:#f00; stop-opacity:.6"/>
    <stop offset= "50%" style="stop-color:#ff0; stop-opacity:.6"/>
    <stop offset="100%" style="stop-color:#0f0; stop-opacity:.6"/>
  </linearGradient>


</defs>



Trotzdem ist der Hintergrund meiner SVGs seit dem letzten Update (das vorletzte Update ist Monate her...) knallrot. In den Entwicklertools von Chromium sieht der interessante Teil dann so aus:


<rect x="48" y="19.2" width="704" height="161.6" rx="8" ry="8" fill="red" class="border"></rect>


Ändere ich hier "red" in "none" ist alles gut. Wohlgemerkt steht hier "red", nicht "#ff0000" oder "#f00" wie es evtl. in meiner css Datei stünde.
Von dem im anderen Beitrag erwähnten "f18" habe ich nie etwas gehört und ein grep über meine config zeigt auch nichts.

Könnt ihr mir bitte sagen, wo ich dieses "red" austauschen muss?

Vielen Dank,
Markus

fiedel

Suche in deinen CSS Dateien mal nach ".border  { stroke:black; fill:url(#gr_bg); }" , bzw. ändere den .border- Eintrag mal dahingehend.
FeatureLevel: 6.1 auf Wyse N03D ; Deb. 11 ; Perl: v5.14.2 ; IO: HM-MOD-RPI-PCB + VCCU|CUL 868 V 1.66|LinkUSBi |TEK603
HM: SEC-SCO|SCI-3-FM|LC-SW4-PCB|ES-PMSW1-PL|RC-4-2|SEN-MDIR-O|SEC-WDS-2
CUL: HMS100TF|FS20 S4A-2 ; OWDevice: DS18S20|DS2401|DS2406|DS2423

The Grue

Servus!

Danke für Deinen Hinweis :)

- gefunden
- geändert
- kein Unterschied ...

leider.