Fill SVG from bottom right to top left - html

I am trying to create a animation that fills my SVG from bottom right to top left after 2 seconds, what I have now is that it fills from right to left right when the page loads:
<div id="home" class="section" style="height:100vh;background:pink;">
<div class="background">
<svg viewBox="0 0 1366 768">
<defs>
<clipPath id="a" transform="translate(7)">
<rect class="a" width="1366" height="768" />
</clipPath>
<linearGradient id="animation">
<stop offset="0" stop-color="#ffffff">
<animate dur="1s" attributeName="offset" fill="freeze" from="0" to="1" begin="2.5s;" />
</stop>
<stop offset="0" stop-color="rgba(0,0,0,0)">
<animate attributeName="offset" from="0" to="1" />
</stop>
</linearGradient>
</defs>
<g id="line">
<path class="c" fill="url(#animation)" d="M-7,0V768H1027.27l3.28-5.74c-3.1-5-4.9-11.68-6.45-15.93a5,5,0,0,1-.31-1.8c-.59-.57-1.19-1.12-1.77-1.71-4.19-4.3-8.13-8.78-12.31-13a5.41,5.41,0,0,1-2.41-1.24c-4-3.5-7.81-7.21-11.48-11-5.46-4.43-11-8.81-16.38-13.28-4.44-3.66-8.52-7.74-12.59-11.83l-1-1c-6.4-4.7-12.8-10.09-17.69-16.33-3.17-2.59-6.44-5.07-9.84-7.37-6.36-4.28-13.79-6.62-20.08-11-6.63-4.57-10.46-11.16-13.91-18.25A55.54,55.54,0,0,0,889,619.33c-6.11-5.14-12.61-9.88-18.16-15.64a78,78,0,0,1-12.74-18.42c-7.73-14.85-12.53-30.54-10.76-47.38,1.9-18,8.79-34.68,13.49-52,1.5-5.52,3.18-10.45,6.24-14.93a5.66,5.66,0,0,1,1.46-2c.62-.76,1.28-1.51,2-2.25,1.74-1.78,3.61-3.39,5.52-5,2.54-8.39,5.63-16.95,11.57-22.85s14.36-8.35,21.46-12.53l3.7-3.57a5.36,5.36,0,0,1,2.39-5.47l6-4,.13-.08a5.88,5.88,0,0,1,.86-1.14l.3-.28a56.64,56.64,0,0,1,6.64-8.71,65.33,65.33,0,0,1,12.5-9.54,117.79,117.79,0,0,1,21.82-11.11c2.33-2.18,4.67-4.3,7-6.36a5.65,5.65,0,0,1,1.71-1.05c10.21-9.09,20.39-18.22,30.84-27,23.11-19.45,53.32-31.79,67.9-59.69,3.29-6.31,5.61-13.11,9.27-19.24a42.87,42.87,0,0,1,8.74-10.4,4.6,4.6,0,0,1,1.48-3.27c12.36-12.17,26.31-22.61,38.52-35,9.54-9.64,17.38-20.78,26.94-30.43a125.77,125.77,0,0,1,28.08-21.42,5.51,5.51,0,0,1,3.16-3.15,78.09,78.09,0,0,1,8.24-2.51c24.36-10.73,51.73-14.36,78.2-11.67l.37.06a4.68,4.68,0,0,1,3.1-1.06,4.55,4.55,0,0,1,4.55,3.25c14-.7,28.06-1.53,41.63,1.59A41,41,0,0,1,1351,176.34a108.65,108.65,0,0,1,10.4,6.73L1366,175V0Z"
transform="translate(7)" />
<path class="d" d="M1034.5,770.5a125.59,125.59,0,0,0-17-32c-12.32-16.72-25.68-25.84-33-31-6-4.23-59.88-42.55-100-90-13.64-16.14-20.57-24.48-26-38-15-37.48-3.73-73.65,0-85,8.68-26.45,23-43.26,35-57,19-21.82,33.56-29.9,67-54,33.68-24.27,55.39-39.91,77-60,40.56-37.69,35.94-49.35,81-96,34.18-35.39,51.27-53.08,79-65,7.79-3.35,76-31.44,140,2a142.06,142.06,0,0,1,31,22l7.5,7.5"
transform="translate(7)" />
</g>
<polyline class="c" points="1373 175 1373 184.22 1370.37 179.61" />
</svg>
</div>
</div>
How can I make it so that it fills from bottom right to top left after 2 seconds?


