html - svg 在 firefox 和 IE 中的问题

Question

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

在 Chrome 中:

在 Firefox 中:

这是我使用的代码片段

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

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

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

简单的解决方案是移动 font规则<text>埃克门特。

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>