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

Posted 2023-03-28

【中文标题】在 CSS 旋转函数中使用 CSS 变量

【英文标题】：Using CSS variable in CSS rotate function

【发布时间】：2022-01-14 19:09:35

【问题描述】：

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

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

为什么不被接受？

我试过了：

svg
  --armangle: 20deg;

和

svg
  --armangle: 20;

但两者都不起作用。

有没有办法在 CSS 的函数中使用变量？正常值（没有deg）非常有效（deg 会被忽略）。

【参考方案1】：

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

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

使用 CSS 变量/值时需要指定度数（如20deg）。

:root 
  --armangle: 20deg;

<svg viewBox="0 0 3 3"  >
  <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- fill="none" transform-origin="32.5% 60%"/>
</svg>

:root 
  --armangle: 20deg;


svg > path 
  transform: rotate(var(--armangle));

<svg viewBox="0 0 3 3"  >
  <path d="M 0 0 L 0 1 L 1 1 L 1 0 Z" stroke="#442200"
    stroke- fill="none" transform-origin="32.5% 60%"/>
</svg>

【讨论】：

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