Is there a way to apply CSS to grouped object?

[gitmirko]

Hi,
I have the following setup working:

• one light is mapped to one circle on the svg and I can apply on and off CSS classes.

Is there a way to get the following scenario working:

• one light mapped to a grouped object (multiple circles -> a circle is one led spot) in the svg?

On the left the working setup and on the right the scenario that I'm trying to get working:

Best regards
Mirko

[OzGav]

Yes I am pretty sure I have done this. Just use SHIFT-click to select the multiple circles and then GROUP them together and then assign the entity name to the group. Edit: I use Inkscape.

[exetico]

You can define multiple SVG elements for a specific rule. I guess that's what you're asking for, right?

If so, check this out:
#28 (comment)

Else... Have you grouped some elements in the SVG file, or? If so, it's just a question about using a CSS rule for the elements below the group ID, and add/remove classes to the SVG group-element.

[gitmirko]

Thank you. Now it works:

          rules:
            - entity: light.esstisch
              elements:
                - light.esstisch1
                - light.esstisch2
              state_action:
                action: call-service
                service: floorplan.class_set
                service_data: 'light-${entity.state}'