Support for css custom properties/variables?
See original GitHub issuesvgsupports the css custom property syntax.
<html>
<style>
:root
{
--myfill: orange;
--othefill: purple;
}
</style>
<svg width="250" height="250" viewBox="0 0 250 250">
<rect fill="var(--myfill,pink)" x="0" y="0" width="150" height="120"/>
</svg>
</html>
This code will use the --myfill color, if defined, otherwise it will use pink. What I’d like to do is have a fixed, unmodified svg and pass in different values for the given variables to change things at runtime. I looked through the source code and didn’t see anything obvious but does SharpVectors support this? If not, what would be the right area to investigate adding this feature?
Issue Analytics
- State:
- Created 3 years ago
- Comments:9 (5 by maintainers)
Top Results From Across the Web
CSS Variables (Custom Properties) | Can I use... Support ...
CSS Variables (Custom Properties). - CR. Permits the declaration and usage of cascading variables in stylesheets. Usage % of. all users, all tracked ......
Read more >Using CSS custom properties (variables) - MDN Web Docs
Custom properties (sometimes referred to as CSS variables or cascading variables) are entities defined by CSS authors that contain specific ...
Read more >A Strategy Guide To CSS Custom Properties
Custom properties have the same rules about where they can be used as normal CSS properties. It's far better to think of them...
Read more >A Complete Guide to Custom Properties
A custom property is most commonly thought of as a variable in CSS. ... Above, --spacing is the custom property with 1.2rem as...
Read more >A user's guide to CSS variables – Increment: Frontend
CSS variables are custom properties that cascade normally and even inherit. They start with a reserved -- prefix, and there are no real...
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
@paulushub sounds good. I’m not a regex superstar but here’s some example code which extracts what’s needed. The pattern is basically
var(--{var_name} {, optional fallback})
where if the var_name exists in the variable map that string should be used, otherwise the fallback is used if it was specified. Let me know if this doesn’t work or if you need something in a different formoutputs
updated to fix regex.
@jhndnnqsc Thanks for the verification. Most do not create SVG files in their projects, those who do might find this useful. I never knew about CSS variables until you mentioned it, for instance. Some projects currently modifying the generated output drawing might also find this useful. Lets keep this thread open for now to see how far we can build on it as others put in their requests.