Context
I am creating a static website using HTML, CSS and JS only (for learning purposes). I successfully implemented two themes. In order to change it, I added an SVG icon in a button element. The svg then changes according to the theme (moon or sun).
Problem
While everything runs well in a chromium browser, the SVGs don't show at all using Firefox, but the buttons work as expected. I suspect this comes from the way I use CSS variables to change the path of the SVG on hover. However, using variables is quite the goal in my case.
Outputs
Here is the (expected) result I get in the chromium based browser:
Here is the one I get in Firefox:
Question
How can I make the SVGs appear in Firefox using CSS variables ?
MWE
Here is an example. As you can see, in Firefox and unless the path is set inline as in the third svg icon, there is just nothing showing.
:root {
--square: "M 0 0 H 50 V 50 H 0 Z";
--triangle: "M 0 0 V 50 H 50 Z";
--color1: red;
--color2: green;
--color3: blue;
}
/*Doesn't work in FF*/
#path1 {
d: path(var(--square));
}
/*Doesn't work in FF either*/
#path2 {
d: path("M 25 0 L 50 25 L 25 50 L 0 25 Z");
}
/*Behaviour when hovered*/
#btn1:hover path {
d: path(var(--triangle));
fill: var(--color1);
}
#btn2:hover path {
d: path(var(--triangle));
fill: var(--color2);
}
#btn3:hover path {
d: path(var(--triangle));
fill: var(--color3);
}
/*Some more (off-topic) styling*/
button:hover {
cursor: pointer;
}
svg {
width: 25;
height: 25;
max-width: 50px;
max-height: 50px;
}<button id="btn1">
<svg>
<path id="path1" />
</svg>
</button>
<button id="btn2">
<svg>
<path id="path2" />
</svg>
</button>
<button id="btn3">
<svg>
<path id="path3" d="M 0 0 H 50 V 50 Z";/>
</svg>
</button>