begin changes the animation start time and set the initial offset to be the same as the start animation value as the animation won't apply before its start time.
You can either adjust x1, y1, x2, y2 of the gradient or set gradientTransform="rotate(45)" though you'd probably want a scale transform too as the shape you're filling isn't square.
<svg viewBox="0 0 1366 768">
<defs>
<clipPath id="a" transform="translate(7)">
<rect class="a" width="1366" height="768" />
</clipPath>
<linearGradient id="animation" x1="0" y1="0" x2="100%" y2="100%">
<stop offset="1" stop-color="#580073">
<animate dur="2s" begin="2s" attributeName="offset" fill="freeze" from="1" to="0" />
</stop>
<stop offset="1" stop-color="#fff">
<animate dur="2s" begin="2s" attributeName="offset" fill="freeze" from="1" to="0" />
</stop>
</linearGradient>
</defs>
<g id="line">
<path class="c" fill="url(#animation)" d="M-7,0V768H1027.27l3.28-5.74c-3.1-5-4.9-11.68-6.45-15.93a5,5,0,0,1-.31-1.8c-.59-.57-1.19-1.12-1.77-1.71-4.19-4.3-8.13-8.78-12.31-13a5.41,5.41,0,0,1-2.41-1.24c-4-3.5-7.81-7.21-11.48-11-5.46-4.43-11-8.81-16.38-13.28-4.44-3.66-8.52-7.74-12.59-11.83l-1-1c-6.4-4.7-12.8-10.09-17.69-16.33-3.17-2.59-6.44-5.07-9.84-7.37-6.36-4.28-13.79-6.62-20.08-11-6.63-4.57-10.46-11.16-13.91-18.25A55.54,55.54,0,0,0,889,619.33c-6.11-5.14-12.61-9.88-18.16-15.64a78,78,0,0,1-12.74-18.42c-7.73-14.85-12.53-30.54-10.76-47.38,1.9-18,8.79-34.68,13.49-52,1.5-5.52,3.18-10.45,6.24-14.93a5.66,5.66,0,0,1,1.46-2c.62-.76,1.28-1.51,2-2.25,1.74-1.78,3.61-3.39,5.52-5,2.54-8.39,5.63-16.95,11.57-22.85s14.36-8.35,21.46-12.53l3.7-3.57a5.36,5.36,0,0,1,2.39-5.47l6-4,.13-.08a5.88,5.88,0,0,1,.86-1.14l.3-.28a56.64,56.64,0,0,1,6.64-8.71,65.33,65.33,0,0,1,12.5-9.54,117.79,117.79,0,0,1,21.82-11.11c2.33-2.18,4.67-4.3,7-6.36a5.65,5.65,0,0,1,1.71-1.05c10.21-9.09,20.39-18.22,30.84-27,23.11-19.45,53.32-31.79,67.9-59.69,3.29-6.31,5.61-13.11,9.27-19.24a42.87,42.87,0,0,1,8.74-10.4,4.6,4.6,0,0,1,1.48-3.27c12.36-12.17,26.31-22.61,38.52-35,9.54-9.64,17.38-20.78,26.94-30.43a125.77,125.77,0,0,1,28.08-21.42,5.51,5.51,0,0,1,3.16-3.15,78.09,78.09,0,0,1,8.24-2.51c24.36-10.73,51.73-14.36,78.2-11.67l.37.06a4.68,4.68,0,0,1,3.1-1.06,4.55,4.55,0,0,1,4.55,3.25c14-.7,28.06-1.53,41.63,1.59A41,41,0,0,1,1351,176.34a108.65,108.65,0,0,1,10.4,6.73L1366,175V0Z"
transform="translate(7)" />
<path class="d" d="M1034.5,770.5a125.59,125.59,0,0,0-17-32c-12.32-16.72-25.68-25.84-33-31-6-4.23-59.88-42.55-100-90-13.64-16.14-20.57-24.48-26-38-15-37.48-3.73-73.65,0-85,8.68-26.45,23-43.26,35-57,19-21.82,33.56-29.9,67-54,33.68-24.27,55.39-39.91,77-60,40.56-37.69,35.94-49.35,81-96,34.18-35.39,51.27-53.08,79-65,7.79-3.35,76-31.44,140,2a142.06,142.06,0,0,1,31,22l7.5,7.5"
transform="translate(7)" />
</g>
<polyline class="c" points="1373 175 1373 184.22 1370.37 179.61" />
</svg>

