Css 复杂SVG组中嵌套元素的变换原点

我花了很长时间在一个嵌套的SVG元素上纠正我的转换原点，我想知道我是否可以借用别人的眼睛来发现我的愚蠢

我已经尝试了许多不同的组合，到目前为止，当我想在一个浏览器中接近我想要的内容时，在另一个浏览器中却很差

对于PoC的例子，我们在看我的小家伙的螺旋桨。为了便于开始，我将本例的变换原点设置为刚好居中（如我所说，我尝试了许多变体，但运气不佳）。有谁能告诉我是什么导致了浏览器之间的差异（是的，我也尝试过在各种浏览器限定符中指定转换，如-webkit-*以及以各种方式点击X/Y），但你会注意到在Chrome中，它更接近元素的中心，而在Firefox中，它似乎是绝对父SVG本身的原点和中心

所以，有人想教我一些关于SVG动画中嵌套元素转换起源的新知识，并帮助我的小家伙用螺旋桨飞到需要的地方吗？：）

PS-垂直的绿色中心线只是一个视觉尺寸参考占位符，我的小家伙飞行它是在真实的代码，因为我只能添加这么多的字符到一个这么多的片段

body{text align:center}
@关键帧冒险{
10% {
变换：translateX（5%）旋转（2次）；
} 25% {
变换：translateX（13%）旋转（15度）；
} 50% {
变换：translateX（-13%）旋转（-5度）；
} 75% {
变换：translateX（13%）旋转（15度）；
} 90% {
变换：translateX（-5%）旋转（-2个格）；
}
}
@关键帧导航{
10% {
变换：旋转（2deg）；
} 25% {
变换：旋转（10度）；
} 50% {
变换：旋转（-5度）；
} 75% {
变换：旋转（10度）；
} 90% {
变换：旋转（-2deg）；
}
}
@关键帧推进{
100%{变换：旋转（360度）}
}
#完整字符{
变换原点：50%；
动画：冒险5s无限；
-webkit过渡计时功能：步进启动；
过渡定时功能：步进启动；
}
#操舵{
变换原点：中心；
动画：导航5s无限；
}
#螺旋桨{
变换原点：中心；
动画：无限线性；
}

---

使用两个不同的平移设置旋转中心，而不是使用变换原点

（将图元移动到所需的任何位置，旋转图元，然后将其移回原来的位置）

您的动画将是

@keyframes propel { 
    0% {transform: translate(257px, 188px) rotate(0deg) translate(-257px, -188px);}
  100% {transform: translate(257px, 188px) rotate(360deg) translate(-257px, -188px);}
}

---

不要使用变换原点，而是使用两个不同的平移设置旋转中心

（将图元移动到所需的任何位置，旋转图元，然后将其移回原来的位置）

您的动画将是

@keyframes propel { 
    0% {transform: translate(257px, 188px) rotate(0deg) translate(-257px, -188px);}
  100% {transform: translate(257px, 188px) rotate(360deg) translate(-257px, -188px);}
}

---

您现在不能真正为

transform origin

使用百分比值，因为Chrome和Firefox对百分比值的处理方式不同。这也适用于伪值，如“center”，定义为等同于“50%”

您需要使用绝对像素值来实现跨浏览器兼容

如果更改螺旋桨动画以使用绝对坐标，它将修复动画：

#propeller {
  transform-origin: 261px 189px;
  animation: propel 4s infinite linear;
}

我在这里使用的坐标只是构成螺旋桨轮毂的

的

cx

和

cy

值

body{text align:center}
@关键帧冒险{
10% {
变换：translateX（5%）旋转（2次）；
} 25% {
变换：translateX（13%）旋转（15度）；
} 50% {
变换：translateX（-13%）旋转（-5度）；
} 75% {
变换：translateX（13%）旋转（15度）；
} 90% {
变换：translateX（-5%）旋转（-2个格）；
}
}
@关键帧导航{
10% {
变换：旋转（2deg）；
} 25% {
变换：旋转（10度）；
} 50% {
变换：旋转（-5度）；
} 75% {
变换：旋转（10度）；
} 90% {
变换：旋转（-2deg）；
}
}
@关键帧推进{
100%{变换：旋转（360度）}
}
#完整字符{
变换原点：50%；
动画：冒险5s无限；
-webkit过渡计时功能：步进启动；
过渡定时功能：步进启动；
}
#操舵{
变换原点：中心；
动画：导航5s无限；
}
#螺旋桨{
变换原点：261px189px；
动画：无限线性；
}

---

您现在不能真正为

transform origin

使用百分比值，因为Chrome和Firefox对百分比值的处理方式不同。这也适用于伪值，如“center”，定义为等同于“50%”

您需要使用绝对像素值来实现跨浏览器兼容

如果更改螺旋桨动画以使用绝对坐标，它将修复动画：

#propeller {
  transform-origin: 261px 189px;
  animation: propel 4s infinite linear;
}

我在这里使用的坐标只是构成螺旋桨轮毂的

的

cx

和

cy

值

body{text align:center}
@关键帧冒险{
10% {
变换：translateX（5%）旋转（2次）；
} 25% {
变换：translateX（13%）旋转（15度）；
} 50% {
变换：translateX（-13%）旋转（-5度）；
} 75% {
变换：translateX（13%）旋转（15度）；
} 90% {
变换：translateX（-5%）旋转（-2个格）；
}
}
@关键帧导航{
10% {
变换：旋转（2deg）；
} 25% {
变换：旋转（10度）；
} 50% {
变换：旋转（-5度）；
} 75% {
变换：旋转（10度）；
} 90% {
变换：旋转（-2deg）；
}
}
@钥匙