Streaming live at 10am (PST)

Change SVG object colour based on CMS item value

TL:DR
How do I use CMS collection data to change the colour of SVG objects when these objects are outside the collection list?

Rough prototype:
Read-Only: Webflow - Clickable allotments
Published link: https://clickable-allotments.webflow.io/

The long version
I’m trying to create a clickable allotment map for a real estate development.

The allotment map will be an SVG image, and I want my client to be able to manage the status of each allotment themselves via the CMS. The statuses are sold (red), under contract (orange) and available (green).

I want the allotment colour on the SVG image to change based on the value of the ‘status’ field and have the allotment be clickable through to the CMS item page.

I have built a CMS collection list (called allotment) and am using the below CSS and Javascript to change the colours.

<style type="text/css">
	.st0{fill:#F4EADB;}
	.st1{fill:#624B2D; transition: all 500ms}
	.st1[data-status='Sold']{fill:red;}
  .st1[data-status='Under Contract']{fill:orange;}
	.st1:hover{fill:#F4EADB;}
</style>

This is an HTML embed inside the collection list item.

<script>
  var element = document.getElementById("Name");
  element.setAttribute('data-status', "Status")
  element.parentElement.setAttribute('href', '/allotments/Slug');
</script>

The issue with this approach is the script block in every CMS is really clunky and not best practice. Is there a better way to go?


You can grab a color from CMS and set it as text color and then apply it to SVG by “fill:currentColor”.

Thanks Piotr.

I am not sure how to implement this in my scenario. I gave it a go, but the colours didn’t display and the box showed as black.

I have updated the question above to hopefully give some more clarity.