Related

svg rect radius with filter

I ran into a problem that rect with rx specified doesn't work after applying filter to rect
<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200">
<defs>
<filter id="floodFilter" filterUnits="userSpaceOnUse">
<feFlood
flood-color="#488764"
flood-opacity="1"
result="background"
/>
<feBlend mode="normal" in="SourceGraphic" in2="background" />
</filter>
<linearGradient id="animation">
<stop offset="0" stop-color="rgba(248, 222, 86, 0)"/>
<stop offset="100%" stop-color="#65ae83"/>
</linearGradient>
</defs>
<rect width="100" height="200" filter="url(#floodFilter)" fill="url(#animation)" rx="8">
<animate attributeType="XML" attributeName="x" from="-100" to="100" dur="1s" repeatCount="indefinite"/>
</rect>
</svg>
So the question is how to apply the filter and keep the rx for the rectangle?
UPD: I can't use the fill attribute because fill is used for animation
UPD2: Added more examples with fill and filter and animation

Try using a background rect with rounded corners:
<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200">
<defs>
<linearGradient id="animation">
<stop offset="0" stop-color="rgba(248, 222, 86, 0)"/>
<stop offset="100%" stop-color="#65ae83"/>
</linearGradient>
</defs>
<rect width="200" height="200" rx="8" fill="#65ae83" />
<rect width="100" height="200" fill="url(#animation)" rx="8">
<animate attributeType="XML" attributeName="x" from="0" to="100" dur="1s" repeatCount="indefinite"/>
</rect>
</svg>

SVG Icon path doesn't show

