[GELÖSTT! FTUI-3] Eigenes SVG-Icon korrekt einfärben

[DocCyber]

Hallo zusammen,


Ich versuche, ein eigenes Icon bauen, und zwar einen Kandelaber.
Grundsätzlich funktioniert das, aber ...

Im eingeschalteten Zustand soll der Kandelaber gelb leuchten, aber nur im inneren Bereich, der Rahmen muss unverändert bleiben.
Ich habe schon etwas mit fill-opacity gespielt. Das macht es etwas besser, aber ist nicht zufriedenstellend, denn noch immer wird auch der Rahmen eingefärbt.

Es gibt zwei Ansatzpunkte: Die SVG-Datei selbst oder ../ftui/components/icon.component.css
Aber bei beiden komme ich nicht weiter.

Wie bekomme ich das hin?
ich hoffe, es kennt sich jemand mit SVG-Dateien aus. 

[MDietrich]

Moin,
ist es so passend?

Code Auswählen Erweitern

<ftui-button states= "on,off"
shape="normal" direction="horizontal" size="large"
[(value)]="dummy1">
<ftui-icon type= "svg" path= "icons" size= "2"               
name="kandelaber"
[style]="dummy1 | map('on: `color:yellow`')">
</ftui-icon>
</ftui-button>

Gruß,
Matthias

[yersinia]

Es gibt mMn mehrere Optionen.

Zum Testen kannst du den SVG Code direkt ins HTML einbinden und dann mit ftui-binding im svg-Code arbeiten, ungefähr so (ungetestet):

Code Auswählen Erweitern

<your ftui-element here>
<svg
  width="127.6782mm"
  height="150.005mm"
  viewBox="0 0 127.67826 150.005"
  version="1.1"
  id="svg5"
  xml:space="preserve"
  xmlns="http://www.w3.org/2000/svg"
  xmlns:svg="http://www.w3.org/2000/svg"><defs
    id="defs2" /><g
    id="layer1"
    transform="translate(-50.595162,-42.940035)"><path
      style="fill:#323232;fill-opacity:0.2;stroke-width:0.326751"
      d="m 94.104071,188.45682 -2.725605,-4.47228 -3.815865,-0.14689 c -4.585429,-0.17652 -5.947058,-0.67729 -7.177444,-2.63961 -1.028423,-1.64024 -1.028423,-2.47999 0,-4.12868 0.599219,-0.96063 1.254163,-1.48875 2.451378,-1.97672 l 1.633699,-0.66588 30.556936,0.0783 30.55695,0.0783 1.37296,0.84663 c 3.25829,2.00926 3.11958,5.59054 -0.29649,7.65503 -0.83942,0.50731 -1.65061,0.62194 -4.99227,0.70554 l -3.99,0.0998 -2.79326,4.52732 -2.79325,4.52732 -17.63107,-0.008 -17.631049,-0.008 z m -0.466082,-19.03578 c -2.990272,-0.58195 -5.64043,-2.24057 -6.965288,-4.3593 -0.884819,-1.415 -16.062596,-44.90839 -22.666602,-64.95332 l -1.790634,-5.43505 -3.770958,-0.146892 c -4.533782,-0.176605 -5.896597,-0.681437 -7.156009,-2.650798 -1.518031,-2.373771 -0.47975,-4.94359 2.492643,-6.169455 1.114052,-0.459451 2.139089,-0.580926 4.902264,-0.580926 h 3.493686 l 1.873381,-1.689269 c 7.694387,-6.938211 17.971185,-13.33215 27.327994,-17.002728 6.951895,-2.727159 11.617064,-3.841709 19.624404,-4.688459 l 1.81706,-0.19215 -1.45366,-0.356464 c -3.3278,-0.816059 -6.0987,-2.773717 -7.50553,-5.302707 -1.13815,-2.04601 -1.13834,-5.297988 -3.6e-4,-7.34467 1.06555,-1.916562 3.6979,-4.057622 6.01893,-4.895605 2.71162,-0.978992 6.60529,-0.946949 9.30048,0.07654 2.7997,1.063174 4.04927,2.007605 5.48149,4.142949 1.1189,1.668341 1.24161,2.083491 1.24161,4.201554 0,4.489468 -2.70154,7.56152 -7.90086,8.984432 l -1.85778,0.508419 2.15371,0.200933 c 15.30496,1.427898 29.78163,7.79581 43.79194,19.262953 l 4.93333,4.037834 3.85404,0.10171 c 4.16099,0.109705 4.99508,0.377916 6.60808,2.124425 1.05064,1.137602 1.05064,3.924277 0,5.061878 -1.61721,1.751072 -2.4429,2.014931 -6.63521,2.12035 l -3.88137,0.0976 -1.17185,3.868524 c -2.67766,8.839592 -22.42289,65.103352 -23.36982,66.591982 -0.92877,1.46009 -3.13925,3.09039 -5.25835,3.87819 l -1.81708,0.67552 -20.16953,0.0497 c -11.12256,0.0274 -20.78611,-0.0702 -21.544151,-0.21773 z M 108.64067,127.4306 V 94.526478 H 91.157875 c -13.835377,0 -17.447037,0.07662 -17.3114,0.367234 0.09423,0.201978 5.026485,14.116448 10.960468,30.921058 5.933995,16.80459 11.114454,31.4462 11.512148,32.53687 l 0.723086,1.98307 h 5.799253 5.79924 z m 34.95359,0.14689 c 6.34662,-17.93569 11.54476,-32.709483 11.55142,-32.830669 0.007,-0.121186 -7.83767,-0.220343 -17.43182,-0.220343 h -17.44391 v 32.911392 32.91139 l 5.89249,-0.0807 5.89251,-0.0807 z"
      id="path125" />
