Streaming live at 10am (PST)

Change SVG object colour based on CMS item value

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:

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">
	.st1{fill:#624B2D; transition: all 500ms}
  .st1[data-status='Under Contract']{fill:orange;}

This is an HTML embed inside the collection list item.

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

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.