i have this svg-path as an header-icon. Now i want to add a letter to the path by using the gimp-method discussed here, but everytime i add the path for the "B" nothing is showing up. Any advice on what i am doing wrong? Here's the current (working) code and an image of what i'm trying to get.
Also, here is the .svg i'm using. Maybe there's something wrong with the svg itself and therefore i don't get the right paths in the text-file?
Hope someone is able to help me out with this issue.
<svg viewBox="0 0 259 190"><title>Header Icon</title>
<defs>
<linearGradient id="grd" x2="100%" y2="100%" >
<stop offset="0%" stop-color="#000000"></stop>
<stop offset="25%" stop-color="#bd2478"></stop>
<stop offset="35%" stop-color="#54bdff"></stop>
<stop offset="55%" stop-color="#96a318"></stop>
<stop offset="100%" stop-color="#000000"></stop>
</linearGradient>
<mask id="msk">
<g fill="white">
<path d="M82.908,66.963c0,13.656,0.293,27.323-0.197,40.963
c-0.13,3.606-1.778,8.003-4.258,10.547c-18.482,18.958-37.344,37.546-56.108,56.229c-1.053,1.049-2.228,2.576-3.467,2.703
c-2.113,0.216-5.052,0.212-6.277-1.038c-1.141-1.165-0.869-4.14-0.509-6.193c0.224-1.278,1.677-2.414,2.729-3.464
c17.794-17.769,35.544-35.581,53.491-53.194c2.879-2.825,3.889-5.643,3.863-9.589c-0.162-25.312-0.095-50.628-0.062-75.942
c0.003-2.149-0.281-4.591,0.615-6.368c0.949-1.882,2.993-4.146,4.841-4.433c3.271-0.508,5.05,2.112,5.257,5.317
c0.193,2.985,0.079,5.992,0.081,8.989C82.911,43.314,82.908,55.139,82.908,66.963z"/>
<path d="M134.135,67.524c0,13.986,0.044,27.973-0.051,41.959
c-0.014,1.923-0.347,4.012-1.152,5.734c-8.87,18.968-17.852,37.883-26.844,56.793c-0.777,1.635-1.494,3.862-2.86,4.519
c-1.983,0.951-4.805,1.446-6.739,0.722c-1.163-0.435-1.948-3.617-1.77-5.454c0.215-2.209,1.557-4.338,2.545-6.438
c7.993-16.993,16.092-33.937,23.955-50.988c1.202-2.608,1.901-5.696,1.918-8.566c0.146-25.143,0.055-50.286,0.124-75.429
c0.009-3.142,0.108-6.413,1.005-9.371c0.491-1.622,2.967-3.979,4.137-3.764c2.002,0.367,3.909,2.292,5.398,3.969
c0.727,0.818,0.561,2.552,0.563,3.872c0.034,14.147,0.021,28.295,0.021,42.443C134.302,67.524,134.219,67.524,134.135,67.524z"/>
<path d="M236.904,97.508c0,23.484,0.017,46.968-0.027,70.452
c-0.004,2.139,0.213,4.638-0.778,6.317c-1.103,1.868-3.404,3.981-5.311,4.11c-1.435,0.097-3.737-2.516-4.446-4.382
c-0.905-2.386-0.788-5.232-0.783-7.881c0.087-46.296,0.225-92.593,0.355-138.889c0.005-1.665-0.097-3.351,0.128-4.989
c0.429-3.137,2.161-5.855,5.443-5.072c2.007,0.479,3.778,2.987,5.081,4.963c0.697,1.058,0.202,2.917,0.202,4.415
c0.006,23.651,0.004,47.304,0.004,70.955C236.816,97.508,236.86,97.508,236.904,97.508z"/>
<path d="M185.084,66.376c0,13.488,0.006,26.977-0.008,40.465
c-0.002,1.495,0.436,3.379-0.289,4.401c-1.293,1.822-3.18,4.057-5.083,4.341c-1.436,0.214-3.658-2.087-4.823-3.761
c-0.829-1.191-0.636-3.201-0.638-4.846c-0.032-26.477-0.044-52.954,0.017-79.431c0.005-2.303,0.055-4.841,1.004-6.83
c0.76-1.593,3.046-3.624,4.425-3.466c1.825,0.209,3.826,2.09,4.988,3.777c0.804,1.168,0.393,3.225,0.396,4.884
C185.094,39.399,185.084,52.888,185.084,66.376z"/>
</g>
</mask>
</defs>
<g style="mask: url(#msk)">
<rect x="-2000" y="0" width="2259" height = "2000" fill='url(#grd)' >
<animateTransform
attributeType="XML"
attributeName="transform"
type="translate"
values="0,0; 2000,0; 0,0"
begin="0s"
calcMode="linear"
dur="10s"
repeatCount="indefinite" />
</rect>
</g>
</svg>