<!-- change here -->
<path ftui-binding="style"
      [style]="dummy | map('on: ´#FFBF00´, off: ´#000000´') | prepend('fill:') | append(';fill-opacity:1;stroke:#000000;stroke-width:1.15396')"
      d="m 173.95665,437.82479 c -1.75557,-5.09837 -60.73954,-171.63625 -77.117838,-217.73782 -4.56744,-12.85641 -8.076898,-23.60282 -7.798796,-23.88093 0.278102,-0.2781 29.638614,-0.71306 65.245574,-0.96657 l 64.73994,-0.46094 v 124.12519 124.12519 h -21.63845 -21.63845 z"
      id="path2453"
      transform="matrix(0.26458333,0,0,0.26458333,50.595162,42.940035)" />
<path ftui-binding="style"
      [style]="dummy | map('on: ´#FFBF00´, off: ´#000000´') | prepend('fill:') | append(';fill-opacity:1;stroke:#000000;stroke-width:1.15396')"
      d="M 263.37367,319.03512 V 195.04133 l 45.02695,0.11882 c 24.76482,0.0654 54.25458,0.37081 65.5328,0.6788 l 20.50586,0.55998 -15.58674,44.34814 c -8.5727,24.39148 -28.16338,79.88323 -43.53485,123.31499 l -27.94812,78.96685 h -21.99795 -21.99795 z"
      id="path2455"
      transform="matrix(0.26458333,0,0,0.26458333,50.595162,42.940035)" /></g></svg>
</your ftui-element here>
Du kannst in der SVG aber auch die Farbdefinition abhängig vom Elternelement gestalten wenn du in der style-definition des svg-elements

Code Auswählen Erweitern

fill:currentcolor;setzt und dann via style color über das eltern-element definierst ([1], [2]).

[DocCyber]

ist es so passend?

Nein. Diese Standard-Definition färbt das gesamte Icon, nicht nur den inneren Bereich "hinter Glas".

[DocCyber]

Es gibt mMn mehrere Optionen.

Das werde ich ausprobieren - sieht nach einer Lösung des Problems aus.

[DocCyber]

Leider funktioniert keine deiner beiden vorgeschlagenen Lösungen.

Vielleicht haut die CSS für <ftui-icon> dazwischen; da steht schon fill: currentColor
Offenbar wird dadurch aber alles eingefärbt, was in <svg> fill:xxxxxx heißt. Ich möchte aber nur manche gefüllte Fläche umfärben.

Kann man nicht irgendwie erreichen, dass Flächen mit z.B. fill:B9B9B9 verschont bleiben?

Leider kenne ich mich nicht gut genug aus.

[yersinia]

Zeig doch mal deine Einbindung. Wenn du den puren svg code direkt einbindest, brauchst und solltest du dies nicht mit einem ftui-icon element umschließen.

Kann man nicht irgendwie erreichen, dass Flächen mit z.B. fill:B9B9B9 verschont bleiben?

Code Auswählen Erweitern

fill:#B9B9B9 !important;

[DocCyber]

Zeig doch mal deine Einbindung.

Völlig normal eingebunden (device ist der Schalter, und channel der entsprechende Kanal):

Code Auswählen Erweitern

<ftui-icon size="8"
    name="kandelaber"
    [color]="{{device}}:relay_{{channel}} | map('on: warning, off: gray')"
    @click="sendFhem('set {{device}} toggle {{channel}}')">
</ftui-icon>

Wenn du den puren svg code direkt einbindest, brauchst und solltest du dies nicht mit einem ftui-icon element umschließen.

Das versteh ich nicht. Wie kann ich das Icon denn sonst mit den restlichen Features versorgen?
Kannst du mir das näher erklären?

Kann man nicht irgendwie erreichen, dass Flächen mit z.B. fill:B9B9B9 verschont bleiben?

Code Auswählen Erweitern

fill:#B9B9B9 !important;

Hmmm ...  Interessant  -  An welcher Stelle der <ftui-icon>-CSS muss ich das denn einbauen?
fill: ist ja an etlichen Stellen der CSS aufgeführt.
Die Funktionalität der CSS gilt ja für alle Icons, und die möchte ich nicht sabotieren, sondern höchstens ergänzen.


icon.component.css

Code Auswählen Erweitern

:host {
  --color-base: currentColor;
  position: relative;
}

.icon {
  display: flex;
}

svg {
  width: var(--icon-width, 2.5em);
  height: var(--icon-height, 2.5em);
  fill: currentColor;
}

svg g[fill],
svg g [fill]  {
  fill: inherit;
}

svg path[style],
svg g[style] {
  fill: inherit !important;
}

