Firefox 和 IE 中的 svg 问题

Question

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

在 Chrome 中：

在 Firefox 中：

这是我使用的代码sn-p

svg {
    display: block;
    font: 10.5em 'Arial';
    width: 960px;
    height: 300px;
    margin: 0 auto;
}

.text-copy {
    fill: none;
    stroke: white;
    stroke-dasharray: 6% 29%;
    stroke-width: 5px;
    stroke-dashoffset: 0%;
    animation: stroke-offset 5.5s infinite linear;
}

.text-copy:nth-child(1){
    stroke: #4D163D;
    animation-delay: -1s;
}

.text-copy:nth-child(2){
    stroke: #840037;
    animation-delay: -2s;
}

.text-copy:nth-child(3){
    stroke: #BD0034;
    animation-delay: -3s;
}

.text-copy:nth-child(4){
    stroke: #BD0034;
    animation-delay: -4s;
}

.text-copy:nth-child(5){
    stroke: #FDB731;
    animation-delay: -5s;
}
@keyframes stroke-offset{
    100% {stroke-dashoffset: -35%;}
}

@media (min-width:768px){
    svg{
        width: 750px;
        height: 300px;
        margin: 0 auto;
    }
}
@media (max-width:767px){
    svg{
        font: 6.5em 'Arial';
        width: 100%;
        height: 300px;
        margin: 0 auto;
    }
    .text-copy {
        fill: none;
        stroke: white;
        stroke-dasharray: 6% 29%;
        stroke-width: 3px;
        stroke-dashoffset: 0%;
        animation: stroke-offset 5.5s infinite linear;
    }
}

.text-center1{
  color:rgba(255,255,255,0.8);
  text-align: center;
  font-size: 48px ;
  margin-top:40px;
}
@media (max-width:992px){
  .text-centre1{
    font-size:30px;
  }
}

<svg>
    <symbol id="s-text">
      <text text-anchor="middle" x="50%" y="80%">Digital</text>
    </symbol>
    <g class = "g-ants">
      <use xlink:href="#s-text" class="text-copy"></use>
      <use xlink:href="#s-text" class="text-copy"></use>
      <use xlink:href="#s-text" class="text-copy"></use>
      <use xlink:href="#s-text" class="text-copy"></use>
      <use xlink:href="#s-text" class="text-copy"></use>
    </g>
</svg>

Answer 1

根据经验，对于 svg 图像，始终包含 height、width 和 viewBox 作为属性，而不是 CSS 样式。如果这些属性不存在，不同的浏览器会以不同的方式呈现 SVG。

Answer 2

这似乎是 Firefox 中的一个错误。

如果您将基于 em 的字体大小应用到 <svg> 并在 <symbol> 中包含文本，那么在 Firefox 中，<text> 元素认为字体应该是当前字体大小 10.5em 的 10.5 倍.换句话说，字体大小成倍增加，最终变为 110.25em。

简单的解决方案是将font 规则移至<text> ekement。

text {
  font: 10.5em 'Arial';
}

svg {
    display: block;
    width: 960px;
    height: 300px;
    margin: 0 auto;
}

text {
    font: 10.5em 'Arial';
}

.text-copy {
    fill: none;
    stroke: white;
    stroke-dasharray: 6% 29%;
    stroke-width: 5px;
    stroke-dashoffset: 0%;
    animation: stroke-offset 5.5s infinite linear;
}

.text-copy:nth-child(1){
    stroke: #4D163D;
    animation-delay: -1s;
}

.text-copy:nth-child(2){
    stroke: #840037;
    animation-delay: -2s;
}

.text-copy:nth-child(3){
    stroke: #BD0034;
    animation-delay: -3s;
}

.text-copy:nth-child(4){
    stroke: #BD0034;
    animation-delay: -4s;
}

.text-copy:nth-child(5){
    stroke: #FDB731;
    animation-delay: -5s;
}
@keyframes stroke-offset{
    100% {stroke-dashoffset: -35%;}
}

@media (min-width:768px){
    svg{
        width: 750px;
        height: 300px;
        margin: 0 auto;
    }
}
@media (max-width:767px){
    svg{
        width: 100%;
        height: 300px;
        margin: 0 auto;
    }
    text {
        font: 6.5em 'Arial';
    }
    .text-copy {
        fill: none;
        stroke: white;
        stroke-dasharray: 6% 29%;
        stroke-width: 3px;
        stroke-dashoffset: 0%;
        animation: stroke-offset 5.5s infinite linear;
    }
}

.text-center1{
  color:rgba(255,255,255,0.8);
  text-align: center;
  font-size: 48px ;
  margin-top:40px;
}
@media (max-width:992px){
  .text-centre1{
    font-size:30px;
  }
}

<svg>
    <symbol id="s-text">
      <text text-anchor="middle" x="50%" y="80%">Digital</text>
    </symbol>
    <g class = "g-ants">
      <use xlink:href="#s-text" class="text-copy"></use>
      <use xlink:href="#s-text" class="text-copy"></use>
      <use xlink:href="#s-text" class="text-copy"></use>
      <use xlink:href="#s-text" class="text-copy"></use>
      <use xlink:href="#s-text" class="text-copy"></use>
    </g>
</svg>