Using CSS variable in CSS rotate function-CodePudding

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.

CodePudding user response：

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>