I haven't done it, but a quick look at the structure suggests that you need to expand each element and look for the stopColor
value or the fill
value. You then need to create a binding on each of these. Note that any gradient fills probably have at least three stops.
To prevent early onset madness, I suggest that you define the colors for each state as a session variable so that the color definitions can easily be redefined without having to revisit every valve. Something like:
- Then put a custom prop on the valve. e.g. 'colorPalette'.
- Add an expression binding to it to return the
{session.custom.valvePalette.open}
object when the valve is 'open', etc. - Create a Property Binding on each of the pump SVG colors to the appropriate value. e.g.,
this.custom.colorPalette.solid
It's a bit of work but you only need to do it once.
Further reading.