How can I pass CSS variables to the body of the SVG?

Third party integrations Floorplan
1

Is it possible to set css variables (using card-mod?) and use these css variables in the SVG body?

Example:

type: picture-elements
title: Heating Circuit
image:
  media_content_id: /local/heating-circuit/heating-circuit.svg
elements:
  - type: state-badge
    entity: binary_sensor.call_for_heat_ashp
    style:
      top: 385px
      left: 412px
card_mod:
  style: |
    ha-card {
      --living-room-color: {% if state_attr("climate.living_room", "hvac_action") == "heating" %} red  {% else %} green {% endif %};
    }

In the SVG, something like this:

<path
  d="m2.5 8.4998h2.5c0.52382 0 1.0231-0.46024 1-1-0.02315-0.5414-0.44101-1-1-1h-2.5c-0.52382 0-1.0231 0.46024-1 1 0.02315 0.5414 0.44101 1 1 1z"
  fill="var(--living-room-color, #2d3142)" />

I've been trying to make it work for days.
This is a simplified example. I'd change the color of lots of elements in the SVG (texts, paths, etc).
My use case is like an electronic circuit which would have wires and elements changing colours according to the states of associated entities.

Thanks for your help.

2

Only an inline svg can directly use CSS vars. However you can use currentColor in the SVG and then define color in plain CSS. However I don't think this will suit your use case as you won't multiple colors in the one SVG.