Is there any way to achieve this effect in browsers that apparently do not support this code?

Question

Here is the HTML:

<div id="container">
    <svg>
        <path id="polyline" d="
            M0,5
            L184,5
            C205,4 202,6 202,13
            L202,86
            L327,86
            L421,166
            L460,166
            L499,132
            L588,211
            L617,211
            L712,134
            L748,165
            L780,165
            L830,111
            L913,212
            L938,212
            L1028,140
            L1078,184
            L1107,184
            L1152,140
            L1263,249"
        />
        <defs>
            <pattern id="pattern" width="1920" height="1080" patternUnits="userSpaceOnUse">
                    <image xlink:href="forest.jpg" width="1920" height="1080" />
            </pattern>
        </defs>
    </svg>
</div>

Here is the CSS:

#container {
    width:1263px;
    height:255px;
    position:absolute;
}
#container svg {
    width:100%;
    height:100%;
    fill:none;
    stroke:url(#pattern);
    stroke-dasharray:1626.7125244140625;
    stroke-dashoffset:1627;
    stroke-linecap:square;
    stroke-width:8;
    animation:polyline 3.15s linear 0.5s forwards;
}
@keyframes polyline {
    to {
        stroke-dashoffset:0;
    }
}

DEMO

• All of this works fine in Chrome.
• It works in Edge without stroke-dashoffset and thus without the animation.
• It does not work at all in Firefox/Waterfox.

Is there a way to achieve this effect across browsers?

Or is there something wrong with my code?

Thanks in advance! <333

Answer 1

Tested in Firefox (latest) worked fine, however, according to link animation is supported in FireFox with its own prefix:

  -moz-animation: polyline 3.15s linear 0.5s forwards;