How to make SVG click area does not same as the light-effect area

[FaintGhost]

Hi, sorry for the dumb question, I really don't know how to implement this scene.
For example, the SVG file actually have more than two elements in a room, one is a transparent square to click, another are the light-effects pics to cover the different area of the room.

I saw the example code:

title: Floorplanner Home
config:
  image: /local/floorplan/examples/floorplanner_home/floorplanner_home.svg
  stylesheet: /local/floorplan/examples/floorplanner_home/floorplanner_home.css

  defaults:
      hover_action: hover-info
      tap_action: more-info

  rules:
    - name: Rooms
      entities:
        - entity: light.udestue 
          element: area.udestue
        - entity: light.restroom 
          element: area.restroom
        - entity: light.kitchen 
          element: area.kitchen
        - entity: light.guestroom 
          element: area.guestroom
        - entity: light.livingroom
          element: area.livingroom
        - entity: light.office
          element: area.office
        - entity: light.hallway 
          element: area.hallway
        - entity: light.guesttoilet 
          element: area.guesttoilet
        - entity: light.bedroom 
          element: area.bedroom
      tap_action: light.toggle
      state_action:
        service: floorplan.class_set
        service_data: '${(entity.state === "on") ? "light-on" : "light-off"}'

it seems every area matched just one light.

[OzGav]

I think I might have just answered this in another post #177 (reply in thread)

[OzGav]

just checking if this has been answered for you? If so it would be great if you could mark it as such. Happy new Year!

[FaintGhost]

Happy new Year! Sorry for the late reply, I took the time to read some of your discussions and answers. Finally I found the solution!

type: custom:floorplan-card
full_height: true
config:
  image: /local/floorplan/light_stable.svg
  stylesheet: /local/floorplan/floorplan.css
  cache: true
  defaults:
    hover_action: hover-info
    tap_action: more-info
  rules:
    - entity: light.yeelink_ceiling17_f338_light
      tap_action: light.toggle
      state_action:
        service: floorplan.class_set
        service_data:
          element: area.bedroom1
          class: '${(entity.state === "on") ? "light-on" : "light-off"}'
    - entity: light.yeelink_ceiling17_03ab_light
      tap_action: light.toggle
      state_action:
        service: floorplan.class_set
        service_data:
          element: area.bedroom2
          class: '${(entity.state === "on") ? "light-on" : "light-off"}'

trick is make the SVG object id same as the HA entity id! Thank you! @OzGav