SOLVED: Override / change a SVG color - dynamic

How To
1

I am wondering if this is possible…

  • Using a monocolor SVG as a site logo via ‘Logo, Image, SVG or Icon’ Element.
  • Further define a color in a CPT via Meta Box.
  • Using this (different) color for the SVG logo on different pages.

We´re already using a similar technique for all the colors via ‘Style → Attributes → style → color: {mb_projekt_color-text}’. With this every CPT / Project has a different (external / customer defined) color-scheme.

There is a ‘style: fill’ operation - but it don´t seem to work ‘that easy’.

Somebody around who done something like that?

2

Hi Sascha,

you can use the code element instead of the Logo or SVG Element to make the fill color dynamic. Please check out this screen recording: https://vimeo.com/690163577/2b27ad15db

Best regards,
timmse

3 Likes
3

Hi timmse.

Thank You so much for taking the time and capture a solution for me!

I´ve posted this task also in the FB group - where André support me with a nice solution as well. Which I´ve not tested yet. :slight_smile:

You can find it here : Bricks Community

Actually the way is not set - because we also need an animation on the SVG triggered by scrolling + the dynamic color. I will put it all together when the animation part is done.

For Your solution I was thinking… would it also be possible to overwrite the original SVG code (file) with the dynamic ‘fill’ code and upload it!? It´s not better then Your solution but would be curious if this works.

Thx again / Sascha

4

Hi Sascha,
Andres solution should work as well :+1:

Nope, the dynamic data inside of the SVG would do nothing because the SVG is simply displayed, not executed (as PHP for example).

Let me know when you got it all together, I’m curious about your final way :v: