Color from embedded SVG dont change / solved

[jressel01]

Hi,
i start to Transfer from old to new floorplan.
I have a svg File for cover this works. But the color change dont work. It was black.

                    - name: Cover
                      entities:
                        - cover.arbeitszimmer_rollo
                      state_action:
                        - service: floorplan.class_set
                          service_data:
                            class: |
                              >
                                var temp = entity.attributes.current_position; if (temp < 1) return "cover-close"; else if (temp > 99) return "cover-open"; else return "cover-move";
                        - service: floorplan.image_set
                          service_data: |
                            >
                              var imageName = "";  var temp =
                              entity.attributes.current_position; if (temp < 1)
                              return "/local/floorplan/images/" +
                              "window-shutter-0" + ".svg"; else if (temp >= 1 &&
                              temp <= 35) return "/local/floorplan/images/" +
                              "window-shutter-25" + ".svg"; else if (temp >= 75 &&
                              temp <= 98) return "/local/floorplan/images/" +
                              "window-shutter-75" + ".svg"; else if (temp > 99)
                              return "/local/floorplan/images/" +
                              "window-shutter-100" + ".svg"; else return
                              "/local/floorplan/images/" + "window-shutter-50" + ".svg"; 

CSS:

/* Cover */
.cover-open,
.cover-open * {
  fill: #FF0000 !important;
  stroke: #FF0000 !important;
  stroke-opacity: 0.1 !important;
  transition: fill 1s ease;
}
.cover-move,
.cover-move * {
  fill: #FFBF00 !important;
  stroke: #FFBF00 !important;
  stroke-width: 1px !important;
  stroke-opacity: 1 !important;
}
.cover-close,
.cover-close *{
  fill: #00FF00 !important;
  stroke: #00FF00 !important;
  stroke-opacity: 0.1 !important;
  transition: fill 1s ease;
}

[jressel01]

if i with developer tools i find this:

<svg xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" version="1.1" width="8.720733642578125" height="8.720726013183594" viewBox="0 0 35 35" id="cover.arbeitszimmer_rollo" sodipodi:docname="window-shutter-60.svg" inkscape:version="1.0.1 (3bc2e813f5, 2020-09-07)" preserveAspectRatio="xMinYMin meet" x="143.23733520507812" y="48.237632751464844" style="cursor: pointer;" class="floorplan-click floorplan-hover">
  <metadata id="metadata10">
    <rdf:rdf>
      <cc:work rdf:about="">
        <dc:format>image/svg+xml</dc:format>
        <dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage"></dc:type>
        <dc:title></dc:title>
      </cc:work>
    </rdf:rdf>
  </metadata>
  <defs id="defs8"></defs>
  <sodipodi:namedview pagecolor="#ffffff" bordercolor="#666666" borderopacity="1" objecttolerance="10" gridtolerance="10" guidetolerance="10" inkscape:pageopacity="0" inkscape:pageshadow="2" inkscape:window-width="2560" inkscape:window-height="1361" id="namedview6" showgrid="false" units="px" inkscape:zoom="29.698485" inkscape:cx="12" inkscape:cy="16.04061" inkscape:window-x="-9" inkscape:window-y="-9" inkscape:window-maximized="1" inkscape:current-layer="svg4"></sodipodi:namedview>
  <path d="m 3,4 h 28.57293 v 6.34954 H 28.39816 V 29.39816 H 25.22339 V 10.34954 H 9.34954 V 29.39816 H 6.17477 V 10.34954 H 3 V 4 m 7.936925,7.936925 h 12.69908 v 3.17477 h -12.69908 v -3.17477" id="path2" style="stroke-width:1.58738" sodipodi:nodetypes="cccccccccccccccccc"></path>

the svg get class="floorplan-click floorplan-hover"

[pkozul]

Hi @jressel01

I think I know why the styles are not being applied to your SVG images that are being swapped in/out for your cover entity.

The floorplan.image_set service can take much longer to do its work than the other floorplan services (due to image being fetched by your browser). In your case, I believe the floorplan.class_set is being performed before the new SVG image is loaded, so the newly-loaded SVG image never has any classes added to it.

Can you try this? Add a new <g> element to act as a container for your existing element used for loading the SVG images.

Then change your floorplan rule so that the target of floorplan.class_set is this new container. Since the container will always be there, the classes/styles that you set will not be removed, even though the nested SVG images will be swapped out when the state changes.

Let us know how you go.

[jressel01]

Hi
i try it but my svg is a litte diffrent.
´´´
<rect
id="cover.arbeitszimmer_rollo.container"

inkscape:label="cover.arbeitszimmer_rollo.container" />
´´´
now i have the color but it dont load the svg file inside
i add my files for a better view.

with the old Floorplan all work but now i Have the Problem wit the Cover and the color for the Trash pics.

This was with the old Floorplan.

[jressel01]

i search a little and i think its in the Funktion .image_set. If it adds an SVG File all time it was class="floorplan-click"
after change with the debugger the class it shows the color

[jressel01]

today i try it again with:

    <g
      id="cover.arbeitszimmer_rollo.container"
      inkscape:label="cover.arbeitszimmer_rollo.container">
      <rect
         style="display:inline;fill:#d6d6d6;stroke:#000000;stroke-width:0.539689"
         id="cover.arbeitszimmer_rollo"
         width="8.7207279"
         height="8.7207279"
         x="143.23734"
         y="48.237633"
         inkscape:label="cover.arbeitszimmer_rollo" />
    </g>

                        - service: floorplan.class_set
                          service_data:
                            element: cover.arbeitszimmer_rollo.container
                            class: |
                              >
                                var temp = entity.attributes.current_position; if (temp < 1) return "cover-close"; else if (temp > 99) return "cover-open"; else return "cover-move";

and it works.
thx