在firefox和IE中使用svg时出现问题

Question

我在我的网站上有svg可以正常使用Chrome，但是当我尝试在Firefox上检查它时，我觉得这个东西超出了框架范围。我是几个月前开始编码的设计师。这是chrome和Firefox的图像。

在Chrome中：

在Firefox中：

以下是我使用的代码段

＆＃13;

＆＃13;

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;
  }
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 1

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

如果您将基于em的字体大小应用于<svg>并且文本位于<symbol>内，那么在Firefox中，<text>元素认为字体应为10.5倍当前字体大小为10.5em。换句话说，字体大小相乘并最终为110.25em。

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

text {
  font: 10.5em 'Arial';
}

＆＃13;

＆＃13;

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;
  }
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 2

根据经验，对于svg图像，始终包含xsl:key，<xsl:key name="Directories" match="wix:DirectoryRef[@Id='RFolder']/wix:Directory" use="@Id" /> <xsl:key name="Directories" match="wix:Fragment[1]/wix:DirectoryRef/wix:Directory" use="@Id" /> <xsl:key name="Directories" match="wix:DirectoryRef[not(preceding::wix:DirectoryRef)]/wix:Directory" use="@Id" /> 和height作为属性，而不是CSS样式。如果不存在这些属性，不同的浏览器会以不同方式呈现SVG。