You need to add the path for the B outside the masked group like so:
<svg viewBox="0 0 259 190"><title>Header Icon</title>
<defs>
<linearGradient id="grd">
<stop offset="0" stop-color="black" />
</linearGradient>
<mask id="msk">
<g fill="white">
<path d="M82.908,66.963c0,13.656,0.293,27.323-0.197,40.963
c-0.13,3.606-1.778,8.003-4.258,10.547c-18.482,18.958-37.344,37.546-56.108,56.229c-1.053,1.049-2.228,2.576-3.467,2.703
c-2.113,0.216-5.052,0.212-6.277-1.038c-1.141-1.165-0.869-4.14-0.509-6.193c0.224-1.278,1.677-2.414,2.729-3.464
c17.794-17.769,35.544-35.581,53.491-53.194c2.879-2.825,3.889-5.643,3.863-9.589c-0.162-25.312-0.095-50.628-0.062-75.942
c0.003-2.149-0.281-4.591,0.615-6.368c0.949-1.882,2.993-4.146,4.841-4.433c3.271-0.508,5.05,2.112,5.257,5.317
c0.193,2.985,0.079,5.992,0.081,8.989C82.911,43.314,82.908,55.139,82.908,66.963z"/>
<path d="M134.135,67.524c0,13.986,0.044,27.973-0.051,41.959
c-0.014,1.923-0.347,4.012-1.152,5.734c-8.87,18.968-17.852,37.883-26.844,56.793c-0.777,1.635-1.494,3.862-2.86,4.519
c-1.983,0.951-4.805,1.446-6.739,0.722c-1.163-0.435-1.948-3.617-1.77-5.454c0.215-2.209,1.557-4.338,2.545-6.438
c7.993-16.993,16.092-33.937,23.955-50.988c1.202-2.608,1.901-5.696,1.918-8.566c0.146-25.143,0.055-50.286,0.124-75.429
c0.009-3.142,0.108-6.413,1.005-9.371c0.491-1.622,2.967-3.979,4.137-3.764c2.002,0.367,3.909,2.292,5.398,3.969
c0.727,0.818,0.561,2.552,0.563,3.872c0.034,14.147,0.021,28.295,0.021,42.443C134.302,67.524,134.219,67.524,134.135,67.524z"/>
<path d="M236.904,97.508c0,23.484,0.017,46.968-0.027,70.452
c-0.004,2.139,0.213,4.638-0.778,6.317c-1.103,1.868-3.404,3.981-5.311,4.11c-1.435,0.097-3.737-2.516-4.446-4.382
c-0.905-2.386-0.788-5.232-0.783-7.881c0.087-46.296,0.225-92.593,0.355-138.889c0.005-1.665-0.097-3.351,0.128-4.989
c0.429-3.137,2.161-5.855,5.443-5.072c2.007,0.479,3.778,2.987,5.081,4.963c0.697,1.058,0.202,2.917,0.202,4.415
c0.006,23.651,0.004,47.304,0.004,70.955C236.816,97.508,236.86,97.508,236.904,97.508z"/>
<path d="M185.084,66.376c0,13.488,0.006,26.977-0.008,40.465
c-0.002,1.495,0.436,3.379-0.289,4.401c-1.293,1.822-3.18,4.057-5.083,4.341c-1.436,0.214-3.658-2.087-4.823-3.761
c-0.829-1.191-0.636-3.201-0.638-4.846c-0.032-26.477-0.044-52.954,0.017-79.431c0.005-2.303,0.055-4.841,1.004-6.83
c0.76-1.593,3.046-3.624,4.425-3.466c1.825,0.209,3.826,2.09,4.988,3.777c0.804,1.168,0.393,3.225,0.396,4.884
C185.094,39.399,185.084,52.888,185.084,66.376z"/>
</g>
</mask>
</defs>
<g style="mask: url(#msk)">
<rect x="-2000" y="0" width="2259" height = "2000" fill='url(#grd)' >
<animateTransform
attributeType="XML"
attributeName="transform"
type="translate"
values="0,0; 2000,0; 0,0"
begin="0s"
calcMode="linear"
dur="10s"
repeatCount="indefinite" />
</rect>
</g>
<path id="letterB" d="M141.864,42.852c2.736-0.576,7.057-1.008,11.449-1.008c6.264,0,10.297,1.08,13.32,3.528
c2.521,1.872,4.033,4.752,4.033,8.568c0,4.681-3.097,8.785-8.209,10.657v0.144c4.608,1.152,10.009,4.968,10.009,12.169
c0,4.176-1.656,7.345-4.104,9.721c-3.384,3.096-8.856,4.537-16.777,4.537c-4.32,0-7.633-0.288-9.721-0.576V42.852z M148.129,62.726
h5.688c6.624,0,10.513-3.457,10.513-8.137c0-5.688-4.32-7.921-10.657-7.921c-2.88,0-4.536,0.216-5.544,0.432V62.726z
M148.129,85.983c1.224,0.216,3.024,0.288,5.256,0.288c6.48,0,12.457-2.376,12.457-9.433c0-6.625-5.688-9.361-12.528-9.361h-5.185
V85.983z"/>
</svg>