img {
  width: var(--icon-width, 4em);
  height: var(--icon-height, 4em);
  object-fit: contain;
}

:host([crop]) img {
object-fit: none;
}

:host([shape="round"]) img {
  border-radius: 1.5em;
}
:host([shape="circle"]) img {
  border-radius: 50%;
}

svg[viewBox="0 0 448 512"] {
  width: 1.5em;
  height: 1.5em;
}

:host([color]) svg {
  fill: var(--color-base);
  color: var(--color-base);
}

:host([invert]) {
  background: var(--color-base);
  border-radius: 0.75em;
  width: 3em;
  height: 3em;
  display: flex;
  justify-content: center;
  align-items: center;
}

:host([invert][color]) svg {
  fill: var(--color-contrast);
}

:host([popup-target]) {
  cursor: pointer;
}

::slotted(ftui-badge),
::slotted(ftui-icon),
::slotted(ftui-label)  {
  top: -0.75em;
  position: absolute;
  right: -0.75em;
}

:host([right]:not([right=""])),
:host([left]:not([left=""])),
:host([top]:not([top=""])),
:host([bottom]:not([bottom=""]))  {
  position: absolute;
}


Ich habe zwischenzeitlich in die SVG-Datei direkt einen Style eingebaut ( .lockedCol ), der sicher stellen soll, dass Flächen für Farbveränderungen gesperrt werden.
Leider nutzt das auch nichts.
Inhalt der SVG-Datei

Code Auswählen Erweitern

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->

<svg
width="127.6782mm"
height="150.005mm"
viewBox="0 0 127.67826 150.005"
version="1.1"
id="svg5"
xml:space="preserve"
xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg">

