在 CSS 旋转函数中使用 CSS 变量

Question

我正在开发一个雪人的 SVG 图像，我正在尝试使用变量来确定特定的事物。帽子上的带子东西的颜色和围巾的颜色设置成功var(--maincolor)。我遇到的问题是 var(--armangle).

<path d="..." stroke="#442200" stroke-width="2" fill="none" transform="rotate(var(--armangle))" transform-origin="32.5% 60%"/>

为什么没有被接受？

我试过：

svg{
  --armangle: 20deg;
}

和

svg{
  --armangle: 20;
}

但两者都不起作用。

有没有办法在 CSS 的函数中使用变量？正常值（没有 deg）工作得很好（deg 只是被忽略）。

Answer 1

您应该使用属性或 CSS 来设置样式。

从这两个示例中可以看出，样式既可以定义为 SVG 的一部分，也可以定义在单独的样式表中。

使用CSS时，variables/values需要指定为度数（如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>

在 CSS 旋转函数中使用 CSS 变量

Using CSS variable in CSS rotate function

html

css

variables

svg