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

【问题标题】：Using CSS variable in CSS rotate function在 CSS 旋转函数中使用 CSS 变量
【发布时间】：2022-01-14 19:09:35
【问题描述】：

我正在开发雪人的 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 会被忽略）。

【问题讨论】：

标签： html css variables svg

【解决方案1】：

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

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

使用 CSS 变量/值时需要指定度数（如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>

【讨论】：

是的，现在我明白了。谢谢！ :D