Trouble with svg in firefox and IE

Question

I have svg in my web site which works fine in chrome but when I try to check it on Firefox the thing is out of frame enlarged I think. I am a designer who started coding few months back. Here is the image for chrome and Firefox.

In Chrome:

In Firefox:

Here is the code snippet i used

 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

This seems to be a bug in Firefox.

If you apply an em -based font size to the <svg> and have text inside a <symbol> then in Firefox, the <text> element thinks the font should be 10.5 times the current font size of 10.5em. In other words the font size is multiplying and ends up as 110.25em.

The simple solution is to move the font rule to the <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> 

Answer 2

As a rule of thumb, always include height , width and viewBox for svg images as attributes as opposed to CSS style. Different browsers render SVG differently if these attributes are not present.