Change Symbol color

Hi,

I have imported the "Heat Exchanger 3" symbol from Symbol Factory into Ignition Perspective. The symbol consists of over 56 elements, each using the stopColor property for gradients.

I want to dynamically change the pipe color based on temperature increase. What is the best way to update the color for the entire symbol at once, without modifying each element individually?

Thanks in advance!

I know that this is about Perspective, but perhaps this video on a similar topic in Vision could spark some ideas? Not sure if this is helpful or not, but I thought I'd share in case it gave you an idea for a direction to take this in Perspective.

Color SVG Dynamically Video at Inductive University

I believe what I've done in the past was to create a union of all the paths (this may have been in Vision). This unioned path is in front of the graphic and then just set its full color to a solid color with some transparency to your liking. This keeps the gradients and everything from the base image but adds color to it all

That's how I do it too with SVGs. I'll generally make a "color overlay" element which is just a cleaned up union of the entire drawing (deleting excessive nodes) and I'll color that with a translucent fill color.

It's good to name your overlay so you can search for it in the UI.

I don't know how that would work with this particular object because it's an image library resource. This drawing could be done with all CSS using a bunch of labels.

It might be worth it to draw your own in inkscape so you can optimize it and have an overlay. Here's the harder part of it so you can make the full thing if that's the direction you're trying to go. This section is only 2k with a color overlay. That would multiply as you add sections.

HX-section-optimized