<defs>
id="defs2"
<style>
.lockedCol {fill: #abcdef}
</style>
</defs>

<g
id="layer1"
transform="translate(-50.595162,-42.940035)">

<path
class="lockedCol"
style="fill-opacity:0.8;stroke-width:0.326751"
d="m 94.104071,188.45682 -2.725605,-4.47228 -3.815865,-0.14689 c -4.585429,-0.17652 -5.947058,-0.67729 -7.177444,-2.63961 -1.028423,-1.64024 -1.028423,-2.47999 0,-4.12868 0.599219,-0.96063 1.254163,-1.48875 2.451378,-1.97672 l 1.633699,-0.66588 30.556936,0.0783 30.55695,0.0783 1.37296,0.84663 c 3.25829,2.00926 3.11958,5.59054 -0.29649,7.65503 -0.83942,0.50731 -1.65061,0.62194 -4.99227,0.70554 l -3.99,0.0998 -2.79326,4.52732 -2.79325,4.52732 -17.63107,-0.008 -17.631049,-0.008 z m -0.466082,-19.03578 c -2.990272,-0.58195 -5.64043,-2.24057 -6.965288,-4.3593 -0.884819,-1.415 -16.062596,-44.90839 -22.666602,-64.95332 l -1.790634,-5.43505 -3.770958,-0.146892 c -4.533782,-0.176605 -5.896597,-0.681437 -7.156009,-2.650798 -1.518031,-2.373771 -0.47975,-4.94359 2.492643,-6.169455 1.114052,-0.459451 2.139089,-0.580926 4.902264,-0.580926 h 3.493686 l 1.873381,-1.689269 c 7.694387,-6.938211 17.971185,-13.33215 27.327994,-17.002728 6.951895,-2.727159 11.617064,-3.841709 19.624404,-4.688459 l 1.81706,-0.19215 -1.45366,-0.356464 c -3.3278,-0.816059 -6.0987,-2.773717 -7.50553,-5.302707 -1.13815,-2.04601 -1.13834,-5.297988 -3.6e-4,-7.34467 1.06555,-1.916562 3.6979,-4.057622 6.01893,-4.895605 2.71162,-0.978992 6.60529,-0.946949 9.30048,0.07654 2.7997,1.063174 4.04927,2.007605 5.48149,4.142949 1.1189,1.668341 1.24161,2.083491 1.24161,4.201554 0,4.489468 -2.70154,7.56152 -7.90086,8.984432 l -1.85778,0.508419 2.15371,0.200933 c 15.30496,1.427898 29.78163,7.79581 43.79194,19.262953 l 4.93333,4.037834 3.85404,0.10171 c 4.16099,0.109705 4.99508,0.377916 6.60808,2.124425 1.05064,1.137602 1.05064,3.924277 0,5.061878 -1.61721,1.751072 -2.4429,2.014931 -6.63521,2.12035 l -3.88137,0.0976 -1.17185,3.868524 c -2.67766,8.839592 -22.42289,65.103352 -23.36982,66.591982 -0.92877,1.46009 -3.13925,3.09039 -5.25835,3.87819 l -1.81708,0.67552 -20.16953,0.0497 c -11.12256,0.0274 -20.78611,-0.0702 -21.544151,-0.21773 z M 108.64067,127.4306 V 94.526478 H 91.157875 c -13.835377,0 -17.447037,0.07662 -17.3114,0.367234 0.09423,0.201978 5.026485,14.116448 10.960468,30.921058 5.933995,16.80459 11.114454,31.4462 11.512148,32.53687 l 0.723086,1.98307 h 5.799253 5.79924 z m 34.95359,0.14689 c 6.34662,-17.93569 11.54476,-32.709483 11.55142,-32.830669 0.007,-0.121186 -7.83767,-0.220343 -17.43182,-0.220343 h -17.44391 v 32.911392 32.91139 l 5.89249,-0.0807 5.89251,-0.0807 z"
id="path125" />

<path
style="fill:#000000;fill-opacity:1;stroke:#000000;stroke-width:1.15396"
d="m 173.95665,437.82479 c -1.75557,-5.09837 -60.73954,-171.63625 -77.117838,-217.73782 -4.56744,-12.85641 -8.076898,-23.60282 -7.798796,-23.88093 0.278102,-0.2781 29.638614,-0.71306 65.245574,-0.96657 l 64.73994,-0.46094 v 124.12519 124.12519 h -21.63845 -21.63845 z"
id="path2453"
transform="matrix(0.26458333,0,0,0.26458333,50.595162,42.940035)" />

<path
style="fill:#000000;fill-opacity:1;stroke:#000000;stroke-width:1.15396"
d="M 263.37367,319.03512 V 195.04133 l 45.02695,0.11882 c 24.76482,0.0654 54.25458,0.37081 65.5328,0.6788 l 20.50586,0.55998 -15.58674,44.34814 c -8.5727,24.39148 -28.16338,79.88323 -43.53485,123.31499 l -27.94812,78.96685 h -21.99795 -21.99795 z"
id="path2455"
transform="matrix(0.26458333,0,0,0.26458333,50.595162,42.940035)" />
</g>
</svg>

So sieht die SVG im Original aus. Die Farbe des hellblauen Bereichs wird im SVG festgelegt, aber nur die schwarzen Flächen sollen durch <ftui-icon> je nach Schaltzustand ersetzt werden. Jedenfalls ist das meine Wunschvorstellung.

[yersinia]

Ich befürchte, wir reden aneinander vorbei. Das

Code Auswählen Erweitern

fill:#B9B9B9 !important;sowie

Code Auswählen Erweitern

fill:currentcolor;muss in die style Definition der svg definiert werden, wenn du die svg über ftui-icon einbinden möchtest. Dann kannst du mit ftui-binding im style des ftui-icon die color setzen.

Und zum Testen, und nur dafür solltest du den SVG code 1:1 in deine FTUI Seite kopieren (ggf nur mit umschließenden <ftui-grid-tile> oä) und ohne ftui-icon:

Code Auswählen Erweitern

<svg
  width="127.6782mm"
  height="150.005mm"
  viewBox="0 0 127.67826 150.005"
  version="1.1"
  id="svg5"
  xml:space="preserve"
  xmlns="http://www.w3.org/2000/svg"
  xmlns:svg="http://www.w3.org/2000/svg"><defs
    id="defs2" /><g
    id="layer1"
    transform="translate(-50.595162,-42.940035)">
<!-- change style here -->
<path
      style="fill:#323232 !important;fill-opacity:0.2;stroke-width:0.326751;"
      d="m 94.104071,188.45682 -2.725605,-4.47228 -3.815865,-0.14689 c -4.585429,-0.17652 -5.947058,-0.67729 -7.177444,-2.63961 -1.028423,-1.64024 -1.028423,-2.47999 0,-4.12868 0.599219,-0.96063 1.254163,-1.48875 2.451378,-1.97672 l 1.633699,-0.66588 30.556936,0.0783 30.55695,0.0783 1.37296,0.84663 c 3.25829,2.00926 3.11958,5.59054 -0.29649,7.65503 -0.83942,0.50731 -1.65061,0.62194 -4.99227,0.70554 l -3.99,0.0998 -2.79326,4.52732 -2.79325,4.52732 -17.63107,-0.008 -17.631049,-0.008 z m -0.466082,-19.03578 c -2.990272,-0.58195 -5.64043,-2.24057 -6.965288,-4.3593 -0.884819,-1.415 -16.062596,-44.90839 -22.666602,-64.95332 l -1.790634,-5.43505 -3.770958,-0.146892 c -4.533782,-0.176605 -5.896597,-0.681437 -7.156009,-2.650798 -1.518031,-2.373771 -0.47975,-4.94359 2.492643,-6.169455 1.114052,-0.459451 2.139089,-0.580926 4.902264,-0.580926 h 3.493686 l 1.873381,-1.689269 c 7.694387,-6.938211 17.971185,-13.33215 27.327994,-17.002728 6.951895,-2.727159 11.617064,-3.841709 19.624404,-4.688459 l 1.81706,-0.19215 -1.45366,-0.356464 c -3.3278,-0.816059 -6.0987,-2.773717 -7.50553,-5.302707 -1.13815,-2.04601 -1.13834,-5.297988 -3.6e-4,-7.34467 1.06555,-1.916562 3.6979,-4.057622 6.01893,-4.895605 2.71162,-0.978992 6.60529,-0.946949 9.30048,0.07654 2.7997,1.063174 4.04927,2.007605 5.48149,4.142949 1.1189,1.668341 1.24161,2.083491 1.24161,4.201554 0,4.489468 -2.70154,7.56152 -7.90086,8.984432 l -1.85778,0.508419 2.15371,0.200933 c 15.30496,1.427898 29.78163,7.79581 43.79194,19.262953 l 4.93333,4.037834 3.85404,0.10171 c 4.16099,0.109705 4.99508,0.377916 6.60808,2.124425 1.05064,1.137602 1.05064,3.924277 0,5.061878 -1.61721,1.751072 -2.4429,2.014931 -6.63521,2.12035 l -3.88137,0.0976 -1.17185,3.868524 c -2.67766,8.839592 -22.42289,65.103352 -23.36982,66.591982 -0.92877,1.46009 -3.13925,3.09039 -5.25835,3.87819 l -1.81708,0.67552 -20.16953,0.0497 c -11.12256,0.0274 -20.78611,-0.0702 -21.544151,-0.21773 z M 108.64067,127.4306 V 94.526478 H 91.157875 c -13.835377,0 -17.447037,0.07662 -17.3114,0.367234 0.09423,0.201978 5.026485,14.116448 10.960468,30.921058 5.933995,16.80459 11.114454,31.4462 11.512148,32.53687 l 0.723086,1.98307 h 5.799253 5.79924 z m 34.95359,0.14689 c 6.34662,-17.93569 11.54476,-32.709483 11.55142,-32.830669 0.007,-0.121186 -7.83767,-0.220343 -17.43182,-0.220343 h -17.44391 v 32.911392 32.91139 l 5.89249,-0.0807 5.89251,-0.0807 z"
      id="path125" />
<!-- change here -->
<path ftui-binding="style"
      [style]="dummy | map('on: ´#FFBF00´, off: ´#000000´') | prepend('fill:') | append(';fill-opacity:1;stroke:#000000;stroke-width:1.15396;')"
      d="m 173.95665,437.82479 c -1.75557,-5.09837 -60.73954,-171.63625 -77.117838,-217.73782 -4.56744,-12.85641 -8.076898,-23.60282 -7.798796,-23.88093 0.278102,-0.2781 29.638614,-0.71306 65.245574,-0.96657 l 64.73994,-0.46094 v 124.12519 124.12519 h -21.63845 -21.63845 z"
      id="path2453"
      transform="matrix(0.26458333,0,0,0.26458333,50.595162,42.940035)" />
<path ftui-binding="style"
      [style]="dummy | map('on: ´#FFBF00´, off: ´#000000´') | prepend('fill:') | append(';fill-opacity:1;stroke:#000000;stroke-width:1.15396;')"
      d="M 263.37367,319.03512 V 195.04133 l 45.02695,0.11882 c 24.76482,0.0654 54.25458,0.37081 65.5328,0.6788 l 20.50586,0.55998 -15.58674,44.34814 c -8.5727,24.39148 -28.16338,79.88323 -43.53485,123.31499 l -27.94812,78.96685 h -21.99795 -21.99795 z"
      id="path2455"
      transform="matrix(0.26458333,0,0,0.26458333,50.595162,42.940035)" /></g></svg>

Wenn du den puren svg code direkt einbindest, brauchst und solltest du dies nicht mit einem ftui-icon element umschließen.

Das versteh ich nicht. Wie kann ich das Icon denn sonst mit den restlichen Features versorgen?
Kannst du mir das näher erklären?

du nutzt ftui-binding direkt im svg code dann, zB:

Code Auswählen Erweitern

<path ftui-binding="style"
      [style]="dummy | map('on: ´#FFBF00´, off: ´#000000´') | prepend('fill:') | append(';fill-opacity:1;stroke:#000000;stroke-width:1.15396;')"

Ich habe zwischenzeitlich in die SVG-Datei direkt einen Style eingebaut ( .lockedCol ), der sicher stellen soll, dass Flächen für Farbveränderungen gesperrt werden.

Das kann nicht funktionieren da dein inlineCSS in der SVG deine Definition überschreibt.

[DocCyber]

Und zum Testen, und nur dafür solltest du den SVG code 1:1 in deine FTUI Seite kopieren (ggf nur mit umschließenden <ftui-grid-tile> oä) und ohne ftui-icon:

Das habe ich ausprobiert.

Code Auswählen Erweitern

<ftui-grid-tile row="17" col="17" width="12" height="12">
    <svg
      width="127.6782mm"
      height="150.005mm"
      viewBox="0 0 127.67826 150.005"
      version="1.1"
      id="svg5"
      xml:space="preserve"
      xmlns="http://www.w3.org/2000/svg"
      xmlns:svg="http://www.w3.org/2000/svg"><defs
        id="defs2" /><g
        id="layer1"
        transform="translate(-50.595162,-42.940035)">

    <path
          style="fill:#323232 !important;fill-opacity:0.2;stroke-width:0.326751;"
          d="m 94.104071,188.45682 -2.725605,-4.47228 -3.815865,-0.14689 c -4.585429,-0.17652 -5.947058,-0.67729 -7.177444,-2.63961 -1.028423,-1.64024 -1.028423,-2.47999 0,-4.12868 0.599219,-0.96063 1.254163,-1.48875 2.451378,-1.97672 l 1.633699,-0.66588 30.556936,0.0783 30.55695,0.0783 1.37296,0.84663 c 3.25829,2.00926 3.11958,5.59054 -0.29649,7.65503 -0.83942,0.50731 -1.65061,0.62194 -4.99227,0.70554 l -3.99,0.0998 -2.79326,4.52732 -2.79325,4.52732 -17.63107,-0.008 -17.631049,-0.008 z m -0.466082,-19.03578 c -2.990272,-0.58195 -5.64043,-2.24057 -6.965288,-4.3593 -0.884819,-1.415 -16.062596,-44.90839 -22.666602,-64.95332 l -1.790634,-5.43505 -3.770958,-0.146892 c -4.533782,-0.176605 -5.896597,-0.681437 -7.156009,-2.650798 -1.518031,-2.373771 -0.47975,-4.94359 2.492643,-6.169455 1.114052,-0.459451 2.139089,-0.580926 4.902264,-0.580926 h 3.493686 l 1.873381,-1.689269 c 7.694387,-6.938211 17.971185,-13.33215 27.327994,-17.002728 6.951895,-2.727159 11.617064,-3.841709 19.624404,-4.688459 l 1.81706,-0.19215 -1.45366,-0.356464 c -3.3278,-0.816059 -6.0987,-2.773717 -7.50553,-5.302707 -1.13815,-2.04601 -1.13834,-5.297988 -3.6e-4,-7.34467 1.06555,-1.916562 3.6979,-4.057622 6.01893,-4.895605 2.71162,-0.978992 6.60529,-0.946949 9.30048,0.07654 2.7997,1.063174 4.04927,2.007605 5.48149,4.142949 1.1189,1.668341 1.24161,2.083491 1.24161,4.201554 0,4.489468 -2.70154,7.56152 -7.90086,8.984432 l -1.85778,0.508419 2.15371,0.200933 c 15.30496,1.427898 29.78163,7.79581 43.79194,19.262953 l 4.93333,4.037834 3.85404,0.10171 c 4.16099,0.109705 4.99508,0.377916 6.60808,2.124425 1.05064,1.137602 1.05064,3.924277 0,5.061878 -1.61721,1.751072 -2.4429,2.014931 -6.63521,2.12035 l -3.88137,0.0976 -1.17185,3.868524 c -2.67766,8.839592 -22.42289,65.103352 -23.36982,66.591982 -0.92877,1.46009 -3.13925,3.09039 -5.25835,3.87819 l -1.81708,0.67552 -20.16953,0.0497 c -11.12256,0.0274 -20.78611,-0.0702 -21.544151,-0.21773 z M 108.64067,127.4306 V 94.526478 H 91.157875 c -13.835377,0 -17.447037,0.07662 -17.3114,0.367234 0.09423,0.201978 5.026485,14.116448 10.960468,30.921058 5.933995,16.80459 11.114454,31.4462 11.512148,32.53687 l 0.723086,1.98307 h 5.799253 5.79924 z m 34.95359,0.14689 c 6.34662,-17.93569 11.54476,-32.709483 11.55142,-32.830669 0.007,-0.121186 -7.83767,-0.220343 -17.43182,-0.220343 h -17.44391 v 32.911392 32.91139 l 5.89249,-0.0807 5.89251,-0.0807 z"
          id="path125" />


    <path ftui-binding="style"
          [style]="la1_AB3:relay_0 | map('on: ´#FFBF00´, off: ´#000000´') | prepend('fill:') | append(';fill-opacity:1;stroke:#000000;stroke-width:1.15396;')"
          d="m 173.95665,437.82479 c -1.75557,-5.09837 -60.73954,-171.63625 -77.117838,-217.73782 -4.56744,-12.85641 -8.076898,-23.60282 -7.798796,-23.88093 0.278102,-0.2781 29.638614,-0.71306 65.245574,-0.96657 l 64.73994,-0.46094 v 124.12519 124.12519 h -21.63845 -21.63845 z"
          id="path2453"
          transform="matrix(0.26458333,0,0,0.26458333,50.595162,42.940035)" />
    <path ftui-binding="style"
          [style]="la1_AB3:relay_0 | map('on: ´#FFBF00´, off: ´#000000´') | prepend('fill:') | append(';fill-opacity:1;stroke:#000000;stroke-width:1.15396;')"
          d="M 263.37367,319.03512 V 195.04133 l 45.02695,0.11882 c 24.76482,0.0654 54.25458,0.37081 65.5328,0.6788 l 20.50586,0.55998 -15.58674,44.34814 c -8.5727,24.39148 -28.16338,79.88323 -43.53485,123.31499 l -27.94812,78.96685 h -21.99795 -21.99795 z"
          id="path2455"
          transform="matrix(0.26458333,0,0,0.26458333,50.595162,42.940035)" /></g>
    </svg>
</ftui-grid-tile>

Aber abgesehen von der Tatsache, dass ich jetzt natürlich (noch) nichts umschalten kann, funktioniert es leider noch immer nicht so wie gewünscht.
Es wird zwar jetzt nur die schwarze Fläche farblich geändert, aber die Lampe fehlt komplett.
Manuell geschaltet sieht das SVG im An-/Aus-Zustand so aus wie im Anhang zu sehen.

[DocCyber]

Ich fand all die vorgeschlagenen Lösungen zu kompliziert und dachte, es muss doch eine einfachere Lösung geben.

Tatsächlich habe ich mit Hilfe dieser Quelle eine Lösung gefunden, die ich gern mit euch teile.

So geht es bei mir:
1. In der SVG-Datei wird im Pfad für die unveränderliche Farbfläche fill:#xxxxxx aus dem style entfernt:
   style="fill:#000000;fill-opacity:0.6;stroke-width:0.326751"

2. Im selben Pfad wird die ID geändert; in meinem Fall habe ich id="fixedColor" gewählt.

3. In der CSS-Datei icon.component.css wird ganz am Ende eingefügt:    #fixedColor { fill: #abcdef !important; }
   Das legt die unveränderliche Farbe fest - hier mal baby-blau 
 

Code Auswählen Erweitern

<path
style="fill-opacity:1;stroke-width:0.326751"
d="m 94.104071,188.45682 -2.725605,-4.47228 -3.815865,-0.14689 c -4.585429,-0.17652 -5.947058,-0.67729 -7.177444,-2.63961 -1.028423,-1.64024 -1.028423,-2.47999 0,-4.12868 0.599219,-0.96063 1.254163,-1.48875 2.451378,-1.97672 l 1.633699,-0.66588 30.556936,0.0783 30.55695,0.0783 1.37296,0.84663 c 3.25829,2.00926 3.11958,5.59054 -0.29649,7.65503 -0.83942,0.50731 -1.65061,0.62194 -4.99227,0.70554 l -3.99,0.0998 -2.79326,4.52732 -2.79325,4.52732 -17.63107,-0.008 -17.631049,-0.008 z m -0.466082,-19.03578 c -2.990272,-0.58195 -5.64043,-2.24057 -6.965288,-4.3593 -0.884819,-1.415 -16.062596,-44.90839 -22.666602,-64.95332 l -1.790634,-5.43505 -3.770958,-0.146892 c -4.533782,-0.176605 -5.896597,-0.681437 -7.156009,-2.650798 -1.518031,-2.373771 -0.47975,-4.94359 2.492643,-6.169455 1.114052,-0.459451 2.139089,-0.580926 4.902264,-0.580926 h 3.493686 l 1.873381,-1.689269 c 7.694387,-6.938211 17.971185,-13.33215 27.327994,-17.002728 6.951895,-2.727159 11.617064,-3.841709 19.624404,-4.688459 l 1.81706,-0.19215 -1.45366,-0.356464 c -3.3278,-0.816059 -6.0987,-2.773717 -7.50553,-5.302707 -1.13815,-2.04601 -1.13834,-5.297988 -3.6e-4,-7.34467 1.06555,-1.916562 3.6979,-4.057622 6.01893,-4.895605 2.71162,-0.978992 6.60529,-0.946949 9.30048,0.07654 2.7997,1.063174 4.04927,2.007605 5.48149,4.142949 1.1189,1.668341 1.24161,2.083491 1.24161,4.201554 0,4.489468 -2.70154,7.56152 -7.90086,8.984432 l -1.85778,0.508419 2.15371,0.200933 c 15.30496,1.427898 29.78163,7.79581 43.79194,19.262953 l 4.93333,4.037834 3.85404,0.10171 c 4.16099,0.109705 4.99508,0.377916 6.60808,2.124425 1.05064,1.137602 1.05064,3.924277 0,5.061878 -1.61721,1.751072 -2.4429,2.014931 -6.63521,2.12035 l -3.88137,0.0976 -1.17185,3.868524 c -2.67766,8.839592 -22.42289,65.103352 -23.36982,66.591982 -0.92877,1.46009 -3.13925,3.09039 -5.25835,3.87819 l -1.81708,0.67552 -20.16953,0.0497 c -11.12256,0.0274 -20.78611,-0.0702 -21.544151,-0.21773 z M 108.64067,127.4306 V 94.526478 H 91.157875 c -13.835377,0 -17.447037,0.07662 -17.3114,0.367234 0.09423,0.201978 5.026485,14.116448 10.960468,30.921058 5.933995,16.80459 11.114454,31.4462 11.512148,32.53687 l 0.723086,1.98307 h 5.799253 5.79924 z m 34.95359,0.14689 c 6.34662,-17.93569 11.54476,-32.709483 11.55142,-32.830669 0.007,-0.121186 -7.83767,-0.220343 -17.43182,-0.220343 h -17.44391 v 32.911392 32.91139 l 5.89249,-0.0807 5.89251,-0.0807 z"

id="fixedColor" />


<path
style="fill:#000000;fill-opacity:1;stroke:#000000;stroke-width:1.15396"
d="m 173.95665,437.82479 c -1.75557,-5.09837 -60.73954,-171.63625 -77.117838,-217.73782 -4.56744,-12.85641 -8.076898,-23.60282 -7.798796,-23.88093 0.278102,-0.2781 29.638614,-0.71306 65.245574,-0.96657 l 64.73994,-0.46094 v 124.12519 124.12519 h -21.63845 -21.63845 z"
id="path2453"
transform="matrix(0.26458333,0,0,0.26458333,50.595162,42.940035)" />

<path
style="fill:#000000;fill-opacity:1;stroke:#000000;stroke-width:1.15396"
d="M 263.37367,319.03512 V 195.04133 l 45.02695,0.11882 c 24.76482,0.0654 54.25458,0.37081 65.5328,0.6788 l 20.50586,0.55998 -15.58674,44.34814 c -8.5727,24.39148 -28.16338,79.88323 -43.53485,123.31499 l -27.94812,78.96685 h -21.99795 -21.99795 z"
id="path2455"
transform="matrix(0.26458333,0,0,0.26458333,50.595162,42.940035)" />



Die Einbindung der SVG in <ftui-icon> bleibt dabei genau so wie gewohnt. So hatte ich mir das vorgestellt.
Wenn es noch besser geht, freue ich mich über Vorschläge.

Vielleicht kann der eine oder andere auch schon jetzt einen Nutzen aus dieser Lösung ziehen.

[setstate]

es geht auch ohne Änderungen am SVG. Nur per Style-Tag in der HTML-Seite direkt. Ich empfehle, die *.component.css nicht zu verändern.

Code Auswählen Erweitern

  <style>
    .on svg#svg5 path:nth-of-type(2),
    .on svg#svg5 path:nth-of-type(3) {
      fill: #ee2 !important;
    }
  </style>