LinearGradiant SVG Animation looks incorrect in Firefox

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?

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>

Svg fill animation for the given path

I am trying to animate an arrow from left to right.The code of my arrow's path is given below:
<svg id="svg_circle" width="100%" height="100%" viewBox = '0 0 450 400'>
<g transform = "translate(0,0)">
<path class="path" stroke="#F0F0F0" fill="#fff" stroke-width="1" opacity="1" d="m34.97813,21.70979l-33.55223,0.47088l-0.0394,-13.57138l34.2665,-0.47295l-0.0208,-7.14282l14.50618,14.42226l-14.95643,15.04345l-0.20382,-8.74944z" id="svg_1">
<animate id="project_anim1" attributeName="fill" from="#fff" to="#4DAF4C" begin="1s" dur="1s" fill="freeze" repeatCount="1"></animate>
</path>
</g>
</svg>
The above is the svg path content of my arrow.
Kindly anyone help me how to fill the path from left to right. Waiting for quick response

You can do this by just animating the <stop>s in a <linear gradient>.
<svg id="svg_circle" width="100%" height="100%" viewBox = '0 0 450 400'>
<defs>
<linearGradient id="left-to-right">
<stop offset="0" stop-color="#4DAF4C">
<animate dur="2s" attributeName="offset" fill="freeze" from="0" to="1" />
</stop>
<stop offset="0" stop-color="#fff">
<animate dur="2s" attributeName="offset" fill="freeze" from="0" to="1" />
</stop>
</linearGradient>
</defs>
<path class="path" stroke="#F0F0F0" fill="url(#left-to-right)" stroke-width="1" opacity="1" d="m34.97813,21.70979l-33.55223,0.47088l-0.0394,-13.57138l34.2665,-0.47295l-0.0208,-7.14282l14.50618,14.42226l-14.95643,15.04345l-0.20382,-8.74944z" id="svg_1" />
</svg>
How this works is that we have a linear gradient representing an abrupt change from green to white. The <animation> elements move the position, of that abrupt change, from the left of the arrow (offset=0) to the right (offset="1").
Note that SVG <animate> elements will not work in IE. If you need to support IE, you will need to use the FakeSmile library or use a different method (such as a JS animation library).

Building upon andreas' answer. You can cover your arrow with a shape that is animated to uncover it.
<svg id="svg_circle" width="450" height="400" viewBox='0 0 450 400'>
<path class="path" stroke="#F0F0F0" fill="#fff"
stroke-width="1" opacity="1" id="svg_1"
d="m34.97813,21.70979l-33.55223,0.47088l-0.0394,
-13.57138l34.2665,-0.47295l-0.0208,-7.14282
l14.50618,14.42226l-14.95643,15.04345l-0.20382,
-8.74944z">
<animate id="project_anim1" attributeName="fill"
from="#fff" to="#4DAF4C" begin="0s" dur="3s"
fill="freeze" repeatCount="indefinite" />
</path>
<rect x="0" y="0" width="53" height="34" fill="#fff">
<animate attributeType="XML" attributeName="x"
from="0" to="53" begin="0s" dur="3s"
repeatCount="indefinite" />
<animate attributeType="XML" attributeName="width"
from="53" to="0" begin="0s" dur="3s"
repeatCount="indefinite" />
</rect>
</svg>

I don't think this is possible with the fill attribute. But instead, you can invert your SVG path to a rectangle with a triangle like hole. Now you just need a second element behind that path, where you can simply animate the scale in x-direction, to fill the hole from left to right.
Here is an image showing the technique:
An here is a working example:
<svg width="100%" height="100%" viewBox='0 0 450 400'>
<rect x="0" y="0" width="1" height="22" style="fill: black;" >
<animateTransform attributeName="transform" type="scale" from="1 1" to="50 1" begin="0s" dur="2s" repeatCount="indefinite" />
</rect>
<path fill="#ffffff" d="M0,0v29.8h86V0H0z M6.5,25V5.5L48.8,25H6.5z"/>
</svg>
Note: The answer was updated from triangle to arrow, I won't update my answer as the technique is the same for every shape.

