I am trying to use CSS variables inside my SVG for theming options in Obsidian, but everything is rendered as black in Inkscape. Interestingly (or not), the colors show okay in Obsidian. My understanding is that as of version 1.0.1 Inkscape had CSS capabilities. I my SVG okay or does Inkscape not support variables
Hi!
I am trying to use CSS variables inside my SVG for theming options in Obsidian, but everything is rendered as black in Inkscape. Interestingly (or not), the colors show okay in Obsidian. My understanding is that as of version 1.0.1 Inkscape had CSS capabilities. I my SVG okay or does Inkscape not support variables
<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200">
<style type="text/css">
:root {
--color-red: #fb464c;
--color-orange: #e9973f;
--color-yellow: #e0de71;
--color-cyan: #53dfdd;
--color-blue: #027aff;
--color-purple: #a882ff;
--color-pink: #fa99cd;
}
</style>
<circle
cx="50"
cy="50"
r="30"
stroke="var(--color-red)"
fill="var(--color-cyan)" />
<circle
cx="150"
cy="50"
r="30"
stroke-width="3"
stroke="var(--color-purple)" />
<circle
cx="50"
cy="150"
r="30"
stroke-width="10"
fill="var(--color-pink)"
stroke="var(--color-orange)" />
<circle
cx="150"
cy="150"
r="30"
style="stroke-width:4"
stroke="var(--color-blue)"
fill="var(--color-orange)" />
</svg>