LinearGradiant SVG Animation looks incorrect in Firefox









up vote
1
down vote

favorite












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?






html svg







share|improve this question



















  • 1




    a) you have multiple elements with the same id value (that's invalid) b) what are you trying to achieve with x2="1" y2="4". Those are very strange values, what do you want the animation to look like?
    – Robert Longson
    Nov 9 at 17:04










  • I want the animation to look exactly like it does in Firefox as it does in Chrome. It Firefox it behaves slightly strange.
    – James Ives
    Nov 9 at 18:01











  • It goes up non-horizontally (if you slow it down you'll see that). That odd angle is exactly what you want is it?
    – Robert Longson
    Nov 9 at 18:15











  • Ideally it would fill from bottom to top, but in Firefox it doesn't even do that. I'll update the post with a gif. The issue is more to do with how it doesn't look like it's even playing in Firefox at all, but it looks normal in all other browsers.
    – James Ives
    Nov 9 at 18:17











  • starting grey and finishing purple or the other way round?
    – Robert Longson
    Nov 9 at 18:21














up vote
1
down vote

favorite












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?






html svg







share|improve this question



















  • 1




    a) you have multiple elements with the same id value (that's invalid) b) what are you trying to achieve with x2="1" y2="4". Those are very strange values, what do you want the animation to look like?
    – Robert Longson
    Nov 9 at 17:04










  • I want the animation to look exactly like it does in Firefox as it does in Chrome. It Firefox it behaves slightly strange.
    – James Ives
    Nov 9 at 18:01











  • It goes up non-horizontally (if you slow it down you'll see that). That odd angle is exactly what you want is it?
    – Robert Longson
    Nov 9 at 18:15











  • Ideally it would fill from bottom to top, but in Firefox it doesn't even do that. I'll update the post with a gif. The issue is more to do with how it doesn't look like it's even playing in Firefox at all, but it looks normal in all other browsers.
    – James Ives
    Nov 9 at 18:17











  • starting grey and finishing purple or the other way round?
    – Robert Longson
    Nov 9 at 18:21












up vote
1
down vote

favorite









up vote
1
down vote

favorite











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?






html svg







share|improve this 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? 






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





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





html svg




html svg






share|improve this question















share|improve this question













share|improve this question




share|improve this question








edited Nov 9 at 18:18

























asked Nov 9 at 16:18









James Ives

1,0831130




1,0831130







  • 1




    a) you have multiple elements with the same id value (that's invalid) b) what are you trying to achieve with x2="1" y2="4". Those are very strange values, what do you want the animation to look like?
    – Robert Longson
    Nov 9 at 17:04










  • I want the animation to look exactly like it does in Firefox as it does in Chrome. It Firefox it behaves slightly strange.
    – James Ives
    Nov 9 at 18:01











  • It goes up non-horizontally (if you slow it down you'll see that). That odd angle is exactly what you want is it?
    – Robert Longson
    Nov 9 at 18:15











  • Ideally it would fill from bottom to top, but in Firefox it doesn't even do that. I'll update the post with a gif. The issue is more to do with how it doesn't look like it's even playing in Firefox at all, but it looks normal in all other browsers.
    – James Ives
    Nov 9 at 18:17











  • starting grey and finishing purple or the other way round?
    – Robert Longson
    Nov 9 at 18:21












  • 1




    a) you have multiple elements with the same id value (that's invalid) b) what are you trying to achieve with x2="1" y2="4". Those are very strange values, what do you want the animation to look like?
    – Robert Longson
    Nov 9 at 17:04










  • I want the animation to look exactly like it does in Firefox as it does in Chrome. It Firefox it behaves slightly strange.
    – James Ives
    Nov 9 at 18:01











  • It goes up non-horizontally (if you slow it down you'll see that). That odd angle is exactly what you want is it?
    – Robert Longson
    Nov 9 at 18:15











  • Ideally it would fill from bottom to top, but in Firefox it doesn't even do that. I'll update the post with a gif. The issue is more to do with how it doesn't look like it's even playing in Firefox at all, but it looks normal in all other browsers.
    – James Ives
    Nov 9 at 18:17











  • starting grey and finishing purple or the other way round?
    – Robert Longson
    Nov 9 at 18:21







1




1




a) you have multiple elements with the same id value (that's invalid) b) what are you trying to achieve with x2="1" y2="4". Those are very strange values, what do you want the animation to look like?
– Robert Longson
Nov 9 at 17:04




a) you have multiple elements with the same id value (that's invalid) b) what are you trying to achieve with x2="1" y2="4". Those are very strange values, what do you want the animation to look like?
– Robert Longson
Nov 9 at 17:04












I want the animation to look exactly like it does in Firefox as it does in Chrome. It Firefox it behaves slightly strange.
– James Ives
Nov 9 at 18:01





I want the animation to look exactly like it does in Firefox as it does in Chrome. It Firefox it behaves slightly strange.
– James Ives
Nov 9 at 18:01













It goes up non-horizontally (if you slow it down you'll see that). That odd angle is exactly what you want is it?
– Robert Longson
Nov 9 at 18:15





It goes up non-horizontally (if you slow it down you'll see that). That odd angle is exactly what you want is it?
– Robert Longson
Nov 9 at 18:15













Ideally it would fill from bottom to top, but in Firefox it doesn't even do that. I'll update the post with a gif. The issue is more to do with how it doesn't look like it's even playing in Firefox at all, but it looks normal in all other browsers.
– James Ives
Nov 9 at 18:17





Ideally it would fill from bottom to top, but in Firefox it doesn't even do that. I'll update the post with a gif. The issue is more to do with how it doesn't look like it's even playing in Firefox at all, but it looks normal in all other browsers.
– James Ives
Nov 9 at 18:17













starting grey and finishing purple or the other way round?
– Robert Longson
Nov 9 at 18:21




starting grey and finishing purple or the other way round?
– Robert Longson
Nov 9 at 18:21












1 Answer
1






active

oldest

votes

















up vote
1
down vote



accepted










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>








share|improve this answer






















  • This works in Firefox now, but no longer works in Chrome :(
    – James Ives
    Nov 9 at 18:27






  • 1




    @JamesIves how about now, I tried this alternative on Safari so presumably Chrome is likely to work too. Chrome/Safari's failure on my previous version is a bug in their implementation.
    – Robert Longson
    Nov 9 at 18:32










  • Yep! Totally works now. Thanks for your assistance.
    – James Ives
    Nov 9 at 18:33










Your Answer






StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");

StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);

else
createEditor();

);

function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);



);













 

draft saved


draft discarded


















StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53229498%2flineargradiant-svg-animation-looks-incorrect-in-firefox%23new-answer', 'question_page');

);

Post as a guest















Required, but never shown

























1 Answer
1






active

oldest

votes








1 Answer
1






active

oldest

votes









active

oldest

votes






active

oldest

votes








up vote
1
down vote



accepted










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>








share|improve this answer






















  • This works in Firefox now, but no longer works in Chrome :(
    – James Ives
    Nov 9 at 18:27






  • 1




    @JamesIves how about now, I tried this alternative on Safari so presumably Chrome is likely to work too. Chrome/Safari's failure on my previous version is a bug in their implementation.
    – Robert Longson
    Nov 9 at 18:32










  • Yep! Totally works now. Thanks for your assistance.
    – James Ives
    Nov 9 at 18:33














up vote
1
down vote



accepted










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>








share|improve this answer






















  • This works in Firefox now, but no longer works in Chrome :(
    – James Ives
    Nov 9 at 18:27






  • 1




    @JamesIves how about now, I tried this alternative on Safari so presumably Chrome is likely to work too. Chrome/Safari's failure on my previous version is a bug in their implementation.
    – Robert Longson
    Nov 9 at 18:32










  • Yep! Totally works now. Thanks for your assistance.
    – James Ives
    Nov 9 at 18:33












up vote
1
down vote



accepted







up vote
1
down vote



accepted






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>








share|improve this answer














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>








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





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






share|improve this answer














share|improve this answer



share|improve this answer








edited Nov 9 at 18:31

























answered Nov 9 at 18:25









Robert Longson

74.6k13150155




74.6k13150155











  • This works in Firefox now, but no longer works in Chrome :(
    – James Ives
    Nov 9 at 18:27






  • 1




    @JamesIves how about now, I tried this alternative on Safari so presumably Chrome is likely to work too. Chrome/Safari's failure on my previous version is a bug in their implementation.
    – Robert Longson
    Nov 9 at 18:32










  • Yep! Totally works now. Thanks for your assistance.
    – James Ives
    Nov 9 at 18:33
















  • This works in Firefox now, but no longer works in Chrome :(
    – James Ives
    Nov 9 at 18:27






  • 1




    @JamesIves how about now, I tried this alternative on Safari so presumably Chrome is likely to work too. Chrome/Safari's failure on my previous version is a bug in their implementation.
    – Robert Longson
    Nov 9 at 18:32










  • Yep! Totally works now. Thanks for your assistance.
    – James Ives
    Nov 9 at 18:33















This works in Firefox now, but no longer works in Chrome :(
– James Ives
Nov 9 at 18:27




This works in Firefox now, but no longer works in Chrome :(
– James Ives
Nov 9 at 18:27




1




1




@JamesIves how about now, I tried this alternative on Safari so presumably Chrome is likely to work too. Chrome/Safari's failure on my previous version is a bug in their implementation.
– Robert Longson
Nov 9 at 18:32




@JamesIves how about now, I tried this alternative on Safari so presumably Chrome is likely to work too. Chrome/Safari's failure on my previous version is a bug in their implementation.
– Robert Longson
Nov 9 at 18:32












Yep! Totally works now. Thanks for your assistance.
– James Ives
Nov 9 at 18:33




Yep! Totally works now. Thanks for your assistance.
– James Ives
Nov 9 at 18:33

















 

draft saved


draft discarded















































 


draft saved


draft discarded














StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53229498%2flineargradiant-svg-animation-looks-incorrect-in-firefox%23new-answer', 'question_page');

);

Post as a guest















Required, but never shown





















































Required, but never shown














Required, but never shown












Required, but never shown







Required, but never shown

































Required, but never shown














Required, but never shown












Required, but never shown







Required, but never shown







-