Javascript SVG动画在Firefox中不起作用

我正试图建立一个简单的导航，但我有点卡住了。 Firefox和Chrome中的图标正在发生变化，我做错了什么，有没有简单的解决方法

仅CSS导航菜单


















/*从中重置CSShttp://meyerweb.com/eric/tools/css/reset/ */
a、 缩写、首字母缩写、地址、小程序、文章、旁白、音频、b、大、块引号、正文、画布、标题、中心、引用、代码、dd、del、细节、dfn、div、dl、dt、em、嵌入、字段集、figcaption、数字、页脚、表单、h1、h2、h3、h4、h5、h6、页眉、hgroup、html、i、iframe、img、ins、kbd、标签、图例、li、标记、菜单、导航、对象、ol、输出、p、pre、q、ruby、s、samp、section、small、span、strike、strong、sub、，摘要，sup，table，tbody，td，tfoot，th，thead，time，tr，tt，u，ul，var，video{margin:0；padding:0；border:0；font:inherit；vertical align:baseline}article，side，details，figcaption，figcaption，figure，footer，header，hgroup，menu，nav，section{display:block}body{行高：1}ol，ul列表样式：none}blockquote，q{:none}blockquote:after:after，q:before{content:''；content:none}表{边框折叠：折叠；边框间距：0}
身体{
字体系列：“氧气”，无衬线；；
}
/*去除ul的填充并列出样式*/
导航ul{
列表样式类型：无；
保证金：0；
填充：0；
位置：绝对位置；
}
/*创建具有间距的水平列表*/
李海军{
显示：内联块；
浮动：左；
右边距：1px；
}
/*菜单链接的样式*/
李娜{
显示：块；
最小宽度：140px；
高度：50px；
文本对齐：居中；
线高：50px；
颜色：#fff；
背景:#2f3036；
文字装饰：无；
}
/*顶级链接的悬停状态*/
李导航：悬停a{
背景：19c589；
}
/*下拉链接的样式*/
李导航：悬停在ul a上{
背景:#f3；
颜色：#2f3036；
高度：40px；
线高：40px；
}
/*下拉链接的悬停状态*/
导航李：悬停ul a：悬停{
背景：19c589；
颜色：#fff；
}
/*隐藏下拉链接，直到需要它们*/
纳夫利乌尔{
显示：无；
}
/*使下拉链接垂直*/
李宇利{
显示：块；
浮动：无；
}
/*防止文本换行*/
纳夫利乌利阿{
宽度：自动；
最小宽度：100px；
填充：0 20px；
}
/*悬停时显示下拉列表*/
导航ul li a:悬停+.隐藏，.隐藏：悬停{
显示：块；
}
/*默认情况下，设置“显示菜单”标签按钮的样式并将其隐藏*/
.显示菜单{
文字装饰：无；
颜色：#fff；
背景：19c589；
文本对齐：居中；
填充：10px0；
显示：无；
}
/*隐藏复选框*/
导航输入[类型=复选框]{
显示：无；
}
/*选中“不可见”复选框时显示菜单*/
导航输入[类型=复选框]：选中~#菜单{
显示：块；
}
/*########################################################################################*/
h1{
文本转换：大写；
颜色：#60C0B2；
}
#汉堡包，
#svg箭头{
身高：4rem；
}
#svg汉堡系列，
#svg burger rect，
#svg箭头行，
#svg箭头矩形{
过渡：所有0.2秒缓解；
}
.close#svg burger rect:n类型（1）{
变换：旋转（45度）平移（20%，-245%）；
}
.close#svg burger rect:n类型（2）{
不透明度：0；
}
.close#svg burger rect:n类型（3）{
变换：旋转（-45度）平移（-50%，-50%）；
}
.open#svg burger rect:n类型（1）{
变换：旋转（0）平移（0,0）；
}
.open#svg burger rect:n类型（2）{
不透明度：1；
}
.open#svg burger rect:n类型（3）{
变换：旋转（0）平移（0,0）；
}
.close#svg箭头行：第n个类型（1）{
转化：translateX（42%）；
}
.close#svg箭头行：第n个类型（2）{
转化：translateX（-42%）；
}
.open#svg箭头行：第n个类型（1）{
变换：translateX（0）；
}
.open#svg箭头行：第n个类型（2）{
变换：translateX（0）；
}
/*########################################################################################*/
/*反应型风格*/
@媒体屏幕和屏幕（最大宽度：760像素）{
/*使下拉链接内联显示*/
导航ul{
位置：静态；
显示：无；
}
/*创建垂直间距*/
李海军{
边缘底部：1px；
}
/*使所有菜单链接全宽*/
nav ul li，li a{
宽度：100%；
}
/*显示“显示菜单”链接*/
.显示菜单{
显示：块；
}
}
$（文档）.ready（函数（）{
（功能（）{
$（'.burger'）。在（'click'，函数（e）上{
if（$（this）.hasClass（'close'））{
返回$（this）.removeClass（'close'）.addClass（'open'）；
}否则{
返回$（this）.addClass（'close'）.removeClass（'open'）；
}
});
}.叫（这个）；
});

Firefox不支持基于百分比的转换值。您应该使用px值，这对您来说应该很好

.close #svg-burger rect:nth-of-type(3){
transform:rotate(-45deg) translate(-60px, -10px);
}

.close #svg-burger rect:nth-of-type(1){
transform:rotate(45deg) translate(15px, -15px);
}

---

上述更改对于提供所需的动画效果应该很好。

对于我来说，两个浏览器都显示相同的图标。请显示两张图片。

.close #svg-burger rect:nth-of-type(3){
transform:rotate(-45deg) translate(-60px, -10px);
}

.close #svg-burger rect:nth-of-type(1){
transform:rotate(45deg) translate(15px, -15px);
}