When I embed SVG elements, I do this a lot so I can change the color of them using “currentColor” and that takes whatever is set as the font color in Webflow’s CMS. I can do the same thing with “currentHeight”, “currentMinHeight”, “currentMaxHeight”, “currentWidth”, “currentMinWidth”, “currentMaxWidth”. What other parameters can I use to edit elements in the embed? Has anyone messed with this yet?
Eh? Hmm. I actually haven’t encountered any support for anything beyond CSS currentColor, which is well-established.
I’m not finding anything in the w3c specs either, besides currentColor.
Also, none of the keywords you mentioned are listed on caniuse.
e.g. "currentHeight" | Can I use... Support tables for HTML5, CSS3, etc
Usually that’s reliable even if it’s only implemented in a single browser, even in experimental state.
As far as I can tell, this doesn’t actually exist anywhere so do let me know if you’ve actually encountered proof that these work, or found some docs. That would be super interesting.
Now to utility…
There are very few places where I can think of anything except currentColor actually being useful. For backgrounds, transparency is a thing, so you don’t need to inherit background colors. Sizing is generally inherited from the containing element.
The only possibility in SVG specifically, is that I could see a use perhaps for using something like currentBorderWidth as the stroke width, but that’s a bit hacky. CSS isn’t normally used that way, and you probably don’t want a 3px box around your 3px artwork. So even if it worked, you’d have to do an opacity 0% border. Like I said… hacky.
I think what you’re really wanting to do is MUCH better solved with classes.
You can put classes on your SVG strokes, and then control them in CSS;
<style>
.stroke1 {
fill: red;
}
</style>
And, yes, you can even control this in the Webflow designer.
If e.g. you created a global class like svgColor1, and svgColor2 you could put those in in your inline SVG code, and then apply them to any element.
I usually do this as a swatch on my hidden Style Guide page, so I can control multiple color parts of different SVGs centrally.
Probably best not to use these and just use a global class, even if they do seem to work for some reason
That’s a great idea, nice approach.
It sounds to me like you can use any parameters that you set in the CMS as a field name.
Were you bumping into any issues that stopped you from using this? Not sure why this would be a “bad” approach to dynamically changing colors from the CMS.