SVG is driving me mad - doesn't display correctly

Heyho everyone. I hope someone can help me out.
I’m using HA with Floorplan and I have designed an SVG with a background image and icons for lights, covers, switches and text elemnts for displaying temps.
In CSS i have defined rules for coloring etc.
Somehow the SVG isn’t rendered correctly, no matter what I do (have a look at the attached screenshot.
You’ll also find attached my floorplan YAML and the floorplan CSS.

I hope someone can point me to the error I’ve got in there.

I have tried most everthing - but I’m not an expert by a far cry.

Weirdly enough: all icons are hoverable (mouse arrow turns to hand), but only one (the lower left one below “Essen”) is clickable and shows a popup to control the light.

my CSS looks like this:
/* General transition and hover effect /
use {
color: black
transition: transform 0.3s ease, filter 0.3s ease;
transform-origin: center;
pointer-events: all;
cursor: pointer;
}
text {
color: black;
font-family: sans-serif;
font-size: 16px;
}
/ Pulsating animation /
@keyframes pulsing {
0% { fill-opacity: 1; }
50% { fill-opacity: 0.4; }
100% { fill-opacity: 1; }
}
/ Colour rules for switches /
.door-open {
color: red;
fill-opacity: 0.6;
}
.door-closed {
color: green;
fill-opacity: 0.6;
}
/ Colour rules for lights /
.light-on {
color: yellow;
fill-opacity: 0.6;
}
.light-off {
color: grey;
fill-opacity: 0.6;
}
/ Colour rules for covers /
.cover-open {
color: green;
fill-opacity: 1;
}
.cover-closed {
color: gray;
fill-opacity: 0.6;
}
.cover-opening {
color: orange;
fill-opacity: 1;
animation: pulsing 1s infinite;
}
.cover-closing {
color: blue;
fill-opacity: 1;
animation: pulsing 1s infinite;
}
/ Colour rules for CO2-sensor */
.co2-low {
color: green;
}
.co2-mid {
color: orange;
}
.co2-high {
color: red;
font-weight: bold;
}

and the yaml like this (note: both views show the same thing as in the screenshot).
views:

• title: Floorplan Test
  path: floorplan-test
  type: panel
  cards:
  • type: custom:floorplan-card
    full_height: true
    config:
    image: /local/floorplan/eg-test.svg
    stylesheet: /local/floorplan/floorplan.css
    console_log_level: info
    defaults:
    hover_action: hover-info
    tap_action: more-info
    rules:
    - entity: light.licht_eg_essen
    use_template: |
    if (entity.state === ‘on’) return ‘#light-on’;
    else return ‘#light-off’;
    - entity: switch.kontakt_fensterkontakt_eg_kueche
    use_template: |
    if (entity.state === ‘on’) return ‘#door-open’;
    else return ‘#door-closed’;
    - entity: cover.jalousie_eg_kueche
    use_template: |
    if (entity.state === ‘opening’) return ‘#cover-opening’;
    else if (entity.state === ‘closing’) return ‘#cover-closing’;
    else if (entity.state === ‘open’) return ‘#cover-open’;
    else return ‘#cover-closed’;
    - entity: sensor.sensor_eg_co2
    text_template: |
    return ${entity.state} ppm;
    class_template: |
    const val = parseInt(entity.state);
    if (val < 700) return ‘co2-low’;
    else if (val <= 1100) return ‘co2-mid’;
    else return ‘co2-high’;
• title: Erdgeschoss
  type: panel
  path: erdgeschoss
  cards:
  • type: custom:floorplan-card
    full_height: true
    config:
    image: /local/floorplan/eg-test.svg
    stylesheet: /local/floorplan/floorplan.css
    console_log_level: info
    defaults:
    hover_action: hover-info
    tap_action: more-info
    rules:
    - entity: light.licht_ug_alice
    use_template: >-
    if (entity.state === ‘on’) return ‘#light-on’; else return
    ‘#light-off’;
    - entity: light.licht_ug_werkstatt
    use_template: >-
    if (entity.state === ‘on’) return ‘#light-on’; else return
    ‘#light-off’;
    - entity: light.licht_ug_kino
    use_template: >-
    if (entity.state === ‘on’) return ‘#light-on’; else return
    ‘#light-off’;
    - entity: light.licht_ug_foyer
    use_template: >-
    if (entity.state === ‘on’) return ‘#light-on’; else return
    ‘#light-off’;
    - entity: light.licht_ug_technik
    use_template: >-
    if (entity.state === ‘on’) return ‘#light-on’; else return
    ‘#light-off’;
    - entity: light.licht_eg_reduit
    use_template: >-
    if (entity.state === ‘on’) return ‘#light-on’; else return
    ‘#light-off’;
    - entity: light.licht_og_bad_spiegelschrank
    use_template: >-
    if (entity.state === ‘on’) return ‘#light-on’; else return
    ‘#light-off’;
    - entity: light.licht_ug_treppe_ug
    use_template: >-
    if (entity.state === ‘on’) return ‘#light-on’; else return
    ‘#light-off’;
    - entity: light.licht_ug_ug_gang
    use_template: >-
    if (entity.state === ‘on’) return ‘#light-on’; else return
    ‘#light-off’;
    - entity: light.licht_eg_eingang
    use_template: >-
    if (entity.state === ‘on’) return ‘#light-on’; else return
    ‘#light-off’;
    - entity: light.licht_eg_vorplatz
    use_template: >-
    if (entity.state === ‘on’) return ‘#light-on’; else return
    ‘#light-off’;
    - entity: light.licht_eg_essen
    use_template: >-
    if (entity.state === ‘on’) return ‘#light-on’; else return
    ‘#light-off’;
    - entity: light.licht_eg_kueche
    use_template: >-
    if (entity.state === ‘on’) return ‘#light-on’; else return
    ‘#light-off’;
    - entity: light.licht_eg_wohnen
    use_template: >-
    if (entity.state === ‘on’) return ‘#light-on’; else return
    ‘#light-off’;
    - entity: light.licht_eg_terrasse
    use_template: >-
    if (entity.state === ‘on’) return ‘#light-on’; else return
    ‘#light-off’;
    - entity: light.licht_eg_gaeste_wc
    use_template: >-
    if (entity.state === ‘on’) return ‘#light-on’; else return
    ‘#light-off’;
    - entity: light.licht_og_eltern
    use_template: >-
    if (entity.state === ‘on’) return ‘#light-on’; else return
    ‘#light-off’;
    - entity: light.licht_og_ranya
    use_template: >-
    if (entity.state === ‘on’) return ‘#light-on’; else return
    ‘#light-off’;
    - entity: light.licht_og_samy
    use_template: >-
    if (entity.state === ‘on’) return ‘#light-on’; else return
    ‘#light-off’;
    - entity: light.licht_og_bad_dusche
    use_template: >-
    if (entity.state === ‘on’) return ‘#light-on’; else return
    ‘#light-off’;
    - entity: light.licht_og_bad_wc
    use_template: >-
    if (entity.state === ‘on’) return ‘#light-on’; else return
    ‘#light-off’;
    - entity: light.licht_og_bad_badewanne
    use_template: >-
    if (entity.state === ‘on’) return ‘#light-on’; else return
    ‘#light-off’;
    - entity: light.licht_og_bad_spiegelschrank
    use_template: >-
    if (entity.state === ‘on’) return ‘#light-on’; else return
    ‘#light-off’;
    - entity: light.licht_og_og_gang
    use_template: >-
    if (entity.state === ‘on’) return ‘#light-on’; else return
    ‘#light-off’;
    - entity: switch.kontakt_tuerkontakt_ug_alice
    use_template: >-
    if (entity.state === ‘on’) return ‘#switch-on’; else return
    ‘#switch-off’;
    - entity: switch.kontakt_fensterkontakt_ug_werkstatt
    use_template: >-
    if (entity.state === ‘on’) return ‘#switch-on’; else return
    ‘#switch-off’;
    - entity: switch.kontakt_fensterkontakt_eg_wohnen
    use_template: >-
    if (entity.state === ‘on’) return ‘#switch-on’; else return
    ‘#switch-off’;
    - entity: switch.kontakt_tuerkontakt_eg_wohnen
    use_template: >-
    if (entity.state === ‘on’) return ‘#switch-on’; else return
    ‘#switch-off’;
    - entity: switch.kontakt_tuerkontakt_eg_essen
    use_template: >-
    if (entity.state === ‘on’) return ‘#switch-on’; else return
    ‘#switch-off’;
    - entity: switch.kontakt_fensterkontakt_eg_essen
    use_template: >-
    if (entity.state === ‘on’) return ‘#switch-on’; else return
    ‘#switch-off’;
    - entity: switch.kontakt_fensterkontakt_eg_kueche
    use_template: >-
    if (entity.state === ‘on’) return ‘#switch-on’; else return
    ‘#switch-off’;
    - entity: switch.kontakt_fensterkontakt_eg_gaeste_wc
    use_template: >-
    if (entity.state === ‘on’) return ‘#switch-on’; else return
    ‘#switch-off’;
    - entity: switch.kontakt_fensterkontakt_treppe
    use_template: >-
    if (entity.state === ‘on’) return ‘#switch-on’; else return
    ‘#switch-off’;
    - entity: switch.kontakt_fensterkontakt_og_eltern_gross
    use_template: >-
    if (entity.state === ‘on’) return ‘#switch-on’; else return
    ‘#switch-off’;
    - entity: switch.kontakt_fensterkontakt_og_eltern_klein
    use_template: >-
    if (entity.state === ‘on’) return ‘#switch-on’; else return
    ‘#switch-off’;
    - entity: switch.kontakt_fensterkontakt_og_ranya_gross
    use_template: >-
    if (entity.state === ‘on’) return ‘#switch-on’; else return
    ‘#switch-off’;
    - entity: switch.kontakt_fensterkontakt_og_ranya_klein
    use_template: >-
    if (entity.state === ‘on’) return ‘#switch-on’; else return
    ‘#switch-off’;
    - entity: switch.kontakt_fensterkontakt_og_samy_gross
    use_template: >-
    if (entity.state === ‘on’) return ‘#switch-on’; else return
    ‘#switch-off’;
    - entity: switch.kontakt_fensterkontakt_og_samy_klein
    use_template: >-
    if (entity.state === ‘on’) return ‘#switch-on’; else return
    ‘#switch-off’;
    - entity: switch.kontakt_fensterkontakt_og_bad
    use_template: >-
    if (entity.state === ‘on’) return ‘#switch-on’; else return
    ‘#switch-off’;
    - entity: switch.kontakt_steckdose_eg_wohnen
    use_template: >-
    if (entity.state === ‘on’) return ‘#switch-on’; else return
    ‘#switch-off’;
    - entity: switch.kontakt_steckdose_eg_eingang
    use_template: >-
    if (entity.state === ‘on’) return ‘#switch-on’; else return
    ‘#switch-off’;
    - entity: cover.jalousie_ug_alice
    use_template: |-
    if (entity.state === ‘opening’) return ‘#cover-opening’;
    else if (entity.state === ‘closing’) return ‘#cover-closing’;
    else if (entity.state === ‘open’) return ‘#cover-open’;
    else return ‘#cover-closed’;
    - entity: cover.jalousie_ug_werkstatt
    use_template: |-
    if (entity.state === ‘opening’) return ‘#cover-opening’;
    else if (entity.state === ‘closing’) return ‘#cover-closing’;
    else if (entity.state === ‘open’) return ‘#cover-open’;
    else return ‘#cover-closed’;
    - entity: cover.jalousie_eg_kueche
    use_template: |-
    if (entity.state === ‘opening’) return ‘#cover-opening’;
    else if (entity.state === ‘closing’) return ‘#cover-closing’;
    else if (entity.state === ‘open’) return ‘#cover-open’;
    else return ‘#cover-closed’;
    - entity: cover.jalousie_eg_garten
    use_template: |-
    if (entity.state === ‘opening’) return ‘#cover-opening’;
    else if (entity.state === ‘closing’) return ‘#cover-closing’;
    else if (entity.state === ‘open’) return ‘#cover-open’;
    else return ‘#cover-closed’;
    - entity: cover.jalousie_eg_terrasse_essen
    use_template: |-
    if (entity.state === ‘opening’) return ‘#cover-opening’;
    else if (entity.state === ‘closing’) return ‘#cover-closing’;
    else if (entity.state === ‘open’) return ‘#cover-open’;
    else return ‘#cover-closed’;
    - entity: cover.jalousie_eg_terrasse_wohnen
    use_template: |-
    if (entity.state === ‘opening’) return ‘#cover-opening’;
    else if (entity.state === ‘closing’) return ‘#cover-closing’;
    else if (entity.state === ‘open’) return ‘#cover-open’;
    else return ‘#cover-closed’;
    - entity: cover.jalousie_eg_wohnen
    use_template: |-
    if (entity.state === ‘opening’) return ‘#cover-opening’;
    else if (entity.state === ‘closing’) return ‘#cover-closing’;
    else if (entity.state === ‘open’) return ‘#cover-open’;
    else return ‘#cover-closed’;
    - entity: cover.jalousie_eg_gaeste_wc
    use_template: |-
    if (entity.state === ‘opening’) return ‘#cover-opening’;
    else if (entity.state === ‘closing’) return ‘#cover-closing’;
    else if (entity.state === ‘open’) return ‘#cover-open’;
    else return ‘#cover-closed’;
    - entity: cover.jalousie_treppe
    use_template: |-
    if (entity.state === ‘opening’) return ‘#cover-opening’;
    else if (entity.state === ‘closing’) return ‘#cover-closing’;
    else if (entity.state === ‘open’) return ‘#cover-open’;
    else return ‘#cover-closed’;
    - entity: cover.jalousie_og_eltern_gross
    use_template: |-
    if (entity.state === ‘opening’) return ‘#cover-opening’;
    else if (entity.state === ‘closing’) return ‘#cover-closing’;
    else if (entity.state === ‘open’) return ‘#cover-open’;
    else return ‘#cover-closed’;
    - entity: cover.jalousie_og_eltern_klein
    use_template: |-
    if (entity.state === ‘opening’) return ‘#cover-opening’;
    else if (entity.state === ‘closing’) return ‘#cover-closing’;
    else if (entity.state === ‘open’) return ‘#cover-open’;
    else return ‘#cover-closed’;
    - entity: cover.jalousie_og_ranya_gross
    use_template: |-
    if (entity.state === ‘opening’) return ‘#cover-opening’;
    else if (entity.state === ‘closing’) return ‘#cover-closing’;
    else if (entity.state === ‘open’) return ‘#cover-open’;
    else return ‘#cover-closed’;
    - entity: cover.jalousie_og_ranya_klein
    use_template: |-
    if (entity.state === ‘opening’) return ‘#cover-opening’;
    else if (entity.state === ‘closing’) return ‘#cover-closing’;
    else if (entity.state === ‘open’) return ‘#cover-open’;
    else return ‘#cover-closed’;
    - entity: cover.jalousie_og_samy_gross
    use_template: |-
    if (entity.state === ‘opening’) return ‘#cover-opening’;
    else if (entity.state === ‘closing’) return ‘#cover-closing’;
    else if (entity.state === ‘open’) return ‘#cover-open’;
    else return ‘#cover-closed’;
    - entity: cover.jalousie_og_samy_klein
    use_template: |-
    if (entity.state === ‘opening’) return ‘#cover-opening’;
    else if (entity.state === ‘closing’) return ‘#cover-closing’;
    else if (entity.state === ‘open’) return ‘#cover-open’;
    else return ‘#cover-closed’;
    - entity: cover.jalousie_og_bad
    use_template: |-
    if (entity.state === ‘opening’) return ‘#cover-opening’;
    else if (entity.state === ‘closing’) return ‘#cover-closing’;
    else if (entity.state === ‘open’) return ‘#cover-open’;
    else return ‘#cover-closed’;

2 posts - 2 participants

Read full topic