Html firefox和IE中svg的问题

我的网站上有svg，它在chrome上运行良好，但当我尝试在Firefox上查看它时，我认为它超出了框架。我是一名设计师，几个月前开始编写代码。这是chrome和Firefox的图片

镀铬：

在Firefox中：

下面是我使用的代码片段

svg{
显示：块；
字体：10.5em“Arial”；
宽度：960px；
高度：300px；
保证金：0自动；
}
.文本副本{
填充：无；
笔画：白色；
中风：6%29%；
笔画宽度：5px；
行程偏移：0%；
动画：笔划偏移5.5s无限线性；
}
.文本副本：第n个子项（1）{
笔划：4D163D；
动画延迟：-1s；
}
.文本副本：第n个子项（2）{
行程：#840037；
动画延迟：-2s；
}
.文本副本：第n个子项（3）{
行程：#BD0034；
动画延迟：-3s；
}
.文本副本：第n个子项（4）{
行程：#BD0034；
动画延迟：-4s；
}
.文本副本：第n个子项（5）{
冲程：#FDB731；
动画延迟：-5s；
}
@关键帧笔划偏移{
100%{stroke dashoffset:-35%；}
}
@介质（最小宽度：768px）{
svg{
宽度：750px；
高度：300px；
保证金：0自动；
}
}
@介质（最大宽度：767px）{
svg{
字体：6.5em“Arial”；
宽度：100%；
高度：300px；
保证金：0自动；
}
.文本副本{
填充：无；
笔画：白色；
中风：6%29%；
笔画宽度：3px；
行程偏移：0%；
动画：笔划偏移5.5s无限线性；
}
}
.text-center 1{
颜色：rgba（255255,0.8）；
文本对齐：居中；
字体大小：48px；
边缘顶端：40px；
}
@介质（最大宽度：992px）{
.text-centre1{
字体大小：30px；
}
}

数字的

这似乎是Firefox中的一个bug

如果将基于

em

的字体大小应用于

并在

中包含文本，那么在Firefox中，

元素认为字体应该是当前字体大小10.5em的10.5倍。换句话说，字体大小是成倍的，最终为110.25em

简单的解决方案是将

字体

规则移动到

元素

text {
  font: 10.5em 'Arial';
}

svg{
显示：块；
宽度：960px；
高度：300px；
保证金：0自动；
}
正文{
字体：10.5em“Arial”；
}
.文本副本{
填充：无；
笔画：白色；
中风：6%29%；
笔画宽度：5px；
行程偏移：0%；
动画：笔划偏移5.5s无限线性；
}
.文本副本：第n个子项（1）{
笔划：4D163D；
动画延迟：-1s；
}
.文本副本：第n个子项（2）{
行程：#840037；
动画延迟：-2s；
}
.文本副本：第n个子项（3）{
行程：#BD0034；
动画延迟：-3s；
}
.文本副本：第n个子项（4）{
行程：#BD0034；
动画延迟：-4s；
}
.文本副本：第n个子项（5）{
冲程：#FDB731；
动画延迟：-5s；
}
@关键帧笔划偏移{
100%{stroke dashoffset:-35%；}
}
@介质（最小宽度：768px）{
svg{
宽度：750px；
高度：300px；
保证金：0自动；
}
}
@介质（最大宽度：767px）{
svg{
宽度：100%；
高度：300px；
保证金：0自动；
}
正文{
字体：6.5em“Arial”；
}
.文本副本{
填充：无；
笔画：白色；
中风：6%29%；
笔画宽度：3px；
行程偏移：0%；
动画：笔划偏移5.5s无限线性；
}
}
.text-center 1{
颜色：rgba（255255,0.8）；
文本对齐：居中；
字体大小：48px；
边缘顶端：40px；
}
@介质（最大宽度：992px）{
.text-centre1{
字体大小：30px；
}
}

数字的

根据经验，始终将svg图像的

高度

、

宽度

和

视图框

作为属性，而不是CSS样式。如果这些属性不存在，不同的浏览器会以不同的方式呈现SVG。

您的SVG看起来非常“赤裸”-没有定义viewbox，也没有宽度/高度属性。。。检查，它涵盖了您应该设置哪些属性以使其正常工作的基本知识。虽然这是合理的建议，但这些问题并不是OPs问题的原因。我已向Mozilla报告了该漏洞：该漏洞在不久前已修复，修复程序在Firefox 56中，或者您可以尝试。谢谢Robert。我不知道那件事@有关此错误的更多信息，请参见下面的答案：感谢@Paul LeBeauMind解释否决票？如果svg元素中缺少上述属性，则图形在不同浏览器中的显示方式不同。