I'm creating a business dashboard. The software I'm using can display SVGs that can change in colour depending on criteria set by the user, which it does by modifying the fill of whichever object in the SVG has it's metadata ID value set as "shape1" as shown below:

In this example, the black circle will change colour

In this example the black circle will change colour. But I'm trying to use this feature with images with multiple colours, for example the flag, which I would set to all white if that country wasn't selected by the user. I've tried using an SVG image and setting the ID value of the root group of the objects, and also using an imported png for the flag instead and changing image ID. I also tried adding a "fill" attribute to the flag image/group for which didn't work.

However, I did manage to accidentally create an SVG composed of 2 different coloured shapes which can become one block colour in the dashboard software as I desired. I think it was down to the "fill-rule" style attribute:

enter image description here

Here the black circle changes as expected and applies the changes to the rectangle too. Is there any way I can get this to work with more complex shapes / non-svg images like the flag? Thanks in advance!

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.