Icons moving once config added

[instakill-sec]

I am having an issue where after i create my SVG and add a config to one of the lamps, it moves the icon to the top left and makes it larger (seems to do this with any of the icons). I can not work out why it is doing it.
This is a screenshot of my SVG in inkspace

And this is it within HA once i add code to the lamp from the bottom right room

This is the config i have created:

type: 'custom:floorplan-card'
config:
  image: /local/floorplan/home/floorplan.svg
  stylesheet: /local/floorplan/home/floorplan.css
  log_level: info
  console_log_level: info
  full_height: true
  defaults:
    hover_action: hover-info
    tap_action: more-info
  rules:
    - entities:
        - light.ac_lamp
      state_action:
        action: call-service
        service: floorplan.image_set
        service_data: '/local/floorplan/lamp_${entity.state}.svg'
      tap_action: toggle

This is a zip of my SVG's and the css
hafloorplan.zip
Any help would be appreciated.
Thanks

[pkozul]

Hi @instakill-sec

I tried your SVG, and got it working.

I simply moved the ID from the parent 'layer' (i.e. <g> element) down to the child 'layer' (i.e. <image> element).

Before:

After:

You can make that change in a text editor rather than loading it into Inkscape.

I think the issue is due to the parent layer having a transform applied to it, which seems to get in the way. So by moving the ID down to the <image>, floorplan swaps out the images without worrying about the transform which is being performed at the parent <g> element.

Let us know how you go.

[instakill-sec]

That worked! Thank you so much, you would not believe how much time i spent trying to fix that yesterday.

[pkozul]

@instakill-sec

Yay! Great to hear. Thanks for confirming.