Using CSS variable in CSS rotate function

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>