Changing svg fill colour with Chroma user styles

Is it possible via Chroma User styles to change the fill colour of a BPSVG if I give the BPSVG a custom class?


I’m still interested out of curiosity but I’ve now gone down another route so no hurry on this at all

yes, just use CSS:

fill: red!important

i.e in terms of stack settings - the selector is #hamburger-2>path, the parameter is fill and the value is your new color #22faca

Working! Thanks Tav
Change the aspect of your browser to portrait (any size) and watch the hamburger as you scroll down.
What I’ve got there is 2 svg’s being animated by SPro animate and having their fill colour(s) changed by Chroma … bloody hell :)

This ability to change an svg’s colour/outline based on its position on a page could be a killer is abused properly.

1 Like

You need to add a transition on it so that the colour change is smooth. You have the transition on color, it needs to be on fill or both.

color 200ms ease, fill 200ms ease

Remember the SVG site logo here?

You will need to get down as far as the different coloured feature segments

Oppsies … I’d say I fixed it but to be honest I didn’t fully understand it was broken :)
I never clocked onto your Chroma logo using the effect, sometimes (most of the time really) I see stuff and fail to make the mental leap as to how it was done.

This is how it now looks:
The svg in BP SVG with the svg’s group and fill colour indicated:

The Custom user style in ChromaPro that changed the colour of the fill of the group when the Chroma Marker makes its appearance:

1 Like