</head>

<body>
  <ftui-button [(value)]="local:test">on,off</ftui-button>
  <ftui-icon [class-name]="local:test">
    <svg id="svg5"
...

[DocCyber]

es geht auch ohne Änderungen am SVG

Ich muss aber doch festlegen, welche Flächen nicht geändert werden sollen.
Wo soll ich das machen, wenn nicht im SVG?
Ich vermute daher, du meinst es geht auch ohne Änderungen der CSS.

Davon abgesehen: Ja, dein Vorschlag ist eine Möglichkeit, aber ich finde ihn nicht besonders gut, weil umständlich.
Denn dafür benötigt man zusätzlich einen Button als class-changer und außerdem noch eine relativ komplexe Style-Definition.

Was spricht degegen, meine vorgeschlagene Änderung grundsätzlich in die icon.component.css aufzunehmen, ggf. noch etwas spezifischer?
Ich finde, das ist kürzer und viel einfacher.

[yersinia]

es geht auch ohne Änderungen am SVG

Ich muss aber doch festlegen, welche Flächen nicht geändert werden sollen.
Wo soll ich das machen, wenn nicht im SVG?

In deinem konkreten Fall genau so:

Code Auswählen Erweitern

  <style>
    .on svg#svg5 path:nth-of-type(2),
    .on svg#svg5 path:nth-of-type(3) {
      fill: #ee2 !important;
    }
  </style>Da wird über die Zuweisung der Style des HTML Elements angepasst. Für die verschiedenen Variationen und Hierarchien solltest du dich mehr mit der CSS Struktur beschäftigen.