<svg id="svg_circle" width="100%" height="100%" viewBox = '0 0 450 400'>
<defs>
<linearGradient id="left-to-right">
<stop offset="0" stop-color="#4DAF4C">
<animate dur="2s" attributeName="offset" fill="freeze" from="0" to="1" />
</stop>
<stop offset="0" stop-color="#fff">
<animate dur="2s" attributeName="offset" fill="freeze" from="0" to="1" />
</stop>
</linearGradient>
</defs>
<path class="path" stroke="#F0F0F0" fill="url(#left-to-right)" stroke-width="1" opacity="1" d="m34.97813,21.70979l-33.55223,0.47088l-0.0394,-13.57138l34.2665,-0.47295l-0.0208,-7.14282l14.50618,14.42226l-14.95643,15.04345l-0.20382,-8.74944z" id="svg_1" />
</svg>

svg fill path animation issue

I'm working on svg animation and trying to make the letters filled just once. When they are filled, animation must stop.
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 2000 688" enable-background="new 0 0 2000 688" xml:space="preserve">
<linearGradient id="fill" x1="0.5" y1="1" x2="0.5" y2="0">
<stop offset="0%" stop-opacity="1" stop-color="royalblue"/>
<stop offset="40%" stop-opacity="1" stop-color="royalblue">
<animate attributeName="offset" values="0;1;0" repeatCount="indefinite" dur="4s" begin="0s"/>
</stop>
<stop offset="40%" stop-opacity="0" stop-color="royalblue">
<animate attributeName="offset" values="0;1;0" repeatCount="indefinite" dur="4s" begin="0s"/>
</stop>
<stop offset="100%" stop-opacity="0" stop-color="royalblue"/>
</linearGradient>
<g id="preventive">
<g>
<path fill="url(#fill)" d="M541,222c10,8.5,15,21.5,15,39c0,17.6-5.1,30.4-15.4,38.5c-10.2,8.1-25.9,12.2-46.9,12.2h-18.9v39.7h-31.7
V209.3h50.2C515.2,209.3,531.1,213.5,541,222z M517.7,277.9c3.8-4.3,5.7-10.5,5.7-18.7c0-8.2-2.5-14-7.4-17.5
c-5-3.5-12.6-5.2-23.1-5.2h-18.1v47.8h21.4C506.8,284.3,514,282.2,517.7,277.9z"/>
<path fill="url(#fill)" d="M698,256.5c0,22.8-9,37.5-27.1,44.1l36,50.8h-39.1l-31.5-45.4h-22v45.4h-31.7V209.3h53.9
c22.1,0,37.9,3.7,47.3,11.2C693.3,227.9,698,239.9,698,256.5z M659.7,273.4c3.9-3.5,5.9-9.1,5.9-16.8c0-7.7-2-12.9-6.1-15.8
c-4.1-2.8-11.2-4.3-21.4-4.3h-23.8v42.1h23.2C648.4,278.6,655.8,276.9,659.7,273.4z"/>
<path fill="url(#fill)" d="M834.3,209.3v28.3h-70.8v29.3h63.7v27.1h-63.7v29.5h73v28.1H731.8V209.3H834.3z"/>
<path fill="url(#fill)" d="M923,299.8l36.2-90.5h34.4l-57.2,142.2h-26.8l-57.2-142.2h34.4L923,299.8z"/>
<path fill="url(#fill)" d="M1116.2,209.3v28.3h-70.8v29.3h63.7v27.1h-63.7v29.5h73v28.1h-104.7V209.3H1116.2z"/>
<path fill="url(#fill)" d="M1249.9,209.3h31.7v142.2h-31.7l-67.7-89.1v89.1h-31.7V209.3h29.7l69.8,91.5V209.3z"/>
<path fill="url(#fill)" d="M1376.5,236.7v114.7h-31.7V236.7h-40.3v-27.5h112.3v27.5H1376.5z"/>
<path fill="url(#fill)" d="M1439.7,209.3h31.7v142.2h-31.7V209.3z"/>
<path fill="url(#fill)" d="M1562.1,299.8l36.2-90.5h34.4l-57.2,142.2h-26.8l-57.2-142.2h34.4L1562.1,299.8z"/>
<path fill="url(#fill)" d="M1755.3,209.3v28.3h-70.8v29.3h63.7v27.1h-63.7v29.5h73v28.1h-104.7V209.3H1755.3z"/>
</g>
</g>
</svg>
I've used this exampl, but it doesn't work the way I want it to
Here is my js fiddle
Does anyone have any idea how I can get this to work?

