html - 在 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 变量/值时需要指定度数(例如 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>