Ich vermute daher, du meinst es geht auch ohne Änderungen der CSS.

Das ist leider nicht spezifisch genug; wie du CSS einbindest ist dir ja überlassen. Via icon.component.css ist ein machbarer, aber im Verhältnis zu den Alternativen Lösungsoptionen, eher schlechter Weg - insb weil dies via update überschrieben werden kann.

Denn dafür benötigt man zusätzlich einen Button als class-changer und außerdem noch eine relativ komplexe Style-Definition.

Eigtl mMn nicht. Du benötigst ein Event aus FHEM und kannst via ftui-binding auf dieses Event reagieren. Das ist ja die großartige, extrem flexible (dadurch auch aber auch schnell Komplexe) Lösung (vulgo heißer Scheiß) von FTUI3.

Was spricht degegen, meine vorgeschlagene Änderung grundsätzlich in die icon.component.css aufzunehmen, ggf. noch etwas spezifischer?
Ich finde, das ist kürzer und viel einfacher.

Es passt für dich und deinen Anwendungsfall und ist daher wenig flexibel und für andere Anwender ggf unpassend. Zumal die Änderung regelmässig über update überschrieben werden würde - und: es geht auch über andere, bereits implementierte Funktionen/Features.

EDIT:
Generell musst du, wenn du das svg baust, definieren, welche styles du vordefinierst und welche du von außen (also das Elternelement der svg) beeinflusst haben willst. CSS bietet hier mehrere Lösungen - und du hast ein für dich gut funktionierende gefunden.

[DocCyber]

für andere Anwender ggf unpassend.

Passend für jeden, der fixedColor verwenden möchte, aber für alle anderen nicht störend.

Zumal die Änderung regelmässig über update überschrieben werden würde

Ja, sofern es nicht generell eingebaut würde.

es geht auch über andere, bereits implementierte Funktionen/Features.

aber nicht besonders gut, finde ich.


Ich möchte nicht den Eindruck erwecken, als sei ich mit FTUI-3 unzufrieden.
Im Gegenteil - ich finde es super, was Mario (setstate) hier kreiert hat. Die Vorläufer-Version war schon gut, aber FTUI-3 ist hervorragend.

Der Teufel steckt aber oft im Detail, und die hier diskutierte Detaillösung gefällt mir aus den genannten Gründen nicht besonders.
Deshalb bleibe ich zunächst bei meiner Lösung.


Wie auch immer: ich möchte das Thema hier nicht weiter vertiefen und danke euch für euren Input.