LinearGradiant SVG Animation looks incorrect in Firefox - html

Question

I'm working with the following SVG animation that fills the house from bottom to top. It works just fine in Chrome, Safari and Internet Explorer, but doesn't work correctly in Firefox. If you pull up the snippet in Firefox you'll see that it doesn't play correctly.
.house-container {
height: 200px;
width: 200px
}
<div class="house-container">
<svg viewBox="0 0 30 30" version="1.1" preserveAspectRatio="none">
<g
id="Dashboard"
stroke="none"
stroke-width="1"
fill="none"
fillRule="evenodd"
>
<linearGradient id="house-1" x2="1" y2="4">
<stop offset="0%" stop-color="#ddd" />
<stop offset="0%" stop-color="#ddd">
<animate
id="house-1"
attributeName="offset"
to="100%"
dur="0.5s"
begin="0s"
fill="freeze"
/>
</stop>
<stop offset="100%" stop-color="#10004c">
<animate
id="house-1"
attributeName="offset"
to="100%"
dur="0.5s"
begin="0s"
fill="freeze"
/>
</stop>
</linearGradient>
<g
transform="translate(-1161.000000, -558.000000)"
fill="url(#house-1)"
>
<g transform="translate(437.000000, 475.000000)">
<g id="houses" transform="translate(340.000000, 83.000000)">
<g id="house" transform="translate(384.000000, 0.000000)">
<polygon
id="Path"
points="21 6.66002593 21 3 25 3 25 11.1000432 30 16.6500648 25.3846154 16.6500648 25.3846154 30 4.61538462 30 4.62306431 16.6500648 0 16.6500648 15 0"
/>
</g>
</g>
</g>
</g>
</g>
</svg>
</div>
Gif of what it looks like in Firefox:
https://imgur.com/a/SrOUHUN
I've read that Firefox has issues with SVG's, but all of my attempts to solve the animation issue have been in vein. Is there something obvious like a property I'm missing?

Answer 1

Something like this?
I've removed the duplicated ids, corrected the x1, y1, x2 and y2 values and swappd the colours round (I could have swapped the animation so it went to 0% instead I suppose).
.house-container {
height: 200px;
width: 200px
}
<div class="house-container">
<svg viewBox="0 0 30 30" version="1.1" preserveAspectRatio="none">
<g
id="Dashboard"
stroke="none"
stroke-width="1"
fill="none"
fillRule="evenodd"
>
<linearGradient id="house-1" x2="0" y1="0" y2="1">
<stop offset="0%" stop-color="#ddd" />
<stop offset="100%" stop-color="#ddd">
<animate
attributeName="offset"
to="0%"
dur="0.5s"
begin="0s"
fill="freeze"
/>
</stop>
<stop offset="100%" stop-color="#10004c">
<animate
attributeName="offset"
to="0%"
dur="0.5s"
begin="0s"
fill="freeze"
/>
</stop>
</linearGradient>
<g
transform="translate(-1161.000000, -558.000000)"
fill="url(#house-1)"
>
<g transform="translate(437.000000, 475.000000)">
<g id="houses" transform="translate(340.000000, 83.000000)">
<g id="house" transform="translate(384.000000, 0.000000)">
<polygon
id="Path"
points="21 6.66002593 21 3 25 3 25 11.1000432 30 16.6500648 25.3846154 16.6500648 25.3846154 30 4.61538462 30 4.62306431 16.6500648 0 16.6500648 15 0"
/>
</g>
</g>
</g>
</g>
</g>
</svg>
</div>