Some objects of svg with clip path are not shown in Home Assistant floorplan card

I’m trying to make a floorplan card of a car that shows the state of doors, trunk, charging ports, etc., dynamically.

I took the “base” image of the car, and cropped a bunch of parts (basically the parts showing each door or port open) and threw them in a layer above the “base”.

I then wanted to dynamically show them when a door, port, etc. was open. But for whatever reason, none of the “parts” show up in the lovelace card.

While troubleshooting, I completely removed all conditions concerning the “parts”, and saw the they still didn’t show up. Nothing that has a clip-path set is shown. As it took forever to very exactly “set clip” to get all the exact shapes of all the combinations of ports an doors, I’d really appreciate any ideas about how to solve this using the clipped images.

This is what I see in inkscape:

But this is what I see in HA UI:

Even when I don’t reference the objects at all in HA. Obviously a work in progress, if relevant you can see the full *.svg file here: GitHub - Aephir/ha-tesla-lovelace-floorplan

EDIT: It seems to be related to “clipped” objects (maybe objects that were “clipped” twice?). I’ve added an issue at the ha-floorplan repo.

1 Like

Did you solve it? I have the same behavior…

With this:

Not exactly, but maybe somewhat of an explanation (see github issue I referenced).

Short answer: It seems to be a browser issue, and the only workaround I found that worked was to create bitmap copies.

1 Like