If you don't want it to repeat then don't use repeatCount.
If you want it to freeze as it is post animation use fill="freeze"
I've also adjusted the values of the animation so the stop offsets just go from 0 to 1
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 2000 688" enable-background="new 0 0 2000 688" xml:space="preserve">
<linearGradient id="fill" x1="0.5" y1="1" x2="0.5" y2="0">
<stop offset="0%" stop-opacity="1" stop-color="royalblue"/>
<stop offset="40%" stop-opacity="1" stop-color="royalblue">
<animate attributeName="offset" values="0;1" dur="4s" begin="0s" fill="freeze"/>
</stop>
<stop offset="40%" stop-opacity="0" stop-color="royalblue">
<animate attributeName="offset" values="0;1" dur="4s" begin="0s fill="freeze"/>
</stop>
<stop offset="100%" stop-opacity="0" stop-color="royalblue"/>
</linearGradient>
<g id="preventive">
<g>
<path fill="url(#fill)" d="M541,222c10,8.5,15,21.5,15,39c0,17.6-5.1,30.4-15.4,38.5c-10.2,8.1-25.9,12.2-46.9,12.2h-18.9v39.7h-31.7
V209.3h50.2C515.2,209.3,531.1,213.5,541,222z M517.7,277.9c3.8-4.3,5.7-10.5,5.7-18.7c0-8.2-2.5-14-7.4-17.5
c-5-3.5-12.6-5.2-23.1-5.2h-18.1v47.8h21.4C506.8,284.3,514,282.2,517.7,277.9z"/>
<path fill="url(#fill)" d="M698,256.5c0,22.8-9,37.5-27.1,44.1l36,50.8h-39.1l-31.5-45.4h-22v45.4h-31.7V209.3h53.9
c22.1,0,37.9,3.7,47.3,11.2C693.3,227.9,698,239.9,698,256.5z M659.7,273.4c3.9-3.5,5.9-9.1,5.9-16.8c0-7.7-2-12.9-6.1-15.8
c-4.1-2.8-11.2-4.3-21.4-4.3h-23.8v42.1h23.2C648.4,278.6,655.8,276.9,659.7,273.4z"/>
<path fill="url(#fill)" d="M834.3,209.3v28.3h-70.8v29.3h63.7v27.1h-63.7v29.5h73v28.1H731.8V209.3H834.3z"/>
<path fill="url(#fill)" d="M923,299.8l36.2-90.5h34.4l-57.2,142.2h-26.8l-57.2-142.2h34.4L923,299.8z"/>
<path fill="url(#fill)" d="M1116.2,209.3v28.3h-70.8v29.3h63.7v27.1h-63.7v29.5h73v28.1h-104.7V209.3H1116.2z"/>
<path fill="url(#fill)" d="M1249.9,209.3h31.7v142.2h-31.7l-67.7-89.1v89.1h-31.7V209.3h29.7l69.8,91.5V209.3z"/>
<path fill="url(#fill)" d="M1376.5,236.7v114.7h-31.7V236.7h-40.3v-27.5h112.3v27.5H1376.5z"/>
<path fill="url(#fill)" d="M1439.7,209.3h31.7v142.2h-31.7V209.3z"/>
<path fill="url(#fill)" d="M1562.1,299.8l36.2-90.5h34.4l-57.2,142.2h-26.8l-57.2-142.2h34.4L1562.1,299.8z"/>
<path fill="url(#fill)" d="M1755.3,209.3v28.3h-70.8v29.3h63.7v27.1h-63.7v29.5h73v28.1h-104.7V209.3H1755.3z"/>
</g>
</g>
</svg>