等距视角SVG停车场道闸的CSS平滑开合动画实现求教

最优方案（修改SVG结构，完全消除硬编码） #

等距SVG道闸需要硬编码位移参数的核心原因是道闸元素的坐标原点没有和实际旋转枢轴（道闸与立柱的连接点）对齐，调整SVG结构后即可实现所有道闸共用一套CSS规则：

1. 给每个道闸元素包裹独立的<g>分组标签
2. 在SVG编辑器中选中每个道闸对应的枢轴点坐标，给对应<g>标签设置transform="translate(枢轴X坐标, 枢轴Y坐标)"，同时将道闸路径的坐标调整为相对于该枢轴点的相对坐标
3. 直接使用以下通用CSS即可实现所有道闸的平滑开合动画：

/* 所有道闸通用基础样式 */
.schranken {
  transform-origin: 0 0;
  transition: transform 0.8s ease-in-out;
}

/* 开闸状态类，所有道闸共用，无需单独配置 */
.schranken--open {
  /* 数值可根据你需要的抬升角度调整，-60deg等价于你之前写的300deg */
  transform: rotate(-60deg);
}

兼容方案（无需修改SVG，仅优化CSS消除重复硬编码） #

如果不方便调整SVG源码，可以用CSS自定义变量抽离差异化参数，避免重复编写变换规则：

/* 通用基础样式 */
.schranken {
  transform-origin: bottom;
  transition: transform 0.8s ease-in-out;
  transform: rotate(0) translate(var(--translate-x, 0), var(--translate-y, 0));
}

/* 开闸状态通用类 */
.schranken--open {
  transform: rotate(-60deg) translate(var(--translate-x, 0), var(--translate-y, 0));
}

/* 仅需为每个道闸单独配置位移参数，无需重复写旋转逻辑 */
.schranken1 {
  --translate-x: 54.8%;
  --translate-y: 35.7%;
}
.schranken2 {
  --translate-x: 73.4%;
  --translate-y: 46.3%;
}
.schranken3 {
  /* 直接补充第三个道闸的位移参数即可 */
}

两种方案都可以实现平滑的开合过渡效果，同时大幅减少硬编码的重复代码。

内容的提问来源于stack exchange，提问作者Christoph Acs