Using CSS variable in CSS rotate function - html

Question

I am developing an SVG image of a snowman and I am trying to use variables to determine specific things. The color of the strap thing on the hat and the color of the scarf are successfully set by var(--maincolor). What I am having trouble with is var(--armangle).
<path d="..." stroke="#442200" stroke-width="2" fill="none" transform="rotate(var(--armangle))" transform-origin="32.5% 60%"/>
Why doesn't it get accepted?
I have tried:
svg{
--armangle: 20deg;
}
and
svg{
--armangle: 20;
}
but neither work at all.
Is there a way to use a variable in a function in CSS? A normal value (without deg) works (deg just gets ignored) very well.

Answer 1

You should use either attributes or CSS for styling.
As you can see from the two examples styling can either be defined as part of the SVG or in a separate stylesheet.
When using CSS variables/values need to specify that it is a number of degrees (like 20deg).
:root {
--armangle: 20deg;
}
<svg viewBox="0 0 3 3" width="200" height="200">
<style>
path {
transform: rotate(var(--armangle));
}
</style>
<path d="M 0 0 L 0 1 L 1 1 L 1 0 Z" stroke="#442200"
stroke-width=".1" fill="none" transform-origin="32.5% 60%"/>
</svg>
:root {
--armangle: 20deg;
}
svg > path {
transform: rotate(var(--armangle));
}
<svg viewBox="0 0 3 3" width="200" height="200">
<path d="M 0 0 L 0 1 L 1 1 L 1 0 Z" stroke="#442200"
stroke-width=".1" fill="none" transform-origin="32.5% 60%"/>
</svg>