How to make svg stroke-dash one dash

How to make svg stroke-dash one dash - css

I'm trying to reveal the arrow of an svg by animating the stroke-dash property of a circle on top, using masks. The code below shows it in action, but for some reason there are many dashes, there should only be one dash with space around it that's going from 0 to 100 stroke-dash length.. Can someone show me what i'm missing to just have one dash going from 0 - 100 length?
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 526.04 526.04">
<defs>
<style>
.cls-1 {
fill: #2b2b2a;
}
.circular-chart {
position: absolute;
max-width: 50%;
}
.circle {
stroke: #D8D9DB;
fill: none;
stroke-width: 50.8;
stroke-linecap: round;
animation: progress 3s infinite;
}
#keyframes progress {
0% {
stroke-dasharray: 0 100;
}
99% {
stroke-dasharray: 100 0;
}
}
</style>
</defs>
<defs>
<mask id="theMask">
<path class="circle" stroke-dasharray="0, 100" d="M253.47 119.78
a 143.24 143.24 0 0 1 0 286.48
a 143.24 143.24 0 0 1 0 -286.48" />
</mask>
</defs>
<g mask="url(#theMask)">
<path id="arrow" class="cls-1"
d="M435.11,526.36c96-59.59,143.45-166.26,123.34-275.42A262.66,262.66,0,0,0,364.66,44.26C280.39,22.94,178.69,54.6,128.05,101a4.86,4.86,0,0,0-.34,6.82l23.48,26.35a4.85,4.85,0,0,0,6.77.47c67.72-57.58,160.31-70.32,241.31-28.73,72.94,37.45,123.45,114.77,117.82,208.36-2.56,42.57-16.94,81.35-42.64,115.65a214.39,214.39,0,0,1-60.65,55.55,4.87,4.87,0,0,1-6.8-1.84l-9.51-17.43a4.87,4.87,0,0,0-8.34-.34l-43.29,66.24a4.87,4.87,0,0,0,2.95,7.39c30.19,7.22,59.83,14.62,90.17,21.55a4.87,4.87,0,0,0,5.37-7c-3.9-7.34-7.68-14.34-11.06-21.44a4.87,4.87,0,0,1,1.82-6.22"
transform="translate(-36.96 -37.47)" />
<path id="dash-5" class="cls-1"
d="M47.48,244.37l33.77,9.26a4.86,4.86,0,0,0,5.9-3.15c4.28-12.74,8-25.38,13.25-37.36,5.4-12.36,12.29-24.07,18.82-36.14a4.86,4.86,0,0,0-1.48-6.27q-12.54-8.86-25-17.67c-1.16-.82-2.32-1.62-3.56-2.45a4.87,4.87,0,0,0-6.71,1.22C64,178,51.8,207.89,44.35,235.87a16.33,16.33,0,0,0-.45,3.72,4.86,4.86,0,0,0,3.58,4.78"
transform="translate(-36.96 -37.47)" />
<path id="dash-4" class="cls-1"
d="M100.32,387.08a4.84,4.84,0,0,0-7.23-2l-29.42,20.6a4.87,4.87,0,0,0-1.73,5.79c6.94,17.35,24.14,44.47,34.44,54.79a4.85,4.85,0,0,0,6.62.24l26.76-23.23a4.85,4.85,0,0,0,.6-6.72,213.18,213.18,0,0,1-30-49.45"
transform="translate(-36.96 -37.47)" />
<path id="dash-3" class="cls-1"
d="M87.53,348c-3.72-16.86-5.28-33.78-5.81-50.93a4.86,4.86,0,0,0-4.61-4.7l-34.9-1.74a4.86,4.86,0,0,0-5.1,4.7A233,233,0,0,0,45.26,366,4.87,4.87,0,0,0,52,369.09l32.83-15.64A4.85,4.85,0,0,0,87.53,348"
transform="translate(-36.96 -37.47)" />
<path id="dash-2" class="cls-1"
d="M217.77,502.08a221,221,0,0,1-45.32-25.37,4.85,4.85,0,0,0-6.8,1.09l-20.9,29.09a4.88,4.88,0,0,0,1.06,6.76,258.87,258.87,0,0,0,54.73,30.46,4.87,4.87,0,0,0,6.38-2.65l13.49-33.05a4.87,4.87,0,0,0-2.64-6.33"
transform="translate(-36.96 -37.47)" />
<path id="dash-1" class="cls-1"
d="M310.06,522.28a4.88,4.88,0,0,0-4.25-3.34l-39.25-3.1a4.85,4.85,0,0,0-5.16,4L255,554.57a4.86,4.86,0,0,0,3.77,5.65c19.51,4,38.26,3.43,57.65,3.07a4.87,4.87,0,0,0,4.59-6.21c-3.52-12.2-7.28-23.64-10.91-34.8"
transform="translate(-36.96 -37.47)" />
<path class="cls-1" d="M293.57,381.07c-3.94,0-6.05,2.61-6.88,5.67h13.05c-.05-3.83-3.33-5.67-6.17-5.67"
transform="translate(-36.96 -37.47)" />
<path class="cls-1"
d="M329.72,284.23c9.77,0,16.58-6.17,16.58-12.59,0-4.5-4-10-14.91-10-9.12,0-17.73,3.72-24.15,7.45,3.34,9.76,12.33,15.16,22.48,15.16"
transform="translate(-36.96 -37.47)" />
<path class="cls-1"
d="M319.08,394.85c0,2.28,1.83,3.78,4.94,3.78a10.87,10.87,0,0,0,7.33-3V393a10.09,10.09,0,0,0-6.27-1.94c-4.39,0-6,1.72-6,3.77"
transform="translate(-36.96 -37.47)" />
<path class="cls-1"
d="M286.65,346.46c4.62,0,7.28-3.89,7.28-8.39s-2.66-8.17-7.28-8.17-7.11,3.73-7.11,8.17,2.61,8.39,7.11,8.39"
transform="translate(-36.96 -37.47)" />
<path class="cls-1"
d="M255.21,223.2H271v73h-17.6v-56.4l-16.83,7.32L232.85,233Zm31.46,100.54c8.84,0,14.84,6.27,14.84,14.33s-6,14.5-14.84,14.5S272,346.13,272,338.07s5.95-14.33,14.72-14.33m45.11-103c13,0,23,4.24,28.27,6.55l-7.84,12.21A48.39,48.39,0,0,0,332,235.15c-13.36,0-25.31,8.48-26.21,23.51,6.94-5.4,16.19-10.41,28-10.41,19.91,0,29.93,11.95,29.93,23.39,0,15.16-14,27-33.92,27-20.68,0-40.6-12.85-40.6-37.65,0-25.31,20.3-40.21,42.53-40.21M363.1,383.67a12.89,12.89,0,0,0-3.67-.78c-1.95,0-3.17,1.5-4.67,3.44v17.45h-7.44V384.33a41.62,41.62,0,0,0-.78-7.67h6.78a40.36,40.36,0,0,1,.55,4.06c1.67-2.78,3.61-4.94,7.12-4.94a7.69,7.69,0,0,1,4.16,1.11Zm-21.75-59.05h6.77a37.57,37.57,0,0,1,.56,4.06c1.67-2.78,3.61-4.94,7.11-4.94a7.72,7.72,0,0,1,4.17,1.11l-2.06,6.78a12.82,12.82,0,0,0-3.66-.78c-1.95,0-3.17,1.5-4.67,3.44v17.45h-7.45V332.29a41.53,41.53,0,0,0-.77-7.67m-9,79.16a23.58,23.58,0,0,1-.66-3.11,11.79,11.79,0,0,1-9.12,3.78c-6.55,0-10.72-3.95-10.72-9.23,0-5.05,4.33-9,11.89-9a12.82,12.82,0,0,1,7.78,2.23v-2.73c0-2.83-2.44-4.11-5.72-4.11a24.55,24.55,0,0,0-9.78,2.56l-2.28-5.51a30.59,30.59,0,0,1,12.67-2.88c6.22,0,12.5,2.11,12.5,8.22v14.5a17.39,17.39,0,0,0,.78,5.28ZM307.9,342.85V324.62h7.44v17.95c0,2.11,1.84,3.78,4.5,3.78s4.67-1.72,6.23-3.5V324.62h7.39v19.45a40.89,40.89,0,0,0,.66,7.67h-6.89c-.16-.95-.27-2.45-.33-3.5a11.64,11.64,0,0,1-9.11,4.39,9.64,9.64,0,0,1-9.89-9.78m-.58,49.21H286.7a7.43,7.43,0,0,0,7.84,6.61,14.82,14.82,0,0,0,8.33-2.78l3.5,4.72a22.24,22.24,0,0,1-12.78,4c-9.17,0-14.17-6.55-14.17-14.17,0-8.22,6-14.66,14.39-14.66,6.62,0,13.62,4,13.62,14,0,.44,0,1-.11,2.28m-52.09-68.32c6.17,0,10.34,4.11,10.34,9.77v18.23h-7.45V333.79c0-2.05-1.89-3.78-4.56-3.78s-4.89,1.83-6.16,3.5v18.23H240v-38.9h7.39v14.62a11.15,11.15,0,0,1,7.83-3.72m12.08,80h-7.05l-4.73-16.62h-.33l-4.78,16.62h-7l-8.61-27.12h7.78L246.92,394h.34l4.89-17.34h6.72L263.76,394h.33l4.22-17.34h7.62Zm-125.38-104A158.06,158.06,0,1,0,300,141.74a158.05,158.05,0,0,0-158,158.05"
transform="translate(-36.96 -37.47)" />
</g>
</svg>

Your path is quite irregular, but the radius of your shape is about 244 units. Therefore, its total length is about 1533 units. You can use a circle for the mask if you want to keep it simpler. If you do that, you need to rotate it so that it starts where you want it to:
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 526.04 526.04">
<defs>
<style>
.cls-1 {
fill: #2b2b2a;
}
.circular-chart {
position: absolute;
max-width: 50%;
}
.circle {
stroke: #D8D9DB;
fill: none;
stroke-width: 115.8;
stroke-linecap: round;
animation: progress 3s infinite;
}
#keyframes progress {
0% {
stroke-dasharray: 0 1533;
}
99% {
stroke-dasharray: 1533 0;
}
}
</style>
</defs>
<defs>
<mask id="theMask">
<circle class="circle" cx="264" cy="264" r="244" transform="rotate(95, 264, 264)" />
</mask>
</defs>
<g mask="url(#theMask)">
<path id="arrow" class="cls-1"
d="M435.11,526.36c96-59.59,143.45-166.26,123.34-275.42A262.66,262.66,0,0,0,364.66,44.26C280.39,22.94,178.69,54.6,128.05,101a4.86,4.86,0,0,0-.34,6.82l23.48,26.35a4.85,4.85,0,0,0,6.77.47c67.72-57.58,160.31-70.32,241.31-28.73,72.94,37.45,123.45,114.77,117.82,208.36-2.56,42.57-16.94,81.35-42.64,115.65a214.39,214.39,0,0,1-60.65,55.55,4.87,4.87,0,0,1-6.8-1.84l-9.51-17.43a4.87,4.87,0,0,0-8.34-.34l-43.29,66.24a4.87,4.87,0,0,0,2.95,7.39c30.19,7.22,59.83,14.62,90.17,21.55a4.87,4.87,0,0,0,5.37-7c-3.9-7.34-7.68-14.34-11.06-21.44a4.87,4.87,0,0,1,1.82-6.22"
transform="translate(-36.96 -37.47)" />
<path id="dash-5" class="cls-1"
d="M47.48,244.37l33.77,9.26a4.86,4.86,0,0,0,5.9-3.15c4.28-12.74,8-25.38,13.25-37.36,5.4-12.36,12.29-24.07,18.82-36.14a4.86,4.86,0,0,0-1.48-6.27q-12.54-8.86-25-17.67c-1.16-.82-2.32-1.62-3.56-2.45a4.87,4.87,0,0,0-6.71,1.22C64,178,51.8,207.89,44.35,235.87a16.33,16.33,0,0,0-.45,3.72,4.86,4.86,0,0,0,3.58,4.78"
transform="translate(-36.96 -37.47)" />
<path id="dash-4" class="cls-1"
d="M100.32,387.08a4.84,4.84,0,0,0-7.23-2l-29.42,20.6a4.87,4.87,0,0,0-1.73,5.79c6.94,17.35,24.14,44.47,34.44,54.79a4.85,4.85,0,0,0,6.62.24l26.76-23.23a4.85,4.85,0,0,0,.6-6.72,213.18,213.18,0,0,1-30-49.45"
transform="translate(-36.96 -37.47)" />
<path id="dash-3" class="cls-1"
d="M87.53,348c-3.72-16.86-5.28-33.78-5.81-50.93a4.86,4.86,0,0,0-4.61-4.7l-34.9-1.74a4.86,4.86,0,0,0-5.1,4.7A233,233,0,0,0,45.26,366,4.87,4.87,0,0,0,52,369.09l32.83-15.64A4.85,4.85,0,0,0,87.53,348"
transform="translate(-36.96 -37.47)" />
<path id="dash-2" class="cls-1"
d="M217.77,502.08a221,221,0,0,1-45.32-25.37,4.85,4.85,0,0,0-6.8,1.09l-20.9,29.09a4.88,4.88,0,0,0,1.06,6.76,258.87,258.87,0,0,0,54.73,30.46,4.87,4.87,0,0,0,6.38-2.65l13.49-33.05a4.87,4.87,0,0,0-2.64-6.33"
transform="translate(-36.96 -37.47)" />
<path id="dash-1" class="cls-1"
d="M310.06,522.28a4.88,4.88,0,0,0-4.25-3.34l-39.25-3.1a4.85,4.85,0,0,0-5.16,4L255,554.57a4.86,4.86,0,0,0,3.77,5.65c19.51,4,38.26,3.43,57.65,3.07a4.87,4.87,0,0,0,4.59-6.21c-3.52-12.2-7.28-23.64-10.91-34.8"
transform="translate(-36.96 -37.47)" />
<path class="cls-1" d="M293.57,381.07c-3.94,0-6.05,2.61-6.88,5.67h13.05c-.05-3.83-3.33-5.67-6.17-5.67"
transform="translate(-36.96 -37.47)" />
<path class="cls-1"
d="M329.72,284.23c9.77,0,16.58-6.17,16.58-12.59,0-4.5-4-10-14.91-10-9.12,0-17.73,3.72-24.15,7.45,3.34,9.76,12.33,15.16,22.48,15.16"
transform="translate(-36.96 -37.47)" />
<path class="cls-1"
d="M319.08,394.85c0,2.28,1.83,3.78,4.94,3.78a10.87,10.87,0,0,0,7.33-3V393a10.09,10.09,0,0,0-6.27-1.94c-4.39,0-6,1.72-6,3.77"
transform="translate(-36.96 -37.47)" />
<path class="cls-1"
d="M286.65,346.46c4.62,0,7.28-3.89,7.28-8.39s-2.66-8.17-7.28-8.17-7.11,3.73-7.11,8.17,2.61,8.39,7.11,8.39"
transform="translate(-36.96 -37.47)" />
<path class="cls-1"
d="M255.21,223.2H271v73h-17.6v-56.4l-16.83,7.32L232.85,233Zm31.46,100.54c8.84,0,14.84,6.27,14.84,14.33s-6,14.5-14.84,14.5S272,346.13,272,338.07s5.95-14.33,14.72-14.33m45.11-103c13,0,23,4.24,28.27,6.55l-7.84,12.21A48.39,48.39,0,0,0,332,235.15c-13.36,0-25.31,8.48-26.21,23.51,6.94-5.4,16.19-10.41,28-10.41,19.91,0,29.93,11.95,29.93,23.39,0,15.16-14,27-33.92,27-20.68,0-40.6-12.85-40.6-37.65,0-25.31,20.3-40.21,42.53-40.21M363.1,383.67a12.89,12.89,0,0,0-3.67-.78c-1.95,0-3.17,1.5-4.67,3.44v17.45h-7.44V384.33a41.62,41.62,0,0,0-.78-7.67h6.78a40.36,40.36,0,0,1,.55,4.06c1.67-2.78,3.61-4.94,7.12-4.94a7.69,7.69,0,0,1,4.16,1.11Zm-21.75-59.05h6.77a37.57,37.57,0,0,1,.56,4.06c1.67-2.78,3.61-4.94,7.11-4.94a7.72,7.72,0,0,1,4.17,1.11l-2.06,6.78a12.82,12.82,0,0,0-3.66-.78c-1.95,0-3.17,1.5-4.67,3.44v17.45h-7.45V332.29a41.53,41.53,0,0,0-.77-7.67m-9,79.16a23.58,23.58,0,0,1-.66-3.11,11.79,11.79,0,0,1-9.12,3.78c-6.55,0-10.72-3.95-10.72-9.23,0-5.05,4.33-9,11.89-9a12.82,12.82,0,0,1,7.78,2.23v-2.73c0-2.83-2.44-4.11-5.72-4.11a24.55,24.55,0,0,0-9.78,2.56l-2.28-5.51a30.59,30.59,0,0,1,12.67-2.88c6.22,0,12.5,2.11,12.5,8.22v14.5a17.39,17.39,0,0,0,.78,5.28ZM307.9,342.85V324.62h7.44v17.95c0,2.11,1.84,3.78,4.5,3.78s4.67-1.72,6.23-3.5V324.62h7.39v19.45a40.89,40.89,0,0,0,.66,7.67h-6.89c-.16-.95-.27-2.45-.33-3.5a11.64,11.64,0,0,1-9.11,4.39,9.64,9.64,0,0,1-9.89-9.78m-.58,49.21H286.7a7.43,7.43,0,0,0,7.84,6.61,14.82,14.82,0,0,0,8.33-2.78l3.5,4.72a22.24,22.24,0,0,1-12.78,4c-9.17,0-14.17-6.55-14.17-14.17,0-8.22,6-14.66,14.39-14.66,6.62,0,13.62,4,13.62,14,0,.44,0,1-.11,2.28m-52.09-68.32c6.17,0,10.34,4.11,10.34,9.77v18.23h-7.45V333.79c0-2.05-1.89-3.78-4.56-3.78s-4.89,1.83-6.16,3.5v18.23H240v-38.9h7.39v14.62a11.15,11.15,0,0,1,7.83-3.72m12.08,80h-7.05l-4.73-16.62h-.33l-4.78,16.62h-7l-8.61-27.12h7.78L246.92,394h.34l4.89-17.34h6.72L263.76,394h.33l4.22-17.34h7.62Zm-125.38-104A158.06,158.06,0,1,0,300,141.74a158.05,158.05,0,0,0-158,158.05"
transform="translate(-36.96 -37.47)" />
</g>
</svg>

Try
#keyframes progress {
0% {
stroke-dasharray: 0 1000;
}
99% {
stroke-dasharray: 1000 0;
}
}
The number 1000 refers to the length of the path, not the percent filled, so you want it to equal the length of your circle. When you have a value of 100 it creates dashes every 100 units.

If I understand correctly, you want to make an arrow animation along with a growing line from zero to maximum length.
To implement this idea, you can combine two animations:
The first is an animation of line growth from zero to maximum by
changing the stroke dash from zero to maximum.
<!-- Circle drawing animation from zero to 100% -->
<animate
attributeName="stroke-dasharray"
begin="svg1.click"
dur="8s"
values="0 1508; 1508 0"
fill="freeze" />
Animation starts after clicking on the SVG canvas.
<svg id="svg1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" data-name="Layer 1" width="50%" height="50%" viewBox="0 0 526 526" version="1.1" style="border:1px solid gray">
<defs>
<style>
.cls-1 {
fill: #2b2b2a;
}
.circle {
fill: none;
stroke: #2B2B2A;
stroke-width: 26;
stroke-linecap: round;
stroke-dasharray: 0,1508;
}
.circle_trace {
fill: none;
stroke: #EDEDED;
stroke-width: 26;
}
</style>
</defs>
<g id="logo">
<path class="cls-1" d="M293.6 381.1c-3.9 0-6 2.6-6.9 5.7h13.1c0-3.8-3.3-5.7-6.2-5.7" transform="translate(-36.96 -37.47)"/>
<path class="cls-1" d="M329.7 284.2c9.8 0 16.6-6.2 16.6-12.6 0-4.5-4-10-14.9-10-9.1 0-17.7 3.7-24.1 7.5 3.3 9.8 12.3 15.2 22.5 15.2" transform="translate(-36.96 -37.47)"/>
<path class="cls-1" d="M319.1 394.9c0 2.3 1.8 3.8 4.9 3.8a10.9 10.9 0 0 0 7.3-3V393a10.1 10.1 0 0 0-6.3-1.9c-4.4 0-6 1.7-6 3.8" transform="translate(-36.96 -37.47)"/>
<path class="cls-1" d="M286.7 346.5c4.6 0 7.3-3.9 7.3-8.4s-2.7-8.2-7.3-8.2-7.1 3.7-7.1 8.2 2.6 8.4 7.1 8.4" transform="translate(-36.96 -37.47)"/>
<path class="cls-1" d="M255.2 223.2H271v73h-17.6v-56.4l-16.8 7.3L232.9 233Zm31.5 100.5c8.8 0 14.8 6.3 14.8 14.3s-6 14.5-14.8 14.5S272 346.1 272 338.1s6-14.3 14.7-14.3m45.1-103c13 0 23 4.2 28.3 6.6l-7.8 12.2A48.4 48.4 0 0 0 332 235.2c-13.4 0-25.3 8.5-26.2 23.5 6.9-5.4 16.2-10.4 28-10.4 19.9 0 29.9 12 29.9 23.4 0 15.2-14 27-33.9 27-20.7 0-40.6-12.8-40.6-37.6 0-25.3 20.3-40.2 42.5-40.2M363.1 383.7a12.9 12.9 0 0 0-3.7-0.8c-1.9 0-3.2 1.5-4.7 3.4v17.5h-7.4V384.3a41.6 41.6 0 0 0-0.8-7.7h6.8a40.4 40.4 0 0 1 0.6 4.1c1.7-2.8 3.6-4.9 7.1-4.9a7.7 7.7 0 0 1 4.2 1.1Zm-21.7-59h6.8a37.6 37.6 0 0 1 0.6 4.1c1.7-2.8 3.6-4.9 7.1-4.9a7.7 7.7 0 0 1 4.2 1.1l-2.1 6.8a12.8 12.8 0 0 0-3.7-0.8c-1.9 0-3.2 1.5-4.7 3.4v17.5h-7.4V332.3a41.5 41.5 0 0 0-0.8-7.7m-9 79.2a23.6 23.6 0 0 1-0.7-3.1 11.8 11.8 0 0 1-9.1 3.8c-6.5 0-10.7-3.9-10.7-9.2 0-5 4.3-9 11.9-9a12.8 12.8 0 0 1 7.8 2.2v-2.7c0-2.8-2.4-4.1-5.7-4.1a24.6 24.6 0 0 0-9.8 2.6l-2.3-5.5a30.6 30.6 0 0 1 12.7-2.9c6.2 0 12.5 2.1 12.5 8.2v14.5a17.4 17.4 0 0 0 0.8 5.3ZM307.9 342.9V324.6h7.4v18c0 2.1 1.8 3.8 4.5 3.8s4.7-1.7 6.2-3.5V324.6h7.4v19.5a40.9 40.9 0 0 0 0.7 7.7h-6.9c-0.2-0.9-0.3-2.4-0.3-3.5a11.6 11.6 0 0 1-9.1 4.4 9.6 9.6 0 0 1-9.9-9.8m-0.6 49.2H286.7a7.4 7.4 0 0 0 7.8 6.6 14.8 14.8 0 0 0 8.3-2.8l3.5 4.7a22.2 22.2 0 0 1-12.8 4c-9.2 0-14.2-6.5-14.2-14.2 0-8.2 6-14.7 14.4-14.7 6.6 0 13.6 4 13.6 14 0 0.4 0 1-0.1 2.3m-52.1-68.3c6.2 0 10.3 4.1 10.3 9.8v18.2h-7.4V333.8c0-2-1.9-3.8-4.6-3.8s-4.9 1.8-6.2 3.5v18.2H240v-38.9h7.4v14.6a11.2 11.2 0 0 1 7.8-3.7m12.1 80h-7l-4.7-16.6h-0.3l-4.8 16.6h-7l-8.6-27.1h7.8L246.9 394h0.3l4.9-17.3h6.7L263.8 394h0.3l4.2-17.3h7.6Zm-125.4-104A158.1 158.1 0 1 0 300 141.7a158.1 158.1 0 0 0-158 158.1" transform="translate(-36.96 -37.47)"/>
</g>
<!-- Circle trace -->
<path class="circle_trace" d="M502.7 262.8A239.6 240.3 0 0 1 263.2 503.1 239.6 240.3 0 0 1 23.6 262.8 239.6 240.3 0 0 1 263.2 22.5 239.6 240.3 0 0 1 502.7 262.8Z"/>
<!-- Circle -->
<path id="circ" class="circle" d="M502.7 262.8A239.6 240.3 0 0 1 263.2 503.1 239.6 240.3 0 0 1 23.6 262.8 239.6 240.3 0 0 1 263.2 22.5 239.6 240.3 0 0 1 502.7 262.8Z">
<!-- Circle drawing animation from zero to 100% -->
<animate
attributeName="stroke-dasharray"
begin="svg1.click"
dur="5s"
values="0 1508; 1508 0"
fill="freeze" />
</path>
</svg>
The second animation is the movement of the arrow in a circle using
the command animateMotion
<animateMotion
id="an"
dur="5s"
repeatCount="indefinite"
rotate="auto-reverse"
begin="svg1.click"
fill="freeze"
restart="whenNotActive">
<mpath xlink:href="#circ"/>
</animateMotion>
<svg id="svg1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" data-name="Layer 1" width="50%" height="50%" viewBox="0 0 526 526" version="1.1" style="border:1px solid gray">
<defs>
<style>
.cls-1 {
fill: #2b2b2a;
}
.circle {
fill: none;
stroke: #2B2B2A;
stroke-width: 26;
stroke-dasharray: 0,1508;
}
.circle_trace {
fill: none;
stroke: #EDEDED;
stroke-width: 26;
}
</style>
</defs>
<g id="logo">
<path class="cls-1" d="M293.6 381.1c-3.9 0-6 2.6-6.9 5.7h13.1c0-3.8-3.3-5.7-6.2-5.7" transform="translate(-36.96 -37.47)"/>
<path class="cls-1" d="M329.7 284.2c9.8 0 16.6-6.2 16.6-12.6 0-4.5-4-10-14.9-10-9.1 0-17.7 3.7-24.1 7.5 3.3 9.8 12.3 15.2 22.5 15.2" transform="translate(-36.96 -37.47)"/>
<path class="cls-1" d="M319.1 394.9c0 2.3 1.8 3.8 4.9 3.8a10.9 10.9 0 0 0 7.3-3V393a10.1 10.1 0 0 0-6.3-1.9c-4.4 0-6 1.7-6 3.8" transform="translate(-36.96 -37.47)"/>
<path class="cls-1" d="M286.7 346.5c4.6 0 7.3-3.9 7.3-8.4s-2.7-8.2-7.3-8.2-7.1 3.7-7.1 8.2 2.6 8.4 7.1 8.4" transform="translate(-36.96 -37.47)"/>
<path class="cls-1" d="M255.2 223.2H271v73h-17.6v-56.4l-16.8 7.3L232.9 233Zm31.5 100.5c8.8 0 14.8 6.3 14.8 14.3s-6 14.5-14.8 14.5S272 346.1 272 338.1s6-14.3 14.7-14.3m45.1-103c13 0 23 4.2 28.3 6.6l-7.8 12.2A48.4 48.4 0 0 0 332 235.2c-13.4 0-25.3 8.5-26.2 23.5 6.9-5.4 16.2-10.4 28-10.4 19.9 0 29.9 12 29.9 23.4 0 15.2-14 27-33.9 27-20.7 0-40.6-12.8-40.6-37.6 0-25.3 20.3-40.2 42.5-40.2M363.1 383.7a12.9 12.9 0 0 0-3.7-0.8c-1.9 0-3.2 1.5-4.7 3.4v17.5h-7.4V384.3a41.6 41.6 0 0 0-0.8-7.7h6.8a40.4 40.4 0 0 1 0.6 4.1c1.7-2.8 3.6-4.9 7.1-4.9a7.7 7.7 0 0 1 4.2 1.1Zm-21.7-59h6.8a37.6 37.6 0 0 1 0.6 4.1c1.7-2.8 3.6-4.9 7.1-4.9a7.7 7.7 0 0 1 4.2 1.1l-2.1 6.8a12.8 12.8 0 0 0-3.7-0.8c-1.9 0-3.2 1.5-4.7 3.4v17.5h-7.4V332.3a41.5 41.5 0 0 0-0.8-7.7m-9 79.2a23.6 23.6 0 0 1-0.7-3.1 11.8 11.8 0 0 1-9.1 3.8c-6.5 0-10.7-3.9-10.7-9.2 0-5 4.3-9 11.9-9a12.8 12.8 0 0 1 7.8 2.2v-2.7c0-2.8-2.4-4.1-5.7-4.1a24.6 24.6 0 0 0-9.8 2.6l-2.3-5.5a30.6 30.6 0 0 1 12.7-2.9c6.2 0 12.5 2.1 12.5 8.2v14.5a17.4 17.4 0 0 0 0.8 5.3ZM307.9 342.9V324.6h7.4v18c0 2.1 1.8 3.8 4.5 3.8s4.7-1.7 6.2-3.5V324.6h7.4v19.5a40.9 40.9 0 0 0 0.7 7.7h-6.9c-0.2-0.9-0.3-2.4-0.3-3.5a11.6 11.6 0 0 1-9.1 4.4 9.6 9.6 0 0 1-9.9-9.8m-0.6 49.2H286.7a7.4 7.4 0 0 0 7.8 6.6 14.8 14.8 0 0 0 8.3-2.8l3.5 4.7a22.2 22.2 0 0 1-12.8 4c-9.2 0-14.2-6.5-14.2-14.2 0-8.2 6-14.7 14.4-14.7 6.6 0 13.6 4 13.6 14 0 0.4 0 1-0.1 2.3m-52.1-68.3c6.2 0 10.3 4.1 10.3 9.8v18.2h-7.4V333.8c0-2-1.9-3.8-4.6-3.8s-4.9 1.8-6.2 3.5v18.2H240v-38.9h7.4v14.6a11.2 11.2 0 0 1 7.8-3.7m12.1 80h-7l-4.7-16.6h-0.3l-4.8 16.6h-7l-8.6-27.1h7.8L246.9 394h0.3l4.9-17.3h6.7L263.8 394h0.3l4.2-17.3h7.6Zm-125.4-104A158.1 158.1 0 1 0 300 141.7a158.1 158.1 0 0 0-158 158.1" transform="translate(-36.96 -37.47)"/>
</g>
<!-- Circle trace -->
<path class="circle_trace" d="M502.7 262.8A239.6 240.3 0 0 1 263.2 503.1 239.6 240.3 0 0 1 23.6 262.8 239.6 240.3 0 0 1 263.2 22.5 239.6 240.3 0 0 1 502.7 262.8Z"/>
<!-- Circle -->
<path id="circ" class="circle" d="M502.7 262.8A239.6 240.3 0 0 1 263.2 503.1 239.6 240.3 0 0 1 23.6 262.8 239.6 240.3 0 0 1 263.2 22.5 239.6 240.3 0 0 1 502.7 262.8Z"/>
<!-- the Arrow -->
<polyline id="pol" transform="translate(7 -25) rotate(90)" fill-opacity="1" points="0,0 25,43.3 50,0" fill="#2B2B2A" >
<!-- Arrow motion animation -->
<animateMotion
id="an"
dur="5s"
repeatCount="indefinite"
rotate="auto-reverse"
begin="svg1.click"
fill="freeze"
restart="whenNotActive">
<mpath xlink:href="#circ"/>
</animateMotion>
</polyline>
</svg>
We combine two animations by setting the same start time for both animations and the same execution time
<svg id="svg1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" data-name="Layer 1" width="50%" height="50%" viewBox="0 0 526 526" version="1.1" style="border:1px solid gray">
<defs>
<style>
.cls-1 {
fill: #2b2b2a;
}
.circle {
fill: none;
stroke: #2B2B2A;
stroke-width: 26;
stroke-dasharray: 0,1508;
}
.circle_trace {
fill: none;
stroke: #EDEDED;
stroke-width: 26;
}
</style>
</defs>
<g id="logo">
<path class="cls-1" d="M293.6 381.1c-3.9 0-6 2.6-6.9 5.7h13.1c0-3.8-3.3-5.7-6.2-5.7" transform="translate(-36.96 -37.47)"/>
<path class="cls-1" d="M329.7 284.2c9.8 0 16.6-6.2 16.6-12.6 0-4.5-4-10-14.9-10-9.1 0-17.7 3.7-24.1 7.5 3.3 9.8 12.3 15.2 22.5 15.2" transform="translate(-36.96 -37.47)"/>
<path class="cls-1" d="M319.1 394.9c0 2.3 1.8 3.8 4.9 3.8a10.9 10.9 0 0 0 7.3-3V393a10.1 10.1 0 0 0-6.3-1.9c-4.4 0-6 1.7-6 3.8" transform="translate(-36.96 -37.47)"/>
<path class="cls-1" d="M286.7 346.5c4.6 0 7.3-3.9 7.3-8.4s-2.7-8.2-7.3-8.2-7.1 3.7-7.1 8.2 2.6 8.4 7.1 8.4" transform="translate(-36.96 -37.47)"/>
<path class="cls-1" d="M255.2 223.2H271v73h-17.6v-56.4l-16.8 7.3L232.9 233Zm31.5 100.5c8.8 0 14.8 6.3 14.8 14.3s-6 14.5-14.8 14.5S272 346.1 272 338.1s6-14.3 14.7-14.3m45.1-103c13 0 23 4.2 28.3 6.6l-7.8 12.2A48.4 48.4 0 0 0 332 235.2c-13.4 0-25.3 8.5-26.2 23.5 6.9-5.4 16.2-10.4 28-10.4 19.9 0 29.9 12 29.9 23.4 0 15.2-14 27-33.9 27-20.7 0-40.6-12.8-40.6-37.6 0-25.3 20.3-40.2 42.5-40.2M363.1 383.7a12.9 12.9 0 0 0-3.7-0.8c-1.9 0-3.2 1.5-4.7 3.4v17.5h-7.4V384.3a41.6 41.6 0 0 0-0.8-7.7h6.8a40.4 40.4 0 0 1 0.6 4.1c1.7-2.8 3.6-4.9 7.1-4.9a7.7 7.7 0 0 1 4.2 1.1Zm-21.7-59h6.8a37.6 37.6 0 0 1 0.6 4.1c1.7-2.8 3.6-4.9 7.1-4.9a7.7 7.7 0 0 1 4.2 1.1l-2.1 6.8a12.8 12.8 0 0 0-3.7-0.8c-1.9 0-3.2 1.5-4.7 3.4v17.5h-7.4V332.3a41.5 41.5 0 0 0-0.8-7.7m-9 79.2a23.6 23.6 0 0 1-0.7-3.1 11.8 11.8 0 0 1-9.1 3.8c-6.5 0-10.7-3.9-10.7-9.2 0-5 4.3-9 11.9-9a12.8 12.8 0 0 1 7.8 2.2v-2.7c0-2.8-2.4-4.1-5.7-4.1a24.6 24.6 0 0 0-9.8 2.6l-2.3-5.5a30.6 30.6 0 0 1 12.7-2.9c6.2 0 12.5 2.1 12.5 8.2v14.5a17.4 17.4 0 0 0 0.8 5.3ZM307.9 342.9V324.6h7.4v18c0 2.1 1.8 3.8 4.5 3.8s4.7-1.7 6.2-3.5V324.6h7.4v19.5a40.9 40.9 0 0 0 0.7 7.7h-6.9c-0.2-0.9-0.3-2.4-0.3-3.5a11.6 11.6 0 0 1-9.1 4.4 9.6 9.6 0 0 1-9.9-9.8m-0.6 49.2H286.7a7.4 7.4 0 0 0 7.8 6.6 14.8 14.8 0 0 0 8.3-2.8l3.5 4.7a22.2 22.2 0 0 1-12.8 4c-9.2 0-14.2-6.5-14.2-14.2 0-8.2 6-14.7 14.4-14.7 6.6 0 13.6 4 13.6 14 0 0.4 0 1-0.1 2.3m-52.1-68.3c6.2 0 10.3 4.1 10.3 9.8v18.2h-7.4V333.8c0-2-1.9-3.8-4.6-3.8s-4.9 1.8-6.2 3.5v18.2H240v-38.9h7.4v14.6a11.2 11.2 0 0 1 7.8-3.7m12.1 80h-7l-4.7-16.6h-0.3l-4.8 16.6h-7l-8.6-27.1h7.8L246.9 394h0.3l4.9-17.3h6.7L263.8 394h0.3l4.2-17.3h7.6Zm-125.4-104A158.1 158.1 0 1 0 300 141.7a158.1 158.1 0 0 0-158 158.1" transform="translate(-36.96 -37.47)"/>
</g>
<!-- Circle trace -->
<path class="circle_trace" d="M502.7 262.8A239.6 240.3 0 0 1 263.2 503.1 239.6 240.3 0 0 1 23.6 262.8 239.6 240.3 0 0 1 263.2 22.5 239.6 240.3 0 0 1 502.7 262.8Z"/>
<!-- Circle -->
<path id="circ" class="circle" d="M502.7 262.8A239.6 240.3 0 0 1 263.2 503.1 239.6 240.3 0 0 1 23.6 262.8 239.6 240.3 0 0 1 263.2 22.5 239.6 240.3 0 0 1 502.7 262.8Z">
<!-- Circle drawing animation from zero to 100% -->
<animate attributeName="stroke-dasharray" begin="svg1.click" dur="8s" values="0 1508; 1508 0" fill="freeze" />
</path>
<!-- the Arrow -->
<polyline id="pol" transform="translate(7 -25) rotate(90)" fill-opacity="1" points="0,0 25,43.3 50,0" fill="#2B2B2A" >
<!-- Arrow motion animation -->
<animateMotion
id="an"
dur="8s"
repeatCount="1"
rotate="auto-reverse"
begin="svg1.click"
fill="freeze"
restart="whenNotActive">
<mpath xlink:href="#circ"/>
</animateMotion>
<!-- Arrow disappearance animation -->
<set attributeName="fill-opacity" to="0" begin="an.end" />
</polyline>
</svg>

Related

How do I align path element row-wise in SVG component?

Background:
This is how it looks now
const IconLoader = () => (
<svg id="logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
<title>Loader Logo</title>
<g>
<path
stroke="currentColor"
strokeWidth="5"
strokeLinecap="round"
strokeLinejoin="round"
d="M 45.2 0 L 54.9 0 L 32.7 70 L 22.2 70 L 0 0 L 9.8 0 L 27.5 58.3 L 45.2 0 Z"
/>
<path
stroke="currentColor"
strokeWidth="5"
strokeLinecap="round"
strokeLinejoin="round"
d="M 0 70.001 L 0 0.001 L 18 0.001 A 35.716 35.716 0 0 1 24.843 0.616 Q 28.805 1.39 31.9 3.138 A 18.895 18.895 0 0 1 35.15 5.451 Q 41.012 10.645 41.286 20.428 A 34.665 34.665 0 0 1 41.3 21.401 Q 41.3 27.401 38.45 32.251 Q 35.6 37.101 30.5 39.901 L 44.5 70.001 L 33.7 70.001 L 21.2 42.601 Q 19.6 42.801 17.9 42.801 L 9.1 42.801 L 9.1 70.001 L 0 70.001 Z M 9.1 34.401 L 17.2 34.401 A 27.803 27.803 0 0 0 21.151 34.14 Q 23.178 33.848 24.8 33.23 A 10.46 10.46 0 0 0 28.3 31.101 A 10.525 10.525 0 0 0 31.154 26.328 Q 31.8 24.151 31.8 21.401 A 19.246 19.246 0 0 0 31.458 17.651 Q 31.023 15.465 30.036 13.784 A 9.824 9.824 0 0 0 28.3 11.601 Q 25.761 9.207 21.066 8.55 A 27.955 27.955 0 0 0 17.2 8.301 L 9.1 8.301 L 9.1 34.401 Z"
/>
</g>
</svg>
);
Question:
How do I make it one after the other? Row-wise?
Like: VR

As commented by #Robert Longson:
Add a translate transform to one or both paths so they are situated
wherever you want them to be
Consider using transform = "translate(x y)" to move the letters into place
<svg id="logo" xmlns="http://www.w3.org/2000/svg" width="25%" height="25%" viewBox="-4 -4 120 100">
<title>Loader Logo</title>
<g stroke="currentColor"
stroke-width="5"
stroke-linecap="round"
stroke-linejoin="round" >
<path
d="M 45.2 0 L 54.9 0 L 32.7 70 L 22.2 70 L 0 0 L 9.8 0 L 27.5 58.3 L 45.2 0 Z"
/>
<path transform="translate(65 0)"
d="M 0 70.001 L 0 0.001 L 18 0.001 A 35.716 35.716 0 0 1 24.843 0.616 Q 28.805 1.39 31.9 3.138 A 18.895 18.895 0 0 1 35.15 5.451 Q 41.012 10.645 41.286 20.428 A 34.665 34.665 0 0 1 41.3 21.401 Q 41.3 27.401 38.45 32.251 Q 35.6 37.101 30.5 39.901 L 44.5 70.001 L 33.7 70.001 L 21.2 42.601 Q 19.6 42.801 17.9 42.801 L 9.1 42.801 L 9.1 70.001 L 0 70.001 Z M 9.1 34.401 L 17.2 34.401 A 27.803 27.803 0 0 0 21.151 34.14 Q 23.178 33.848 24.8 33.23 A 10.46 10.46 0 0 0 28.3 31.101 A 10.525 10.525 0 0 0 31.154 26.328 Q 31.8 24.151 31.8 21.401 A 19.246 19.246 0 0 0 31.458 17.651 Q 31.023 15.465 30.036 13.784 A 9.824 9.824 0 0 0 28.3 11.601 Q 25.761 9.207 21.066 8.55 A 27.955 27.955 0 0 0 17.2 8.301 L 9.1 8.301 L 9.1 34.401 Z"
/>
</g>
</svg>

Prevent snap at the end of SVG color gradient animation

I am looking to have a smooth animated gradient but I'm stuck at this point with a glitch or snap at the end of the animation making it jumpy.
Full code with the snap at the end of aniamtion (after 8 seconds) :
html,
body {
height: 100%;
}
body {
position: relative;
}
svg {
display: block;
margin: 0 auto;
position: relative;
top: 50%;
transform: translateY(-50%);
}
.page-foot {
background: #ededed;
bottom: 0;
color: #222;
position: fixed;
width: 100%;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: flex-start;
align-content: flex-start;
align-items: flex-start;
}
.page-foot-column {
order: 0;
flex: 1 1 auto;
align-self: auto;
padding: 1em;
&:nth-child(2) {
text-align: right;
}
}
a {
color: inherit;
&:hover {
text-decoration: underline;
}
}
<?xml version="1.0" encoding="UTF-8"?>
<svg enable-background="new 0 0 2734.8 624.7" version="1.1" viewBox="0 0 2734.8 624.7" xml:space="preserve" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="logo-gradient" x1="1107" x2="1762.2" y1="506.45" y2="-308.45" gradientUnits="userSpaceOnUse">
<stop stop-color="#FE9637" offset="0">
<animate attributeName="stop-color" values="#FE9637;#FF46D5;#C030C5;#7C52FC;#4085F0;#08B3E5;#1BD7BB;#2AF598;#1BD7BB;#08B3E5;#4085F0;#7C52FC;#C030C5;#FF46D5;#FE9637" dur="8s" repeatCount="indefinite"></animate>
</stop>
<stop stop-color="#FE9637" offset=".1250">
<animate attributeName="stop-color" values="#FE9637;#FE9637;#FF46D5;#C030C5;#7C52FC;#4085F0;#08B3E5;#1BD7BB;#2AF598;#1BD7BB;#08B3E5;#4085F0;#7C52FC;#C030C5;#FF46D5" dur="8s" repeatCount="indefinite"></animate>
</stop>
<stop stop-color="#FF46D5" offset=".2500">
<animate attributeName="stop-color" values="#FF46D5;#FE9637;#FE9637;#FF46D5;#C030C5;#7C52FC;#4085F0;#08B3E5;#1BD7BB;#2AF598;#1BD7BB;#08B3E5;#4085F0;#7C52FC;#C030C5" dur="8s" repeatCount="indefinite"></animate>
</stop>
<stop stop-color="#C030C5" offset=".3750">
<animate attributeName="stop-color" values="#C030C5;#FF46D5;#FE9637;#FE9637;#FF46D5;#C030C5;#7C52FC;#4085F0;#08B3E5;#1BD7BB;#2AF598;#1BD7BB;#08B3E5;#4085F0;#7C52FC" dur="8s" repeatCount="indefinite"></animate>
</stop>
<stop stop-color="#7C52FC" offset=".5000">
<animate attributeName="stop-color" values="#7C52FC;#C030C5;#FF46D5;#FE9637;#FE9637;#FF46D5;#C030C5;#7C52FC;#4085F0;#08B3E5;#1BD7BB;#2AF598;#1BD7BB;#08B3E5;#4085F0" dur="8s" repeatCount="indefinite"></animate>
</stop>
<stop stop-color="#4085F0" offset=".625">
<animate attributeName="stop-color" values="#4085F0;#7C52FC;#C030C5;#FF46D5;#FE9637;#FE9637;#FF46D5;#C030C5;#7C52FC;#4085F0;#08B3E5;#1BD7BB;#2AF598;#1BD7BB;#08B3E5" dur="8s" repeatCount="indefinite"></animate>
</stop>
<stop stop-color="#08B3E5" offset=".750">
<animate attributeName="stop-color" values="#08B3E5;#4085F0;#7C52FC;#C030C5;#FF46D5;#FE9637;#FE9637;#FF46D5;#C030C5;#7C52FC;#4085F0;#08B3E5;#1BD7BB;#2AF598;#1BD7BB" dur="8s" repeatCount="indefinite"></animate>
</stop>
<stop stop-color="#1BD7BB" offset=".875">
<animate attributeName="stop-color" values="#1BD7BB;#08B3E5;#4085F0;#7C52FC;#C030C5;#FF46D5;#FE9637;#FE9637;#FF46D5;#C030C5;#7C52FC;#4085F0;#08B3E5;#1BD7BB;#2AF598" dur="8s" repeatCount="indefinite"></animate>
</stop>
<stop stop-color="#2AF598" offset="1">
<animate attributeName="stop-color" values="#2AF598;#1BD7BB;#08B3E5;#4085F0;#7C52FC;#C030C5;#FF46D5;#FE9637;#FE9637;#FF46D5;#C030C5;#7C52FC;#4085F0;#08B3E5;#1BD7BB" dur="8s" repeatCount="indefinite"></animate>
</stop>
</linearGradient>
</defs>
<g>
<path fill="url('#logo-gradient')" d="m372.1 153.2c-30.2-29.6-66.6-44-109-44-41.8 0-78.5 14.3-108.7 44-30.6 29.6-47.3 66-47.3 107.8v4.6c0 42.1 14.7 79.1 45.5 110.2s68.1 45.8 110.6 45.8c25.3 0 49.5-6.1 72.4-18 11-5.8 21.4-12.8 30.8-21.1s17.7-17.4 24.7-27.5c2.7-4 4.3-8.2 4.3-12.8v-2.4s-0.3-1.2-0.6-2.1c-1.2-6.4-4.6-11.3-10.1-14.7-4-2.4-8.2-3.7-12.5-3.7h-3.4c-7 1.5-12.2 4.6-15.6 9.2-5.2 7.6-11.3 14.4-18 20.1s-14 10.7-21.7 14.7h0.3c-8.2 4-16.5 7-24.7 9.2s-17.1 3.4-26.6 3.4c-29.9 0-55-10.7-76.3-31.1-8.9-8.9-16.5-17.7-21.7-27.8s-8.9-20.8-10.7-32.4h242.2c11.3 0 18.6-5.5 21.7-16.5l-0.3 0.3c0.6-1.5 0.9-2.8 0.9-3.7v-2.8l0.6 0.9v-0.6c0-21.7-4.6-41.5-12.5-59.5-8-18-19.3-34.8-34.3-49.5zm-2.1 87.7h-215.3c5.2-21.7 16.2-40.3 33-55.9v0.3c22-19.5 46.7-29.3 74.5-29.3 14 0 27.5 2.4 40.3 7.3s24.7 11.6 34.8 21.1c7.9 7.3 14.4 16.2 20.1 25.6s10.1 19.5 12.8 30.2l-0.2 0.7zm520.7-117c0.9 2.1 1.2 4.9 1.2 8.2v266.6c0 3.4-0.3 6.1-1.2 8.2s-1.8 4-3 5.5c-5.8 6.1-11.9 9.2-18.3 9.2-5.8 0-11-2.8-15.6-7-4.9-4.6-7.3-9.8-7.3-16.2v-266.6c0-6.4 2.4-11.3 7.3-15.9 4.5-4.2 9.7-6.9 15.4-7 6.7 0.1 13 3.1 18.8 9.4 0.9 1.6 1.8 3.5 2.7 5.6zm-21.3-15h-0.2s-0.1 0-0.2 0h0.4zm148.4 78.2c-21.7 21.7-32.4 47.6-32.4 77.9 0 30.5 10.7 56.5 32.4 77.9 21.4 21.4 47.3 32.1 77.9 32.1 26.6 0 49.8-8.2 69.6-24.4 4.3-3.4 8.5-5.2 13.1-5.2h3.1c6.4 0.9 11.6 4 15.6 9.2h-0.3v0.3 0.3c1.5 2.1 2.8 4.3 3.4 6.7s0.9 5.2 0.9 8.5c-0.3 7-3.4 12.2-8.8 15.3l0.3-0.3c-28.1 23.2-60.5 34.8-97.4 34.8-42.4 0-79.4-14.7-109.9-45.2s-45.5-67.5-45.5-109.9c0-43.1 15.3-79.7 45.5-109.6 30.8-30.2 67.5-45.5 109.9-45.5 17.7 0 34.8 3.1 51.3 8.9s31.4 14.1 45.2 24.7c2.8 2.1 4.9 4.6 6.4 7s2.4 5.8 3.1 10.1c0 2.8-0.6 5.5-1.5 8.2-0.9 2.8-2.1 5.2-3.7 7.6-1.8 2.1-4 4-6.1 5.2s-4.9 2.1-8.2 2.4h-3.1c-4.6 0-9.2-1.5-13.8-4.9-10.1-7.6-21.1-13.7-33-18s-23.8-6.4-36-6.4c-30.4-0.1-56.3 10.6-78 32.3zm640.7 105.7c5.2 9.5 7.6 21.4 7.6 36v6.1c0 2.1 0 4.3-0.3 6.1-0.6 6.1-2.1 12.2-4.9 18.6-2.7 6.4-6.4 12.5-11 18.3-11.6 15-26.6 26.3-44.6 33.9s-39.4 11.3-64.1 11.3c-25.3 0-48.6-5.5-69.6-17.4-10.4-5.8-19.8-12.8-28.4-21.1s-15.6-17.4-21.1-27.5h0.3c-2.4-3.7-3.7-7.6-3.7-11.6v-3.4c0-0.9 0.3-2.1 0.9-3.7 0.9-2.8 2.1-5.2 3.7-7.3 1.5-2.1 4-4 7-5.5l-0.3 0.3c3.7-2.4 7.3-3.7 11-3.7 2.8 0 5.2 0.6 7.3 1.5v-0.3c2.7 0.9 5.2 2.4 7.3 4.3 2.1 1.8 4 4 5.5 6.4 4 6.4 8.6 12.2 13.7 17.7 5.2 5.5 11.3 10.1 18.3 14 7.3 4 15 7 22.6 9.2 7.6 2.1 15.9 3 24.4 3 16.5 0 30.8-2.4 43.1-7.3 12.2-4.9 22-11.6 29-20.1 4-5.2 6.1-9.5 6.7-12.8v-1.8c0.3-1.5 0.6-3 0.6-4.6v-3.7c0-2.8 0-5.2-0.3-7.3s-0.9-4-1.8-5.5c-2.8-4.6-7.6-10.1-15.3-15.3-5.5-4-13.8-6.4-23.8-8.5-10.1-2.1-22-3-36-3-19.2 0-36-1.8-50.4-5.5-14.3-3.7-26-8.9-35.1-15.6-7-5.2-13.1-10.7-18.3-16.2s-9.2-11-11.9-16.5c-4-8.2-6.4-19.2-5.8-33l0.3-7.9c0.3-5.8 1.8-11.9 4.6-18.3s6.4-12.5 11-18.6c11.6-15 26.6-26.3 44.6-33.9s39.4-11.6 63.8-11.6c16.5 0 32.4 2.8 47.6 8.2 15.3 5.5 29 13.1 41.5 22.9 2.7 2.1 4.9 4.3 6.4 6.4s2.4 5.5 2.8 10.1c0 3.1-0.3 5.8-0.9 8.2s-1.8 4.6-3.7 6.7c-2.1 2.8-4.3 4.6-6.7 5.8s-5.8 2.4-10.1 2.4c-5.5 0.3-10.4-1.5-14.3-4.3-0.3 0-0.6-0.3-0.9-0.6-17.4-14.7-37.6-22-60.5-22-16.8 0-31.2 2.4-43.1 7.3s-21.4 11.6-28.7 20.1v-0.3c-4 5.2-6.1 9.5-6.4 12.8v3.7c0 7.9 0.3 13.1 1.2 15.6v-0.6c2.4 4.6 7.6 9.8 15.6 15.3 5.8 3.7 13.7 6.7 23.8 8.9 10.1 2.1 22 3.4 35.4 3.4 18.9 0 35.7 1.8 50.1 5.2 14.3 3.4 26.3 8.2 35.7 14.7 6.4 4.6 11.9 9.5 16.8 14.4s8.9 10.1 11.9 15.3h-0.3l0.2 2.2zm79.2-181.7h-0.2s-0.1 0-0.2 0h0.4zm21.3 14.9c0.9 2.1 1.2 4.9 1.2 8.2v264.5c0 3.4-0.3 6.1-1.2 8.2s-1.8 4-3.1 5.5c-5.8 6.1-11.9 9.2-18.3 9.2-5.8 0-11-2.8-15.6-7-4.9-4.6-7.3-9.8-7.3-16.2v-264.4c0-6.4 2.4-11.3 7.3-15.9 4.5-4.2 9.7-6.9 15.4-7 6.7 0.1 13 3.1 18.8 9.4 1 1.6 1.9 3.4 2.8 5.5zm690.6 27.2c-30.2-29.6-66.6-44-109-44-41.8 0-78.5 14.3-108.7 44-30.6 29.6-47.3 66-47.3 107.8v4.6c0 42.1 14.6 79.1 45.5 110.2 30.8 31.1 68.1 45.8 110.6 45.8 25.3 0 49.5-6.1 72.4-18 11-5.8 21.4-12.8 30.8-21.1 9.5-8.2 17.7-17.4 24.7-27.5 2.7-4 4.3-8.2 4.3-12.8v-2.4s-0.3-1.2-0.6-2.1c-1.2-6.4-4.6-11.3-10.1-14.7-4-2.4-8.2-3.7-12.5-3.7h-3.4c-7 1.5-12.2 4.6-15.6 9.2-5.2 7.6-11.3 14.4-18 20.1s-14 10.7-21.7 14.7h0.3c-8.2 4-16.5 7-24.7 9.2s-17.1 3.4-26.6 3.4c-29.9 0-55-10.7-76.3-31.1-8.9-8.9-16.5-17.7-21.7-27.8s-8.9-20.8-10.7-32.4h242.2c11.3 0 18.6-5.5 21.7-16.5l-0.3 0.3c0.6-1.5 0.9-2.8 0.9-3.7v-2.8l0.6 0.9v-0.6c0-21.7-4.6-41.5-12.5-59.5-8.1-18-19.4-34.8-34.3-49.5zm-2.2 87.7h-215.3c5.2-21.7 16.2-40.3 33-55.9v0.3c22-19.5 46.7-29.3 74.5-29.3 14 0 27.5 2.4 40.3 7.3s24.7 11.6 34.8 21.1c7.9 7.3 14.4 16.2 20.2 25.6 5.8 9.5 10.1 19.5 12.8 30.2l-0.3 0.7zm213.5-240.7c2.3 0 4.3 0.9 6 2.5 1.7 1.5 2.6 3.5 2.6 6.1 0 2.2-0.9 4.2-2.6 5.9-1.8 1.7-3.8 2.4-6.1 2.4h-11.4v45c0 1.2-0.2 2.3-0.7 3.3-0.4 1-1 1.9-1.8 2.7-1.7 1.7-3.6 2.6-5.9 2.6s-4.3-0.8-6.1-2.4c-1.7-1.7-2.4-3.7-2.4-6.1v-45h-11.5c-2.1 0-4.1-0.8-5.9-2.4-1.7-1.9-2.6-3.9-2.6-6 0-2.3 0.9-4.3 2.6-6s3.6-2.5 5.9-2.5c0.1-0.1 39.9-0.1 39.9-0.1zm73.4 62.2c0 2.1-0.8 4.1-2.6 6-1.7 1.8-3.8 2.7-6 2.7-2.3 0-4.3-0.9-6-2.7-1.8-1.8-2.7-3.8-2.7-6v-26.2c-0.2 0.3-0.4 0.7-0.7 1-0.2 0.3-0.4 0.7-0.7 1l-1.4 2.3c-0.4 0.8-1 1.5-1.6 2.3-1 1-2 1.8-3 2.4s-2.3 1-3.9 1c-1.4 0-2.7-0.3-3.8-1s-2.1-1.5-3.1-2.5l-4.8-6.8v26.3c0 2.3-0.8 4.3-2.3 6-0.8 0.8-1.7 1.4-2.7 2s-2.1 0.8-3.3 0.8c-2.3 0-4.3-0.9-6.1-2.8-1.7-1.7-2.4-3.7-2.4-6v-53.3c0-2.1 0.6-3.8 1.6-5s2.4-2.2 4.3-3h-0.1c0.6-0.2 1.1-0.3 1.6-0.4s0.9-0.1 1.3-0.1c1.6 0 2.9 0.3 4 1s2.1 1.5 2.9 2.7l2.1 3.1c0.8 1.1 1.3 2 1.9 2.8v-0.2l2.1 3.2 2.1 3 2.2 3.1 2.8 3.6 6.6-9.5 6.4-9.4v0.1c1.7-2.5 4-3.9 7-3.9 1 0 1.9 0.2 2.7 0.5l-0.1-0.1c4.1 1.2 6.1 4 6.1 8.3v53.4l-0.4 0.3zm-208.3-62.4h-2448.7c-42.6 0-77.3 34.7-77.3 77.3v374.1c0 42.6 34.7 77.3 77.3 77.3h73.6l84.9 84.9c7.1 7.1 16.6 11 26.6 11 10.1 0 19.5-3.9 26.6-11l85-84.9h2152c42.6 0 77.3-34.7 77.3-77.3v-374.1c0-42.6-34.6-77.3-77.3-77.3zm33.6 451.4c0 18.5-15.1 33.6-33.6 33.6h-2004.8v-111.6c4.9 5.2 9.5 9.5 13.8 12.8 4.3 3.4 9.5 7 15.3 10.7 24.1 15 51 22.3 80.6 22.3 43 0 79.1-15.6 109-45.5 30.2-30.2 45.8-66.6 45.8-109.6 0-21.4-4-41.2-11.9-59.5s-19.2-34.5-34.2-49.5-31.2-26.3-49.5-34.2-38.2-11.9-59.9-11.9l1.8 0.3c-21.1 0-40.9 4-59.5 11.9s-35.4 19.2-50.4 33.9-26.3 31.1-34.2 49.5c-7.9 18.3-11.9 38.2-11.9 59.5v220.9h-120l-93.5 93.5-93.5-93.5h-91.7c-18.5 0-33.6-15.1-33.6-33.6v-374.1c0-18.5 15.1-33.6 33.6-33.6h1993.9v113.2c-4.3-4.3-8.9-8.2-13.7-12.2-4.9-4-10.1-7.6-15.9-11-24.7-15-51.9-22.6-81.8-22.6-43.1 0-79.7 15.6-110.6 46.4s-46.4 67.5-46.4 110.9 15.6 80 46.4 110.9 67.5 45.8 110.6 45.8c43.4 0 80.3-15 110.8-45.8 30.8-30.8 46.4-67.8 46.4-110.9v-224.7h409.1c18.5 0 33.6 15.1 33.6 33.6l-0.1 374.1zm-2037.8-186.7c0-30.2 10.7-56.2 32.4-77.9 21.4-21.7 47.3-32.4 77.6-32.4 30.8 0 56.5 10.7 77.9 32.4 21.1 21.4 32.1 47.3 32.1 77.6 0 30.2-10.7 56.2-32.1 77.6s-47.3 32.1-77.5 32.1l-0.3 0.6c-30.2 0-56.2-10.7-77.6-32.1-21.8-21.7-32.5-47.7-32.5-77.9zm1359.1 81.5c-21.7-21.7-32.7-47.9-32.7-78.8s11-57.1 32.7-78.8 47.9-32.7 78.8-32.7c31.4 0 57.4 11 78.8 32.7 21.4 22 32.4 47.9 32.4 79.1 0 30.8-10.7 57.1-32.4 78.8s-47.9 32.7-78.8 32.7v-0.3c-30.2 0-56.5-10.7-78.8-32.7z"/>
</g>
</svg>
Here is a CodePen link for you convenience.

To prevent the snap at the end of the color gradient animation, you need it to end at the same state as the start state. Example :
<animate attributeName="stop-color" values="#FE9637;#FF46D5;#C030C5;#7C52FC;#4085F0;#08B3E5;#1BD7BB;#2AF598;#1BD7BB;#08B3E5;#4085F0;#7C52FC;#C030C5;#FF46D5;#FE9637;#FE9637" dur="8s" repeatCount="indefinite"></animate>
In the animate tag, the first and last colors in the value attribute are the same (#FE9637).
Here is a full code example with the corrections to the value attributes in the animate tags :
html,
body {
height: 100%;
}
body {
position: relative;
}
svg {
display: block;
margin: 0 auto;
position: relative;
top: 50%;
transform: translateY(-50%);
}
.page-foot {
background: #ededed;
bottom: 0;
color: #222;
position: fixed;
width: 100%;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: flex-start;
align-content: flex-start;
align-items: flex-start;
}
.page-foot-column {
order: 0;
flex: 1 1 auto;
align-self: auto;
padding: 1em;
&:nth-child(2) {
text-align: right;
}
}
a {
color: inherit;
&:hover {
text-decoration: underline;
}
}
<?xml version="1.0" encoding="UTF-8"?>
<svg enable-background="new 0 0 2734.8 624.7" version="1.1" viewBox="0 0 2734.8 624.7" xml:space="preserve" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="logo-gradient" x1="1107" x2="1762.2" y1="506.45" y2="-308.45" gradientUnits="userSpaceOnUse">
<stop stop-color="#FE9637" offset="0">
<animate attributeName="stop-color" values="#FE9637;#FF46D5;#C030C5;#7C52FC;#4085F0;#08B3E5;#1BD7BB;#2AF598;#1BD7BB;#08B3E5;#4085F0;#7C52FC;#C030C5;#FF46D5;#FE9637;#FE9637" dur="8s" repeatCount="indefinite"></animate>
</stop>
<stop stop-color="#FE9637" offset=".1250">
<animate attributeName="stop-color" values="#FE9637;#FE9637;#FF46D5;#C030C5;#7C52FC;#4085F0;#08B3E5;#1BD7BB;#2AF598;#1BD7BB;#08B3E5;#4085F0;#7C52FC;#C030C5;#FF46D5;#FE9637" dur="8s" repeatCount="indefinite"></animate>
</stop>
<stop stop-color="#FF46D5" offset=".2500">
<animate attributeName="stop-color" values="#FF46D5;#FE9637;#FE9637;#FF46D5;#C030C5;#7C52FC;#4085F0;#08B3E5;#1BD7BB;#2AF598;#1BD7BB;#08B3E5;#4085F0;#7C52FC;#C030C5;#FF46D5" dur="8s" repeatCount="indefinite"></animate>
</stop>
<stop stop-color="#C030C5" offset=".3750">
<animate attributeName="stop-color" values="#C030C5;#FF46D5;#FE9637;#FE9637;#FF46D5;#C030C5;#7C52FC;#4085F0;#08B3E5;#1BD7BB;#2AF598;#1BD7BB;#08B3E5;#4085F0;#7C52FC;#C030C5" dur="8s" repeatCount="indefinite"></animate>
</stop>
<stop stop-color="#7C52FC" offset=".5000">
<animate attributeName="stop-color" values="#7C52FC;#C030C5;#FF46D5;#FE9637;#FE9637;#FF46D5;#C030C5;#7C52FC;#4085F0;#08B3E5;#1BD7BB;#2AF598;#1BD7BB;#08B3E5;#4085F0;#7C52FC" dur="8s" repeatCount="indefinite"></animate>
</stop>
<stop stop-color="#4085F0" offset=".625">
<animate attributeName="stop-color" values="#4085F0;#7C52FC;#C030C5;#FF46D5;#FE9637;#FE9637;#FF46D5;#C030C5;#7C52FC;#4085F0;#08B3E5;#1BD7BB;#2AF598;#1BD7BB;#08B3E5;#4085F0" dur="8s" repeatCount="indefinite"></animate>
</stop>
<stop stop-color="#08B3E5" offset=".750">
<animate attributeName="stop-color" values="#08B3E5;#4085F0;#7C52FC;#C030C5;#FF46D5;#FE9637;#FE9637;#FF46D5;#C030C5;#7C52FC;#4085F0;#08B3E5;#1BD7BB;#2AF598;#1BD7BB;#08B3E5" dur="8s" repeatCount="indefinite"></animate>
</stop>
<stop stop-color="#1BD7BB" offset=".875">
<animate attributeName="stop-color" values="#1BD7BB;#08B3E5;#4085F0;#7C52FC;#C030C5;#FF46D5;#FE9637;#FE9637;#FF46D5;#C030C5;#7C52FC;#4085F0;#08B3E5;#1BD7BB;#2AF598;#1BD7BB" dur="8s" repeatCount="indefinite"></animate>
</stop>
<stop stop-color="#2AF598" offset="1">
<animate attributeName="stop-color" values="#2AF598;#1BD7BB;#08B3E5;#4085F0;#7C52FC;#C030C5;#FF46D5;#FE9637;#FE9637;#FF46D5;#C030C5;#7C52FC;#4085F0;#08B3E5;#1BD7BB;#2AF598" dur="8s" repeatCount="indefinite"></animate>
</stop>
</linearGradient>
</defs>
<g>
<path fill="url('#logo-gradient')" d="m372.1 153.2c-30.2-29.6-66.6-44-109-44-41.8 0-78.5 14.3-108.7 44-30.6 29.6-47.3 66-47.3 107.8v4.6c0 42.1 14.7 79.1 45.5 110.2s68.1 45.8 110.6 45.8c25.3 0 49.5-6.1 72.4-18 11-5.8 21.4-12.8 30.8-21.1s17.7-17.4 24.7-27.5c2.7-4 4.3-8.2 4.3-12.8v-2.4s-0.3-1.2-0.6-2.1c-1.2-6.4-4.6-11.3-10.1-14.7-4-2.4-8.2-3.7-12.5-3.7h-3.4c-7 1.5-12.2 4.6-15.6 9.2-5.2 7.6-11.3 14.4-18 20.1s-14 10.7-21.7 14.7h0.3c-8.2 4-16.5 7-24.7 9.2s-17.1 3.4-26.6 3.4c-29.9 0-55-10.7-76.3-31.1-8.9-8.9-16.5-17.7-21.7-27.8s-8.9-20.8-10.7-32.4h242.2c11.3 0 18.6-5.5 21.7-16.5l-0.3 0.3c0.6-1.5 0.9-2.8 0.9-3.7v-2.8l0.6 0.9v-0.6c0-21.7-4.6-41.5-12.5-59.5-8-18-19.3-34.8-34.3-49.5zm-2.1 87.7h-215.3c5.2-21.7 16.2-40.3 33-55.9v0.3c22-19.5 46.7-29.3 74.5-29.3 14 0 27.5 2.4 40.3 7.3s24.7 11.6 34.8 21.1c7.9 7.3 14.4 16.2 20.1 25.6s10.1 19.5 12.8 30.2l-0.2 0.7zm520.7-117c0.9 2.1 1.2 4.9 1.2 8.2v266.6c0 3.4-0.3 6.1-1.2 8.2s-1.8 4-3 5.5c-5.8 6.1-11.9 9.2-18.3 9.2-5.8 0-11-2.8-15.6-7-4.9-4.6-7.3-9.8-7.3-16.2v-266.6c0-6.4 2.4-11.3 7.3-15.9 4.5-4.2 9.7-6.9 15.4-7 6.7 0.1 13 3.1 18.8 9.4 0.9 1.6 1.8 3.5 2.7 5.6zm-21.3-15h-0.2s-0.1 0-0.2 0h0.4zm148.4 78.2c-21.7 21.7-32.4 47.6-32.4 77.9 0 30.5 10.7 56.5 32.4 77.9 21.4 21.4 47.3 32.1 77.9 32.1 26.6 0 49.8-8.2 69.6-24.4 4.3-3.4 8.5-5.2 13.1-5.2h3.1c6.4 0.9 11.6 4 15.6 9.2h-0.3v0.3 0.3c1.5 2.1 2.8 4.3 3.4 6.7s0.9 5.2 0.9 8.5c-0.3 7-3.4 12.2-8.8 15.3l0.3-0.3c-28.1 23.2-60.5 34.8-97.4 34.8-42.4 0-79.4-14.7-109.9-45.2s-45.5-67.5-45.5-109.9c0-43.1 15.3-79.7 45.5-109.6 30.8-30.2 67.5-45.5 109.9-45.5 17.7 0 34.8 3.1 51.3 8.9s31.4 14.1 45.2 24.7c2.8 2.1 4.9 4.6 6.4 7s2.4 5.8 3.1 10.1c0 2.8-0.6 5.5-1.5 8.2-0.9 2.8-2.1 5.2-3.7 7.6-1.8 2.1-4 4-6.1 5.2s-4.9 2.1-8.2 2.4h-3.1c-4.6 0-9.2-1.5-13.8-4.9-10.1-7.6-21.1-13.7-33-18s-23.8-6.4-36-6.4c-30.4-0.1-56.3 10.6-78 32.3zm640.7 105.7c5.2 9.5 7.6 21.4 7.6 36v6.1c0 2.1 0 4.3-0.3 6.1-0.6 6.1-2.1 12.2-4.9 18.6-2.7 6.4-6.4 12.5-11 18.3-11.6 15-26.6 26.3-44.6 33.9s-39.4 11.3-64.1 11.3c-25.3 0-48.6-5.5-69.6-17.4-10.4-5.8-19.8-12.8-28.4-21.1s-15.6-17.4-21.1-27.5h0.3c-2.4-3.7-3.7-7.6-3.7-11.6v-3.4c0-0.9 0.3-2.1 0.9-3.7 0.9-2.8 2.1-5.2 3.7-7.3 1.5-2.1 4-4 7-5.5l-0.3 0.3c3.7-2.4 7.3-3.7 11-3.7 2.8 0 5.2 0.6 7.3 1.5v-0.3c2.7 0.9 5.2 2.4 7.3 4.3 2.1 1.8 4 4 5.5 6.4 4 6.4 8.6 12.2 13.7 17.7 5.2 5.5 11.3 10.1 18.3 14 7.3 4 15 7 22.6 9.2 7.6 2.1 15.9 3 24.4 3 16.5 0 30.8-2.4 43.1-7.3 12.2-4.9 22-11.6 29-20.1 4-5.2 6.1-9.5 6.7-12.8v-1.8c0.3-1.5 0.6-3 0.6-4.6v-3.7c0-2.8 0-5.2-0.3-7.3s-0.9-4-1.8-5.5c-2.8-4.6-7.6-10.1-15.3-15.3-5.5-4-13.8-6.4-23.8-8.5-10.1-2.1-22-3-36-3-19.2 0-36-1.8-50.4-5.5-14.3-3.7-26-8.9-35.1-15.6-7-5.2-13.1-10.7-18.3-16.2s-9.2-11-11.9-16.5c-4-8.2-6.4-19.2-5.8-33l0.3-7.9c0.3-5.8 1.8-11.9 4.6-18.3s6.4-12.5 11-18.6c11.6-15 26.6-26.3 44.6-33.9s39.4-11.6 63.8-11.6c16.5 0 32.4 2.8 47.6 8.2 15.3 5.5 29 13.1 41.5 22.9 2.7 2.1 4.9 4.3 6.4 6.4s2.4 5.5 2.8 10.1c0 3.1-0.3 5.8-0.9 8.2s-1.8 4.6-3.7 6.7c-2.1 2.8-4.3 4.6-6.7 5.8s-5.8 2.4-10.1 2.4c-5.5 0.3-10.4-1.5-14.3-4.3-0.3 0-0.6-0.3-0.9-0.6-17.4-14.7-37.6-22-60.5-22-16.8 0-31.2 2.4-43.1 7.3s-21.4 11.6-28.7 20.1v-0.3c-4 5.2-6.1 9.5-6.4 12.8v3.7c0 7.9 0.3 13.1 1.2 15.6v-0.6c2.4 4.6 7.6 9.8 15.6 15.3 5.8 3.7 13.7 6.7 23.8 8.9 10.1 2.1 22 3.4 35.4 3.4 18.9 0 35.7 1.8 50.1 5.2 14.3 3.4 26.3 8.2 35.7 14.7 6.4 4.6 11.9 9.5 16.8 14.4s8.9 10.1 11.9 15.3h-0.3l0.2 2.2zm79.2-181.7h-0.2s-0.1 0-0.2 0h0.4zm21.3 14.9c0.9 2.1 1.2 4.9 1.2 8.2v264.5c0 3.4-0.3 6.1-1.2 8.2s-1.8 4-3.1 5.5c-5.8 6.1-11.9 9.2-18.3 9.2-5.8 0-11-2.8-15.6-7-4.9-4.6-7.3-9.8-7.3-16.2v-264.4c0-6.4 2.4-11.3 7.3-15.9 4.5-4.2 9.7-6.9 15.4-7 6.7 0.1 13 3.1 18.8 9.4 1 1.6 1.9 3.4 2.8 5.5zm690.6 27.2c-30.2-29.6-66.6-44-109-44-41.8 0-78.5 14.3-108.7 44-30.6 29.6-47.3 66-47.3 107.8v4.6c0 42.1 14.6 79.1 45.5 110.2 30.8 31.1 68.1 45.8 110.6 45.8 25.3 0 49.5-6.1 72.4-18 11-5.8 21.4-12.8 30.8-21.1 9.5-8.2 17.7-17.4 24.7-27.5 2.7-4 4.3-8.2 4.3-12.8v-2.4s-0.3-1.2-0.6-2.1c-1.2-6.4-4.6-11.3-10.1-14.7-4-2.4-8.2-3.7-12.5-3.7h-3.4c-7 1.5-12.2 4.6-15.6 9.2-5.2 7.6-11.3 14.4-18 20.1s-14 10.7-21.7 14.7h0.3c-8.2 4-16.5 7-24.7 9.2s-17.1 3.4-26.6 3.4c-29.9 0-55-10.7-76.3-31.1-8.9-8.9-16.5-17.7-21.7-27.8s-8.9-20.8-10.7-32.4h242.2c11.3 0 18.6-5.5 21.7-16.5l-0.3 0.3c0.6-1.5 0.9-2.8 0.9-3.7v-2.8l0.6 0.9v-0.6c0-21.7-4.6-41.5-12.5-59.5-8.1-18-19.4-34.8-34.3-49.5zm-2.2 87.7h-215.3c5.2-21.7 16.2-40.3 33-55.9v0.3c22-19.5 46.7-29.3 74.5-29.3 14 0 27.5 2.4 40.3 7.3s24.7 11.6 34.8 21.1c7.9 7.3 14.4 16.2 20.2 25.6 5.8 9.5 10.1 19.5 12.8 30.2l-0.3 0.7zm213.5-240.7c2.3 0 4.3 0.9 6 2.5 1.7 1.5 2.6 3.5 2.6 6.1 0 2.2-0.9 4.2-2.6 5.9-1.8 1.7-3.8 2.4-6.1 2.4h-11.4v45c0 1.2-0.2 2.3-0.7 3.3-0.4 1-1 1.9-1.8 2.7-1.7 1.7-3.6 2.6-5.9 2.6s-4.3-0.8-6.1-2.4c-1.7-1.7-2.4-3.7-2.4-6.1v-45h-11.5c-2.1 0-4.1-0.8-5.9-2.4-1.7-1.9-2.6-3.9-2.6-6 0-2.3 0.9-4.3 2.6-6s3.6-2.5 5.9-2.5c0.1-0.1 39.9-0.1 39.9-0.1zm73.4 62.2c0 2.1-0.8 4.1-2.6 6-1.7 1.8-3.8 2.7-6 2.7-2.3 0-4.3-0.9-6-2.7-1.8-1.8-2.7-3.8-2.7-6v-26.2c-0.2 0.3-0.4 0.7-0.7 1-0.2 0.3-0.4 0.7-0.7 1l-1.4 2.3c-0.4 0.8-1 1.5-1.6 2.3-1 1-2 1.8-3 2.4s-2.3 1-3.9 1c-1.4 0-2.7-0.3-3.8-1s-2.1-1.5-3.1-2.5l-4.8-6.8v26.3c0 2.3-0.8 4.3-2.3 6-0.8 0.8-1.7 1.4-2.7 2s-2.1 0.8-3.3 0.8c-2.3 0-4.3-0.9-6.1-2.8-1.7-1.7-2.4-3.7-2.4-6v-53.3c0-2.1 0.6-3.8 1.6-5s2.4-2.2 4.3-3h-0.1c0.6-0.2 1.1-0.3 1.6-0.4s0.9-0.1 1.3-0.1c1.6 0 2.9 0.3 4 1s2.1 1.5 2.9 2.7l2.1 3.1c0.8 1.1 1.3 2 1.9 2.8v-0.2l2.1 3.2 2.1 3 2.2 3.1 2.8 3.6 6.6-9.5 6.4-9.4v0.1c1.7-2.5 4-3.9 7-3.9 1 0 1.9 0.2 2.7 0.5l-0.1-0.1c4.1 1.2 6.1 4 6.1 8.3v53.4l-0.4 0.3zm-208.3-62.4h-2448.7c-42.6 0-77.3 34.7-77.3 77.3v374.1c0 42.6 34.7 77.3 77.3 77.3h73.6l84.9 84.9c7.1 7.1 16.6 11 26.6 11 10.1 0 19.5-3.9 26.6-11l85-84.9h2152c42.6 0 77.3-34.7 77.3-77.3v-374.1c0-42.6-34.6-77.3-77.3-77.3zm33.6 451.4c0 18.5-15.1 33.6-33.6 33.6h-2004.8v-111.6c4.9 5.2 9.5 9.5 13.8 12.8 4.3 3.4 9.5 7 15.3 10.7 24.1 15 51 22.3 80.6 22.3 43 0 79.1-15.6 109-45.5 30.2-30.2 45.8-66.6 45.8-109.6 0-21.4-4-41.2-11.9-59.5s-19.2-34.5-34.2-49.5-31.2-26.3-49.5-34.2-38.2-11.9-59.9-11.9l1.8 0.3c-21.1 0-40.9 4-59.5 11.9s-35.4 19.2-50.4 33.9-26.3 31.1-34.2 49.5c-7.9 18.3-11.9 38.2-11.9 59.5v220.9h-120l-93.5 93.5-93.5-93.5h-91.7c-18.5 0-33.6-15.1-33.6-33.6v-374.1c0-18.5 15.1-33.6 33.6-33.6h1993.9v113.2c-4.3-4.3-8.9-8.2-13.7-12.2-4.9-4-10.1-7.6-15.9-11-24.7-15-51.9-22.6-81.8-22.6-43.1 0-79.7 15.6-110.6 46.4s-46.4 67.5-46.4 110.9 15.6 80 46.4 110.9 67.5 45.8 110.6 45.8c43.4 0 80.3-15 110.8-45.8 30.8-30.8 46.4-67.8 46.4-110.9v-224.7h409.1c18.5 0 33.6 15.1 33.6 33.6l-0.1 374.1zm-2037.8-186.7c0-30.2 10.7-56.2 32.4-77.9 21.4-21.7 47.3-32.4 77.6-32.4 30.8 0 56.5 10.7 77.9 32.4 21.1 21.4 32.1 47.3 32.1 77.6 0 30.2-10.7 56.2-32.1 77.6s-47.3 32.1-77.5 32.1l-0.3 0.6c-30.2 0-56.2-10.7-77.6-32.1-21.8-21.7-32.5-47.7-32.5-77.9zm1359.1 81.5c-21.7-21.7-32.7-47.9-32.7-78.8s11-57.1 32.7-78.8 47.9-32.7 78.8-32.7c31.4 0 57.4 11 78.8 32.7 21.4 22 32.4 47.9 32.4 79.1 0 30.8-10.7 57.1-32.4 78.8s-47.9 32.7-78.8 32.7v-0.3c-30.2 0-56.5-10.7-78.8-32.7z"/>
</g>
</svg>

SVG stroke-width not working

How to make the SVG shape outline thicker / thinner.
I am trying to implement the stroke-width property, but it is ignored by SVG.
<svg xmlns="http://www.w3.org/2000/svg" width="475.07" height="475.07" viewBox="0 0 475.075 475.075" fill="#FFF">
<path stroke-width="10" d="M475.07 186.57c0-7.04-5.32-11.42-16-13.13l-143.3-20.84-64.24-129.9c-3.62-7.8-8.28-11.7-14-11.7-5.7 0-10.36 3.9-13.98 11.7L159.3 152.6 16 173.44c-10.67 1.7-16 6.1-16 13.13 0 4 2.38 8.57 7.14 13.7l103.92 101.08L86.5 444.1c-.37 2.66-.56 4.57-.56 5.7 0 4 1 7.38 3 10.14 2 2.77 5 4.15 9 4.15 3.42 0 7.22-1.15 11.4-3.44l128.2-67.38 128.2 67.38c4 2.28 7.8 3.43 11.4 3.43 7.82 0 11.72-4.76 11.72-14.28 0-2.48-.1-4.38-.3-5.72l-24.54-142.74L467.66 200.3c4.94-4.97 7.4-9.54 7.4-13.73zM324.63 288.5l20.55 120.2-107.63-56.82L129.6 408.7l20.86-120.2-87.37-84.8L183.57 186l53.95-109.06L291.5 186 412 203.7l-87.38 84.8z"/>
</svg>
JSFiddle

You need to set a stroke in order for stroke-width to have an effect. stroke="black" for instance.
<svg xmlns="http://www.w3.org/2000/svg" width="475.07" height="475.07" viewBox="0 0 475.075 475.075" fill="#FFF">
<path stroke="black" stroke-width="10" d="M475.07 186.57c0-7.04-5.32-11.42-16-13.13l-143.3-20.84-64.24-129.9c-3.62-7.8-8.28-11.7-14-11.7-5.7 0-10.36 3.9-13.98 11.7L159.3 152.6 16 173.44c-10.67 1.7-16 6.1-16 13.13 0 4 2.38 8.57 7.14 13.7l103.92 101.08L86.5 444.1c-.37 2.66-.56 4.57-.56 5.7 0 4 1 7.38 3 10.14 2 2.77 5 4.15 9 4.15 3.42 0 7.22-1.15 11.4-3.44l128.2-67.38 128.2 67.38c4 2.28 7.8 3.43 11.4 3.43 7.82 0 11.72-4.76 11.72-14.28 0-2.48-.1-4.38-.3-5.72l-24.54-142.74L467.66 200.3c4.94-4.97 7.4-9.54 7.4-13.73zM324.63 288.5l20.55 120.2-107.63-56.82L129.6 408.7l20.86-120.2-87.37-84.8L183.57 186l53.95-109.06L291.5 186 412 203.7l-87.38 84.8z"/>
</svg>

IE 11 and Edge adding space above and below SVG despite using "display: block"

I am familiar with the issue of IE adding space above and below a SVG when not using display: block, because it treats the SVG as an inline element.
But I am using display: block; and getting the same results. Why?
svg {
width: 100%;
display: block;
}
.svgContainer {
width: 25%;
}
<div class="svgContainer">
<a id="one">
<svg id="Layer_1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1586.9 250">
<rect x="20" y="20" width="1546.9" height="210" />
<g class="iconTextLayer">
<path fill="#ffffff" d="M67.8 211.7s-.2 4.6 4.3 4.6c5.6 0 51.4-.1 51.4-.1l.1-42.1s-.7-6.9 6-6.9h21.3c8 0 7.5 6.9 7.5 6.9l-.1 42h50.3c5.7 0 5.4-5.7 5.4-5.7v-77.6l-70.8-63.1-75.3 63.1v78.9z" />
<path fill="#ffffff" d="M40 126.9s6.4 11.8 20.3 0l83.3-70.4 78.1 70c16.1 11.7 22.2 0 22.2 0L143.7 35.6 40 126.9zm179.9-70.6h-20.1l.1 24.3 20 17V56.3z" />
<path fill="#ffffff" d="M438.6 80.2V173h-17.3v-40.6h-43.6V173h-17.3V80.2h17.3v39.9h43.6V80.2h17.3zM483.9 106.1c4.9 0 9.3.8 13.3 2.4 4 1.6 7.4 3.8 10.3 6.7 2.8 2.9 5 6.5 6.6 10.7 1.5 4.2 2.3 8.9 2.3 14.1 0 5.2-.8 9.9-2.3 14.1s-3.7 7.8-6.6 10.7-6.3 5.2-10.3 6.8c-4 1.6-8.4 2.4-13.3 2.4s-9.4-.8-13.4-2.4c-4-1.6-7.5-3.9-10.3-6.8-2.8-3-5.1-6.5-6.6-10.7-1.6-4.2-2.3-8.9-2.3-14.1 0-5.2.8-9.9 2.3-14.1 1.6-4.2 3.8-7.7 6.6-10.7 2.8-2.9 6.3-5.2 10.3-6.7 4-1.6 8.5-2.4 13.4-2.4zm0 55.7c5.5 0 9.5-1.8 12.2-5.5 2.6-3.7 3.9-9.1 3.9-16.2s-1.3-12.5-3.9-16.2c-2.6-3.7-6.7-5.6-12.2-5.6-5.6 0-9.7 1.9-12.4 5.6s-4 9.2-4 16.2c0 7.1 1.3 12.4 4 16.2 2.7 3.6 6.8 5.5 12.4 5.5zM528.5 173v-65.9h9.7c2.1 0 3.4 1 4 2.9l1 4.9c1.2-1.3 2.4-2.5 3.6-3.5 1.3-1.1 2.6-2 4-2.8 1.4-.8 3-1.4 4.6-1.8 1.6-.4 3.5-.7 5.4-.7 4.2 0 7.6 1.1 10.2 3.4 2.7 2.2 4.7 5.2 6 9 1-2.2 2.3-4.1 3.9-5.6 1.5-1.6 3.2-2.8 5.1-3.8 1.8-1 3.8-1.7 5.9-2.2 2.1-.5 4.2-.7 6.3-.7 3.6 0 6.9.6 9.7 1.7 2.8 1.1 5.2 2.7 7.1 4.9 1.9 2.1 3.4 4.8 4.4 7.8s1.5 6.6 1.5 10.6V173H605v-41.9c0-4.2-.9-7.4-2.8-9.5-1.8-2.1-4.5-3.2-8.1-3.2-1.6 0-3.1.3-4.5.8-1.4.6-2.6 1.4-3.7 2.4-1 1-1.9 2.4-2.5 3.9-.6 1.6-.9 3.4-.9 5.5v42h-15.9v-41.9c0-4.4-.9-7.6-2.7-9.6-1.8-2-4.4-3-7.8-3-2.3 0-4.5.6-6.5 1.7s-3.8 2.7-5.6 4.7V173h-15.5zM648.3 142.1c.3 3.4.9 6.3 1.8 8.8.9 2.5 2.2 4.5 3.7 6.1 1.5 1.6 3.4 2.8 5.5 3.6 2.1.8 4.5 1.2 7 1.2 2.6 0 4.8-.3 6.6-.9 1.9-.6 3.5-1.3 4.9-2 1.4-.7 2.6-1.4 3.7-2s2.1-.9 3-.9c1.3 0 2.3.5 3 1.5l4.6 5.8c-1.8 2.1-3.7 3.8-5.9 5.2-2.2 1.4-4.5 2.5-6.8 3.3-2.4.8-4.8 1.4-7.3 1.8-2.5.3-4.8.5-7.2.5-4.6 0-8.8-.8-12.8-2.3-3.9-1.5-7.4-3.8-10.3-6.7-2.9-3-5.2-6.7-6.9-11-1.7-4.4-2.5-9.5-2.5-15.3 0-4.5.7-8.7 2.2-12.7 1.5-4 3.5-7.4 6.3-10.3 2.7-2.9 6-5.3 10-7 3.9-1.7 8.3-2.6 13.3-2.6 4.2 0 8 .7 11.5 2s6.5 3.3 9.1 5.8c2.5 2.5 4.5 5.7 5.9 9.4s2.2 7.9 2.2 12.7c0 2.4-.3 4-.8 4.8-.5.8-1.5 1.3-3 1.3h-40.8zm30.2-9.6c0-2.1-.3-4-.9-5.8-.6-1.8-1.4-3.4-2.6-4.8-1.2-1.4-2.6-2.5-4.4-3.2-1.8-.8-3.8-1.2-6.2-1.2-4.6 0-8.2 1.3-10.8 3.9-2.6 2.6-4.3 6.3-5 11.1h29.9z"
/>
</g>
<g>
<line fill="none" stroke="#000000" stroke-width="20" stroke-miterlimit="10" x1="1586.9" x2="1586.9" y1="0" y2="250" />
<line fill="none" stroke="#000000" stroke-width="20" stroke-miterlimit="10" x1="0" x2="1586.9" y1="0" y2="0" />
<line fill="none" stroke="#000000" stroke-width="20" stroke-miterlimit="10" class="st1" x1="0" x2="0" y1="250" y2="0" />
<line fill="none" stroke="#000000" stroke-width="20" stroke-miterlimit="10" class="st1" x1="1586.9" x2="0" y1="250" y2="250" />
</g>
</svg>
</a>
</div>
<div class="svgContainer">
<a id="two">
<svg id="Layer_1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1586.9 250">
<rect x="20" y="20" width="1546.9" height="210" />
<g class="iconTextLayer">
<path fill="#ffffff" d="M67.8 211.7s-.2 4.6 4.3 4.6c5.6 0 51.4-.1 51.4-.1l.1-42.1s-.7-6.9 6-6.9h21.3c8 0 7.5 6.9 7.5 6.9l-.1 42h50.3c5.7 0 5.4-5.7 5.4-5.7v-77.6l-70.8-63.1-75.3 63.1v78.9z" />
<path fill="#ffffff" d="M40 126.9s6.4 11.8 20.3 0l83.3-70.4 78.1 70c16.1 11.7 22.2 0 22.2 0L143.7 35.6 40 126.9zm179.9-70.6h-20.1l.1 24.3 20 17V56.3z" />
<path fill="#ffffff" d="M438.6 80.2V173h-17.3v-40.6h-43.6V173h-17.3V80.2h17.3v39.9h43.6V80.2h17.3zM483.9 106.1c4.9 0 9.3.8 13.3 2.4 4 1.6 7.4 3.8 10.3 6.7 2.8 2.9 5 6.5 6.6 10.7 1.5 4.2 2.3 8.9 2.3 14.1 0 5.2-.8 9.9-2.3 14.1s-3.7 7.8-6.6 10.7-6.3 5.2-10.3 6.8c-4 1.6-8.4 2.4-13.3 2.4s-9.4-.8-13.4-2.4c-4-1.6-7.5-3.9-10.3-6.8-2.8-3-5.1-6.5-6.6-10.7-1.6-4.2-2.3-8.9-2.3-14.1 0-5.2.8-9.9 2.3-14.1 1.6-4.2 3.8-7.7 6.6-10.7 2.8-2.9 6.3-5.2 10.3-6.7 4-1.6 8.5-2.4 13.4-2.4zm0 55.7c5.5 0 9.5-1.8 12.2-5.5 2.6-3.7 3.9-9.1 3.9-16.2s-1.3-12.5-3.9-16.2c-2.6-3.7-6.7-5.6-12.2-5.6-5.6 0-9.7 1.9-12.4 5.6s-4 9.2-4 16.2c0 7.1 1.3 12.4 4 16.2 2.7 3.6 6.8 5.5 12.4 5.5zM528.5 173v-65.9h9.7c2.1 0 3.4 1 4 2.9l1 4.9c1.2-1.3 2.4-2.5 3.6-3.5 1.3-1.1 2.6-2 4-2.8 1.4-.8 3-1.4 4.6-1.8 1.6-.4 3.5-.7 5.4-.7 4.2 0 7.6 1.1 10.2 3.4 2.7 2.2 4.7 5.2 6 9 1-2.2 2.3-4.1 3.9-5.6 1.5-1.6 3.2-2.8 5.1-3.8 1.8-1 3.8-1.7 5.9-2.2 2.1-.5 4.2-.7 6.3-.7 3.6 0 6.9.6 9.7 1.7 2.8 1.1 5.2 2.7 7.1 4.9 1.9 2.1 3.4 4.8 4.4 7.8s1.5 6.6 1.5 10.6V173H605v-41.9c0-4.2-.9-7.4-2.8-9.5-1.8-2.1-4.5-3.2-8.1-3.2-1.6 0-3.1.3-4.5.8-1.4.6-2.6 1.4-3.7 2.4-1 1-1.9 2.4-2.5 3.9-.6 1.6-.9 3.4-.9 5.5v42h-15.9v-41.9c0-4.4-.9-7.6-2.7-9.6-1.8-2-4.4-3-7.8-3-2.3 0-4.5.6-6.5 1.7s-3.8 2.7-5.6 4.7V173h-15.5zM648.3 142.1c.3 3.4.9 6.3 1.8 8.8.9 2.5 2.2 4.5 3.7 6.1 1.5 1.6 3.4 2.8 5.5 3.6 2.1.8 4.5 1.2 7 1.2 2.6 0 4.8-.3 6.6-.9 1.9-.6 3.5-1.3 4.9-2 1.4-.7 2.6-1.4 3.7-2s2.1-.9 3-.9c1.3 0 2.3.5 3 1.5l4.6 5.8c-1.8 2.1-3.7 3.8-5.9 5.2-2.2 1.4-4.5 2.5-6.8 3.3-2.4.8-4.8 1.4-7.3 1.8-2.5.3-4.8.5-7.2.5-4.6 0-8.8-.8-12.8-2.3-3.9-1.5-7.4-3.8-10.3-6.7-2.9-3-5.2-6.7-6.9-11-1.7-4.4-2.5-9.5-2.5-15.3 0-4.5.7-8.7 2.2-12.7 1.5-4 3.5-7.4 6.3-10.3 2.7-2.9 6-5.3 10-7 3.9-1.7 8.3-2.6 13.3-2.6 4.2 0 8 .7 11.5 2s6.5 3.3 9.1 5.8c2.5 2.5 4.5 5.7 5.9 9.4s2.2 7.9 2.2 12.7c0 2.4-.3 4-.8 4.8-.5.8-1.5 1.3-3 1.3h-40.8zm30.2-9.6c0-2.1-.3-4-.9-5.8-.6-1.8-1.4-3.4-2.6-4.8-1.2-1.4-2.6-2.5-4.4-3.2-1.8-.8-3.8-1.2-6.2-1.2-4.6 0-8.2 1.3-10.8 3.9-2.6 2.6-4.3 6.3-5 11.1h29.9z"
/>
</g>
<g>
<line fill="none" stroke="#000000" stroke-width="20" stroke-miterlimit="10" x1="1586.9" x2="1586.9" y1="0" y2="250" />
<line fill="none" stroke="#000000" stroke-width="20" stroke-miterlimit="10" x1="0" x2="1586.9" y1="0" y2="0" />
<line fill="none" stroke="#000000" stroke-width="20" stroke-miterlimit="10" class="st1" x1="0" x2="0" y1="250" y2="0" />
<line fill="none" stroke="#000000" stroke-width="20" stroke-miterlimit="10" class="st1" x1="1586.9" x2="0" y1="250" y2="250" />
</g>
</svg>
</a>
</div>
<div class="svgContainer">
<a id="three">
<svg id="Layer_1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1586.9 250">
<rect x="20" y="20" width="1546.9" height="210" />
<g class="iconTextLayer">
<path fill="#ffffff" d="M67.8 211.7s-.2 4.6 4.3 4.6c5.6 0 51.4-.1 51.4-.1l.1-42.1s-.7-6.9 6-6.9h21.3c8 0 7.5 6.9 7.5 6.9l-.1 42h50.3c5.7 0 5.4-5.7 5.4-5.7v-77.6l-70.8-63.1-75.3 63.1v78.9z" />
<path fill="#ffffff" d="M40 126.9s6.4 11.8 20.3 0l83.3-70.4 78.1 70c16.1 11.7 22.2 0 22.2 0L143.7 35.6 40 126.9zm179.9-70.6h-20.1l.1 24.3 20 17V56.3z" />
<path fill="#ffffff" d="M438.6 80.2V173h-17.3v-40.6h-43.6V173h-17.3V80.2h17.3v39.9h43.6V80.2h17.3zM483.9 106.1c4.9 0 9.3.8 13.3 2.4 4 1.6 7.4 3.8 10.3 6.7 2.8 2.9 5 6.5 6.6 10.7 1.5 4.2 2.3 8.9 2.3 14.1 0 5.2-.8 9.9-2.3 14.1s-3.7 7.8-6.6 10.7-6.3 5.2-10.3 6.8c-4 1.6-8.4 2.4-13.3 2.4s-9.4-.8-13.4-2.4c-4-1.6-7.5-3.9-10.3-6.8-2.8-3-5.1-6.5-6.6-10.7-1.6-4.2-2.3-8.9-2.3-14.1 0-5.2.8-9.9 2.3-14.1 1.6-4.2 3.8-7.7 6.6-10.7 2.8-2.9 6.3-5.2 10.3-6.7 4-1.6 8.5-2.4 13.4-2.4zm0 55.7c5.5 0 9.5-1.8 12.2-5.5 2.6-3.7 3.9-9.1 3.9-16.2s-1.3-12.5-3.9-16.2c-2.6-3.7-6.7-5.6-12.2-5.6-5.6 0-9.7 1.9-12.4 5.6s-4 9.2-4 16.2c0 7.1 1.3 12.4 4 16.2 2.7 3.6 6.8 5.5 12.4 5.5zM528.5 173v-65.9h9.7c2.1 0 3.4 1 4 2.9l1 4.9c1.2-1.3 2.4-2.5 3.6-3.5 1.3-1.1 2.6-2 4-2.8 1.4-.8 3-1.4 4.6-1.8 1.6-.4 3.5-.7 5.4-.7 4.2 0 7.6 1.1 10.2 3.4 2.7 2.2 4.7 5.2 6 9 1-2.2 2.3-4.1 3.9-5.6 1.5-1.6 3.2-2.8 5.1-3.8 1.8-1 3.8-1.7 5.9-2.2 2.1-.5 4.2-.7 6.3-.7 3.6 0 6.9.6 9.7 1.7 2.8 1.1 5.2 2.7 7.1 4.9 1.9 2.1 3.4 4.8 4.4 7.8s1.5 6.6 1.5 10.6V173H605v-41.9c0-4.2-.9-7.4-2.8-9.5-1.8-2.1-4.5-3.2-8.1-3.2-1.6 0-3.1.3-4.5.8-1.4.6-2.6 1.4-3.7 2.4-1 1-1.9 2.4-2.5 3.9-.6 1.6-.9 3.4-.9 5.5v42h-15.9v-41.9c0-4.4-.9-7.6-2.7-9.6-1.8-2-4.4-3-7.8-3-2.3 0-4.5.6-6.5 1.7s-3.8 2.7-5.6 4.7V173h-15.5zM648.3 142.1c.3 3.4.9 6.3 1.8 8.8.9 2.5 2.2 4.5 3.7 6.1 1.5 1.6 3.4 2.8 5.5 3.6 2.1.8 4.5 1.2 7 1.2 2.6 0 4.8-.3 6.6-.9 1.9-.6 3.5-1.3 4.9-2 1.4-.7 2.6-1.4 3.7-2s2.1-.9 3-.9c1.3 0 2.3.5 3 1.5l4.6 5.8c-1.8 2.1-3.7 3.8-5.9 5.2-2.2 1.4-4.5 2.5-6.8 3.3-2.4.8-4.8 1.4-7.3 1.8-2.5.3-4.8.5-7.2.5-4.6 0-8.8-.8-12.8-2.3-3.9-1.5-7.4-3.8-10.3-6.7-2.9-3-5.2-6.7-6.9-11-1.7-4.4-2.5-9.5-2.5-15.3 0-4.5.7-8.7 2.2-12.7 1.5-4 3.5-7.4 6.3-10.3 2.7-2.9 6-5.3 10-7 3.9-1.7 8.3-2.6 13.3-2.6 4.2 0 8 .7 11.5 2s6.5 3.3 9.1 5.8c2.5 2.5 4.5 5.7 5.9 9.4s2.2 7.9 2.2 12.7c0 2.4-.3 4-.8 4.8-.5.8-1.5 1.3-3 1.3h-40.8zm30.2-9.6c0-2.1-.3-4-.9-5.8-.6-1.8-1.4-3.4-2.6-4.8-1.2-1.4-2.6-2.5-4.4-3.2-1.8-.8-3.8-1.2-6.2-1.2-4.6 0-8.2 1.3-10.8 3.9-2.6 2.6-4.3 6.3-5 11.1h29.9z"
/>
</g>
<g>
<line fill="none" stroke="#000000" stroke-width="20" stroke-miterlimit="10" x1="1586.9" x2="1586.9" y1="0" y2="250" />
<line fill="none" stroke="#000000" stroke-width="20" stroke-miterlimit="10" x1="0" x2="1586.9" y1="0" y2="0" />
<line fill="none" stroke="#000000" stroke-width="20" stroke-miterlimit="10" class="st1" x1="0" x2="0" y1="250" y2="0" />
<line fill="none" stroke="#000000" stroke-width="20" stroke-miterlimit="10" class="st1" x1="1586.9" x2="0" y1="250" y2="250" />
</g>
</svg>
</a>
</div>

I solved it in a kind of hackish way, but thought there would be a simple CSS fix.
after all CSS and scripts have loaded , I take the width of the svg element, which is known and based on the width to height ratio of the original svg, I use jquery to assign a height $("#svgElementToBeAssignedHeight").css("height", width of rendered svg element *(height of original svg viewbox/width of original svg viewbox)

How to keep the REST authentication credentials in AngularJS on page reload?

We built a RESTful server, quite 'pure', which uses HTTP BASIC AUTHENTICATION. This means the client needs to send username/password every request. It is simple and secure (over HTTPS). REST of course is stateless and uses no sessions, so there is no 'logon' method in the API. Every request needs to be authorized again.
On this REST server we built an AngularJS client. This is a single page application. When the user logs in to the client, the client will store the credentials and make sure the correct HTTP headers are set.
The “problem” is that when the user refreshes the browser, the app looses its state, including the authentication credentials.
What is the best way to deal with this? How can the AngularJS app keep the user logged in / remember the credentials? Whatever the solution, it MUST be secure, since it is a banking application.

Hmm, this is a tricky one. One possible solution is to use some combination of e.g. Javascrypt (http://www.fourmilab.ch/javascrypt/) and temporary localstorage/cookie.
Do not store the password at all, not even in localstorage. You can use a key derivation function to get a key from the password. With a salt and a reasonable number of iterations this could be secure enough.
Update:
See this securely store user password locally in a jquery mobile app for another good answer

This isn't an answer, I agree with Sindre but, here's the full list of browsers from StatCounter.com
IE 7 Market Share is .86%, if you're going to support that you have to support the 2% Linux users :). Just wanted to put this out there so as to have some sort of gauge on what's being used... these numbers are obviously not 100% accurate but it seems reasonable.
I think without using local/web storage APIs you can't really achieve this.
Browser Version Market Share Perc. (June 2012 to June 2013)
IE 9.0 15.49
IE 8.0 11.36
Chrome 23.0 5.63
Chrome 26.0 5.15
Chrome 21.0 4.55
Chrome 24.0 3.9
Chrome 22.0 3.59
Chrome 27.0 3.24
Safari iPad 3.19
Chrome 25.0 3.18
Chrome 20.0 2.59
Chrome 19.0 2.46
Firefox 16.0 2.42
IE 10.0 2.4
Firefox 14.0 2.19
Safari 5.1 2.11
Firefox 15.0 2.07
Firefox 19.0 1.97
Firefox 18.0 1.85
Firefox 13.0 1.84
Firefox 20.0 1.73
Safari 6.0 1.69
Firefox 17.0 1.67
Firefox 21.0 1.48
Firefox 12.0 1.43
IE 7.0 0.86
Firefox 3.6 0.73
Safari 5.0 0.68
Android 0 0.59
Opera 12.0 0.53
Opera 12.1 0.45
Firefox 10.0 0.42
Firefox 11.0 0.38
IE 6.0 0.38
Chrome 17.0 0.26
Firefox 9.0 0.26
Chrome 18.0 0.24
Firefox 4.0 0.22
Chrome 16.0 0.22
Firefox 8.0 0.21
Opera 11.6 0.18
360 Safe Browser 0 0.18
Chrome 15.0 0.17
Chrome 11.0 0.17
Chrome 14.0 0.16
Chrome 12.0 0.16
Chrome 13.0 0.15
Firefox 5.0 0.15
Firefox 3.0 0.15
Firefox 6.0 0.15
Firefox 7.0 0.14
Firefox 3.5 0.14
Chrome for Andr 0.14
Chrome iPad 0.13
Sony PS3 0 0.13
Chrome 10.0 0.12
Sogou Explorer 0 0.12
Safari 4.0 0.1
Firefox 22.0 0.09
Safari 4.1 0.09
Chrome 28.0 0.08
Yandex Browser 1.5 0.08
Silk 1.0 0.08
Maxthon 3.0 0.07
Chrome 8.0 0.07
Chrome 9.0 0.05
RockMelt 0.16 0.05
Chrome 7.0 0.05
Firefox 2.0 0.04
Chrome 6.0 0.04
Chrome 5.0 0.04
BlackBerry 0 0.04
Opera 11.5 0.04
Chrome 4.0 0.04
Chromium 18.0 0.03
Opera 0 0.03
Maxthon 4.0 0.03
Opera 10.6 0.02
Maxthon 3.4 0.02
Firefox 1.0 0.02
Opera 9.6 0.02
TheWorld 0.02
Opera 11.0 0.02
Yandex Browser 1.1 0.02
Opera 11.1 0.02
Chrome 3.0 0.02
Maxthon 1.0 0.02
Chromium 25.0 0.01
AppleWebKit 0 0.01
Opera 10.0 0.01
Tencent Traveler 4.0 0.01
Silk 2.9 0.01
Opera 10.1 0.01
Netscape 4.7 0.01
Chrome 2.0 0.01
Maxthon 2.0 0.01
Chromium 20.0 0.01
Silk 3.0 0.01
Chrome 29.0 0.01
webOS Browser 0 0.01
QQ Browser 6.14 0.01
Mozilla 1.9 0.01
Chrome 18.6 0.01
Safari 3.0 0.01
Phantom 0 0.01
Firefox 23.0 0.01
Silk 2.7 0.01
Chrome 1.0 0.01
Firefox 1.5 0.01
Opera 10.5 0.01
Chrome 0.2 0.01
Camino 2.1 0.01
Silk 2.8 0.01
Safari 3.1 0.01
Opera 9.2 0.01
Opera 9.5 0.01
Maxthon 3.3 0.01
NetFront 4.2 0.01
Yandex Browser 1.7 0.01
Silk 2.4 0.01
IE 0 0
Safari 3.2 0
Kindle 0 0
Pale Moon 15.3 0
Opera 12.5 0
Flock 2.6 0
QQ Browser 6.12 0
360 0 0
Pale Moon 19.0 0
Chromium 22.0 0
Chrome 26.2 0
Unknown 0 0
QQ Browser 7.3 0
Chrome 24.2 0
Opera 9.0 0
Pale Moon 15.2 0
Pale Moon 15.4 0
SeaMonkey 2.17 0
Firefox 24.0 0
Chromium 24.0 0
Pale Moon 12.2 0
Pale Moon 20.0 0
Iron 19.0 0
Iron 18.0 0
Pale Moon 12.3 0
SeaMonkey 2.10 0
Chrome 23.4 0
Kindle 3.0 0
Lunascape 6.8 0
Chromium 17.0 0
NetFront 4.1 0
SeaMonkey 2.14 0
Iron 17.0 0
SeaMonkey 2.13 0
SeaMonkey 2.12 0
Chrome 27.1 0
SeaMonkey 2.11 0
Chromium 14.0 0
Pale Moon 20.1 0
QQ Browser 6.13 0
Windows Media Player 0 0
QQ Browser 7.1 0
SeaMonkey 2.0 0
SeaMonkey 2.15 0
Chromium 23.0 0
Pale Moon 3.6 0
Chrome 22.1 0
Pale Moon 11.0 0
SeaMonkey 2.16 0
Iron 16.0 0
Chrome 25.2 0
Pale Moon 15.1 0
Comodo Dragon 20.1 0
Mozilla 1.8 0
AOL 7.0 0
Pale Moon 15.0 0
Comodo Dragon 19.2 0
SeaMonkey 2.9 0
Chrome 23.1 0
Chromium 12.0 0
Flock 2.5 0
Safari 1.3 0
Lunascape 6.7 0
Safari 5.2 0
Iron 25.0 0
Pale Moon 12.0 0
Firefox 1.4 0
Opera 8.5 0
Netscape 7.2 0
Opera 8.0 0
Pale Moon 12.1 0
Safari 2.0 0
Chrome 0.3 0
Comodo Dragon 21.1 0
UC Browser 2.0 0
Flock 3.5 0
Chromium 13.0 0
Comodo Dragon 20.0 0
Yandex Browser 1.0 0
Comodo Dragon 21.0 0
Opera 7.0 0
QQ Browser 2.8 0
Comodo Dragon 15.0 0
Netscape 7.0 0
Iron 26.0 0
Opera 10.7 0
Samsung 0 0
Nokia 0 0
IE 5.5 0
QQ Browser 3.2 0
Netscape 8.1 0
Chrome 24.1 0
Firefox 3.1 0
QQ Browser 7.0 0
Comodo Dragon 19.1 0
Iron 15.0 0
Chromium 15.0 0
Epiphany 2.30 0
Fake IE 0 0
Silk 2.6 0
SeaMonkey 1.1 0
Midori 0.4 0
Chrome 0.4 0
K-Meleon 1.0 0
Iceweasel 2.0 0
Chromium 11.0 0
QQ Browser 3.0 0
Iron 14.0 0
Tencent Traveler 0 0
Iron 12.0 0
Iron 13.0 0
Chromium 10.0 0
Konqueror 3.5 0
Anonymouse 0 0
Maxthon 4.1 0
Chrome 25.1 0
UC Browser 0 0
QQ Browser 2.5 0
Comodo Dragon 16.1 0
UC Browser 2.3 0
Mozilla 1.7 0
Flock 2.0 0
Silk 2.2 0
SeaMonkey 2.7 0
OmniWeb 5.11 0
Iron 8.0 0
Camino 2.0 0
QQ Browser 0 0
Iron 10.0 0
QQ Browser 3.7 0
UC Browser 9.0 0
Midori 0.2 0
AOL 6.0 0
iBrowser 3.0 0
Beamrise 2.25 0
Opera 14.0 0
Silk 3.1 0
K-Meleon 1.5 0
Chrome 23.2 0
QQ Browser 3.1 0
WebTV/MSNTV 2.6 0
Chromium 16.0 0
Pale Moon 9.2 0
UC Browser 8.6 0
Iron 27.0 0
UC Browser 2.2 0
Pale Moon 8.0 0
Iron 7.0 0
Chrome 26.1 0
Iron 9.0 0
Iron 6.0 0
QQ Browser 7.2 0
IE 5.01 0
SeaMonkey 2.8 0
Iron 11.0 0
Opera 9.1 0
UC Browser 8.4 0
Safari 7.0 0
Chromium 8.0 0
QQ Browser 2.7 0
UC Browser 2.8 0
UC Browser 7.9 0
QQ Browser 3.5 0
Flock 1.2 0
Comodo Dragon 16.2 0
SeaMonkey 2.6 0
Epiphany 2.22 0
Pale Moon 9.1 0
Minefield 3.0 0
NetFront 3.5 0
Firefox 25.0 0
QQ Browser 4.1 0
Chromium 9.0 0
QQ Browser 2.6 0
Opera 7.1 0
Silk 1.1 0
MS OPD 0 0
Chromium 21.0 0
Pale Moon 7.0 0
SeaMonkey 2.4 0
Lunascape 6.5 0
Obigo 0 0
SeaMonkey 2.5 0
QQ Browser 4.0 0
Safari 1.0 0
Iron 5.0 0
Chrome 23.3 0
Camino 1.6 0
SeaMonkey 2.2 0
UC Browser 8.5 0
QQ Browser 4.2 0
Comodo Dragon 11.4 0
Comodo Dragon 10.0 0
QQ Browser 3.4 0
Safari 1.2 0
rekonq 0 0
Beamrise 2.23 0
Pale Moon 9.0 0
Netscape 4.03 0
Comodo Dragon 12.1 0
Iron 4.0 0
Dolfin 3.0 0
Pale Moon 4.0 0
IE 5.0 0
Comodo Dragon 8.0 0
UC Browser 7.8 0
Comodo Dragon 16.0 0
Chromium 7.0 0
Firefox 0 0
SeaMonkey 2.3 0
FrontPage 0 0
Chromium 28.0 0
Comodo Dragon 19.0 0
Minefield 4.0 0
QQ Browser 1.5 0
Comodo Dragon 14.0 0
rekonq 1.1 0
QQ Browser 4.3 0
Safari 0 0
Chrome 0.0 0
RockMelt 0.9 0
Comodo Dragon 18.1 0
NetFront 0 0
UC Browser 8.3 0
Opera 7.5 0
Chromium 6.0 0
Pale Moon 6.0 0
Lunascape 6.6 0
Pale Moon 5.0 0
Safari 6.1 0
QQ Browser 2.4 0
UC Browser 2.7 0
Beamrise 17.2 0
Jasmine 0.8 0
UC Browser 8.0 0
Chrome 30.0 0
Comodo Dragon 18.3 0
IE 4.01 0
SeaMonkey 2.18 0
RockMelt 0.8 0
Comodo Dragon 12.2 0
Comodo Dragon 13.4 0
Minefield 3.7 0
QQ Browser 6.11 0
Comodo Dragon 9.0 0
Chrome 27.2 0
Chromium 0 0
SeaMonkey 2.1 0
NetFront 3.4 0
UC Browser 8.2 0
Links 2.2 0
QQ Browser 6.9 0
QQ Browser 6.10 0
Netscape 4.79 0
Comodo Dragon 18.0 0
QQ Browser 2.3 0
NetSurf 0 0
Comodo Dragon 14.2 0
Netscape 7.1 0
UC Browser 1.0 0
QQ Browser 3.6 0
Safari 1.1 0
Comodo Dragon 17.4 0
Mozilla 1.0 0
Netscape 4.8 0
Iron 3.0 0
Comodo Dragon 17.5 0
Comodo Dragon 14.1 0
QQ Browser 2.2 0
QQ Browser 3.3 0
Opera 10.2 0
WebPositive 0 0
Opera 11.00 0
Chromium 27.0 0
Comodo Dragon 17.3 0
Comodo Dragon 13.0 0
rekonq 2.2 0
Camino 1.0 0
Dolphin 0 0
OmniWeb 5.0 0
UC Browser 2.6 0
Comodo Dragon 4.1 0
Microsoft URL Control 0 0
Konqueror 3.2 0
Comodo Dragon 17.1 0
Netscape 8.0 0
JoeDog 0 0
Skyfire 0 0
Galeon 2.0 0
Midori 0.3 0
SeaMonkey 1.0 0
Comodo Dragon 6.0 0
IE 5.1 0
Windows Media Player 11.0 0
SonyEricsson 0 0
Thunderbird 3.0 0
Netscape 6.2 0
UC Browser 8.8 0
Lunascape 0 0
Lynx 2.8 0
Epiphany 3.2 0
Lunascape 6.3 0
Links 2.1 0
Firebird 0 0
QQ Browser 2.1 0
Chrome 99.0 0
Amiga 0 0
QQ Browser 1.9 0
Chrome 17.1 0
Microsoft-WebDAV 0 0
UC Browser 7.7 0
Netscape 3.0 0
Comodo Dragon 13.2 0
Mozilla 1.6 0
Konqueror 3.1 0
Lunascape 6.4 0
QQ Browser 5.1 0
Lunascape 4.0 0
Netscape 4.5 0
Chrome 19.7 0
Konqueror 3.0 0
Webaroo 1.2 0
Sleipnir 2.0 0
Chrome 2.4 0
Camino 1.5 0
w3m 0.5 0
Konqueror 4.2 0
Jasmine 1.0 0
Flock 1.0 0
UC Browser 8.7 0
Squid 0 0
Galeon 1.0 0
Epiphany 3.0 0
Webaroo 1.3 0
Camino 2.2 0
Chromium 26.0 0
Iceweasel 10.0 0
Midori 0.1 0
Midori 0.01 0
Iron 2.0 0
Openwave Mobile Browser 0 0
Flock 1.1 0
QQ Browser 6.8 0
Konqueror 3.3 0
Dillo 2.0 0
Anonymous 0 0
Lunascape 6.1 0
IE 5.2 0
QQ Browser 2.0 0
iBrowser 3.1 0
Comodo Dragon 12.0 0
Epiphany 2.14 0
Silk 2.3 0
Chromium 5.0 0
Chrome 0.5 0
Lunascape 5.1 0
UC Browser 7.6 0
Opera 15.0 0
Chimera 0 0
QQ Browser 6.2 0
Flock 3.0 0
Chrome 3.1 0
Comodo Dragon 17.0 0
QQ Browser 5.0 0
Epiphany 1.2 0
SeaMonkey 2.19 0
Lunascape 2.1 0
QQ Browser 6.7 0
Puffin 3.91 0
rekonq 2.1 0
Midori 0 0
Silk 2.0 0
Epiphany 1.4 0
Mozilla 1.2 0
Mozilla 1.5 0
Mozilla 1.4 0
OmniWeb 5.10 0
Windows Media Player 9.0 0
rekonq 2.3 0
Comodo Dragon 4.0 0
Opera 7.2 0
SeaMonkey 1.5 0
Avant Browser 0 0
Konqueror 3.4 0
rekonq 2.0 0
IEMobile 9.0 0
Netscape 4.0 0
iTunes 0 0
ELinks 0.9 0
QQ Browser 1.4 0
WebTV/MSNTV 1.0 0
QQ Browser 6.0 0
QQ Browser 1.3 0
rekonq 1.3 0
UC Browser 8.9 0
Konqueror 4.1 0
RockMelt 3.0 0
QQ Browser 1.0 0
Iron 1.0 0
Lunascape 5.0 0
Camino 0.8 0
Puffin 3.93 0
Lunascape 6.0 0
Proxomitron 0 0
Lunascape 4.8 0
Lunascape 2.0 0
Dolfin 2.0 0
Iceweasel 3.5 0
Epiphany 2.20 0
Mozilla 1.3 0
Minefield 3.6 0
AOL 5.5 0
Pale Moon 3.5 0
iPhone 0 0
Chrome 2.1 0
Chrome 8.1 0
UC Browser 2.5 0
Baidu Explorer 1.4 0
ibisBrowser 0 0
Yandex Browser 2.0 0
Iron 0.2 0
Netscape 4.61 0
Silk 2.1 0
Midori 0.5 0
Flock 0.9 0
Lynx 0 0
QQ Browser 2.9 0
SeaMonkey 2.20 0
Flock 0.7 0
Camino 0.7 0
CoRom+ 27.0 0
Minefield 3.1 0
UC Browser 2.4 0
Tencent Traveler 5.0 0
ELinks 0.11 0
Opera 7.6 0
QQ Browser 6.5 0
Chrome 59.0 0
Lunascape 6.2 0
Lunascape 4.7 0
Iceweasel 17.0 0
Chrome 99.9 0
UC Browser 9.1 0
Chrome 42.0 0
Windows-Media-Player 10.0 0
Apple-PubSub 0 0
QQ Browser 1.2 0
Chrome 1.3 0
SaferSurf 0 0
Baidu Explorer 1.3 0
Minefield 3.2 0
iCab 3.0 0
Iceweasel 21.0 0
QQ Browser 6.6 0
Comodo Dragon 1.0 0
Netscape 6.1 0
Dillo 0.8 0
UC Browser 7.4 0
Opera 10.3 0
RockMelt 2.1 0
Sleipnir 4.1 0
Netscape 4.51 0
UC Browser 7.2 0
Chrome 26.9 0
UC Browser 7.0 0
SEMC Browser 0 0
Sleipnir 2.9 0
Beamrise 2.19 0
Epiphany 0.9 0
Baidu Explorer 2.0 0
Opera 5.0 0
iCab 2.9 0
iBrowser 2.8 0
Epiphany 0.8 0
Lunascape 1.4 0
Webaroo 2.0 0
Opera 8.1 0
BrowseX 0 0
UC Browser 7.5 0
IEMobile 7.0 0
Camino 3.0 0
Shiira 1.2 0
Netscape 4.6 0
Iron 0.3 0
NetPositive 2.2 0
Chrome 1.1 0
Opera 6.0 0
RockMelt 2.2 0
Iron 0 0
rekonq 1.0 0
Lunascape 1.1 0
Lunascape 3.6 0
Maxthon 0.0 0
rekonq 1.2 0
Yandex Browser 6.2 0
Baidu Explorer 1.2 0
QQ Browser 6.3 0
Mozilla 0 0
Pale Moon 0 0
Epiphany 1.6 0
SmallProxy 0 0
QQ Browser 1.1 0
UC Browser 8.1 0
Epiphany 2.18 0
Baidu Explorer 1.1 0
Netscape 6.0 0
IE 4.0 0
Chromium 19.0 0
Lunascape 3.0 0
Netbox 0 0
Opera 12.8 0
Lunascape 4.9 0
Microsoft Office Existence Discovery 0 0
Camino 4.0 0
Comodo Dragon 17.2 0
Windows Media Player 10.0 0
Sundance 1.2 0
rekonq 1.80 0
Emacs/W3 0 0
Firefox 99.0 0
fantomas fantomBrowser 0 0
Iceweasel 20.0 0
Lunascape 4.6 0
NetFront 3.3 0
Yandex Browser 2.1 0
Lunascape 1.0 0
QQ Browser 5.2 0
Lunascape 1.3 0
Lunascape 1.2 0
Maxthon 3.5 0
Iceweasel 18.0 0
Epiphany 2.16 0
Polaris 0 0
Chrome 32.0 0
Beamrise 4.20 0
RockMelt 1.0 0
Lunascape 3.5 0
Twitturly 0 0
SeaMonkey 9.23 0
Sleipnir 2.8 0
ELinks 0.10 0
Iceweasel 3.0 0
Epiphany 2.28 0
IE 4.5 0
Sundance 1.3 0
Flock 0.4 0
Epiphany 1.0 0
Chrome 24.3 0
ELinks 0.12 0
Epiphany 1.8 0
Lunascape 1.05 0
Camino 1.1 0
Dolfin 1.5 0
Sundance 0.9 0
Puffin 2.93 0
Baidu Explorer 1.0 0
SeaMonkey 0 0
Baidu Explorer 2.1 0
Flock 0.5 0
iBrowser 2.7 0
Mozilla 1.1 0
Links 0.9 0
iCab 2.7 0
UC Browser 2.1 0
General Crawlers 0 0
Iron 21.0 0
Midori 1.19 0
Lunascape 4.3 0
UC Browser 6.0 0
Iron 0.4 0
Pale Moon 16.0 0
Opera 5.1 0
Lunascape 4.2 0
Iron 8.06 0
Opera 9.7 0
Epiphany 1.9 0
Camino 0.9 0
Puffin 2.91 0
CE-Preload 0 0
Lunascape 3.1 0
Epiphany 3.4 0
Iceweasel 19.0 0
Iron 23.0 0
iBrowser 0 0
Lunascape 4.1 0
Epiphany 0 0
Sundance 0 0
Pale Moon 93.6 0
Flock 0.8 0
HP Secure Web Browser 1.4 0
Maxthon 3.9 0
Chrome 24.8 0
Links 1.0 0
Netscape 4.71 0
Chrome 0.1 0
VLC 0 0
Epiphany 2.29 0
Chrome 24.7 0
K-Meleon 1.6 0
Camino 2.4 0
Firefox 0.0 0
Firefox 27.0 0
Konqueror 4.6 0
WebTV/MSNTV 2.8 0
Chrome 40.0 0
Silk 1.02 0
Chrome 95.0 0
Baidu Explorer 2.5 0
Amaya 9.5 0
rekonq 1.70 0
Galeon 1.3 0
Comodo Dragon 18.2 0
Baidu Explorer 2.4 0
Maxthon 5.0 0
ogeb browser 1.1 0
Lunascape 1.03 0
Iceweasel 11.0 0
Firefox 3.7 0
Privoxy 0 0
Iceweasel 13.0 0
Firefox 3.2 0
Dillo 0.6 0
Lunascape 3.2 0
OmniWeb 4.5 0
SeaMonkey 2.21 0
iCab 4.0 0
Firefox 3.3 0
Firefox 3.4 0
Opera 10.10 0
Firefox 3.8 0
Chromium 29.0 0
Baidu Explorer 2.3 0
Firefox 3.9 0
Iron 20.0 0
Shiira 1.1 0
RockMelt 0.0 0
iPod Touch 0 0
Epiphany 3.6 0
IBrowse 2.2 0
Microsoft Excel 12.0 0
Microsoft Visio 0 0
w3m 0.4 0
OmniWeb 2.7 0
Shiira 0.9 0
Vienna 3.0 0
Iceweasel 22.0 0
Flock 4.0 0
Sleipnir 2.4 0
Chromium 30.0 0
Firefox 50.0 0
Microsoft 0 0
rekonq 1.81 0
Dillo 0.7 0
Konqueror 4.10 0
iCab 2.8 0
Enigma Browser 0 0
Vienna 2.6 0
Pale Moon 20.2 0
Konqueror 4.8 0
Maxthon 2.5 0
Flock 0 0
Windows Media Player 8.0 0
Camino 1.2 0
w3m 0.2 0
w3m 0.1 0
Maxthon 3.2 0
Midori 0.0 0
Chrome 3.2 0
Anonymizied 0 0
Konqueror 4.4 0
Iceweasel 14.0 0
Epiphany 1.7 0
w3m 0 0
RockMelt 0.44 0
Iceweasel 6.0 0
Firefox 29.0 0
1st ZipCommander 0 0
Sleipnir 2.7 0
Chrome 2.2 0
Firefox 83.0 0
Firefox 26.0 0
RockMelt 0.1 0
Iceweasel 16.0 0
Iceweasel 23.0 0
Kindle 3.8 0
Opera 9.3 0
Iceweasel 7.0 0
Sleipnir 4.2 0
Mozilla 0.9 0
iCab 0 0
Iceweasel 3.6 0
Chrome 19.9 0
Sleipnir 3.9 0
Lunascape 1.04 0
Chrome 38.0 0
Links 0 0
CoRom+ 26.0 0
Opera 9.4 0
Camino 0 0
BITS 0 0
SeaMonkey 2.22 0
Maxthon 3.6 0
Firefox 30.0 0
Opera 9.8 0
Sleipnir 4.3 0
UC Browser 1.9 0
Baidu Explorer 2.2 0
Sleipnir 3.8 0
IE 6.1 0
K-Meleon 1.7 0
Iceweasel 5.0 0
Maxthon 55.5 0
Lunascape 3.4 0
Opera 9.9 0
Zune 3.0 0
RockMelt 2.3 0
Firefox 33.0 0
UC Browser 7.3 0
Windows Media Player 4.0 0
Maxthon 22.0 0
QQ Browser 7.4 0
Opera 8.6 0
Pale Moon 19.1 0
Lunascape 0.98 0
Firefox 90.0 0
Konqueror 4.0 0
Firefox 37.0 0
Chrome 24.9 0
Firefox 62.0 0
Windows Media Player 7.0 0
CoRom+ 0 0
OmniWeb 0 0
Chrome 77.8 0
Iron 22.0 0
Maxthon 4.5 0
WinAmp 0 0
iBrowser 2.6 0
Kindle 4.0 0
Silk 3.3 0
Iceweasel 15.0 0
Maxthon 9.0 0
Maxthon 6.0 0
Sleipnir 4.0 0
Iceweasel 12.0 0
Chrome 18.1 0
Bolt 0 0
Firefox 35.0 0
Chrome 4.9 0
Chrome 2.5 0
Firefox 0.9 0
Chrome 9.2 0
Firefox 28.0 0
Chrome 20.5 0
Epiphany 3.3 0
HP Secure Web Browser 1.7 0
Lunascape 4.5 0
Chrome 02.0 0
Comodo Dragon 25.0 0
SeaMonkey 10.0 0
Konqueror 4.9 0
vobsub 0 0
Chrome 65.0 0
RMA 0 0
Firefox 0.10 0
Midori 1.25 0
MS IPPPD 0 0
Anonymizer 0 0
Minefield 4.2 0
RockMelt 3.1 0
Chrome 22.9 0
Maxthon 10.0 0
Chrome 9.9 0
Comodo Dragon 22.2 0
Chrome 13.6 0
Chrome 23.9 0
Iron 24.0 0
Chrome 92.0 0
Chrome 91.0 0
Sundance 1.0 0
Firefox 0.8 0
Chrome 1.6 0
Chrome 20.2 0
Arora 0.4 0
SeaMonkey 7.0 0
Chrome 29.1 0
MS IPP DAV 0 0
Iceweasel 9.0 0
HP Secure Web Browser 1.8 0
UC Browser 7.1 0
Chrome 16.1 0
Iceweasel 8.0 0
Lynx 2.6 0
Konqueror 4.5 0
MFHttpScan 0 0
Chrome 16.9 0
Maxthon 8.0 0
Chrome 19.1 0
Chrome 17.7 0
Chrome 14.9 0
K-Meleon 1.1 0
SlimBrowser 0 0
Chrome 22.3 0
Pale Moon 17.0 0
Dolfin 2.1 0
Chrome 18.8 0
Chrome 37.0 0
Sleipnir 2.3 0
Chrome 18.5 0
Epiphany 4.3 0
SeaMonkey 8.2 0
Chrome 21.1 0
Chrome 15.3 0
Kindle 3.6 0
Opera 70.0 0
Chrome 1.2 0
Chrome 20.8 0
Chrome 2.7 0
Opera 12.00 0
Chrome 23.6 0
Firefox 7.1 0
Chrome 31.3 0
Opera 12.6 0
Lunascape 0.99 0
IBrowse 1.22 0
Opera 12.2 0
Chrome 21.2 0
Chrome 18.4 0
Chrome 8.8 0
Chrome 1.5 0
Chrome 22.6 0
Epiphany 2.1 0
QuickTime 7.1 0
RealPlayer 0 0
Webaroo 0 0
Chrome 19.8 0
Chrome 38.2 0
Chrome 16.7 0
Chrome 21.5 0
SeaMonkey 13.6 0
Chrome 16.2 0
Chrome 11.8 0
Maxthon 3.14 0
Chrome 14.4 0
Chrome 17.4 0
Comodo Dragon 26.0 0
SeaMonkey 8.6 0
Amaya 9.1 0
Chrome 20.3 0
Chrome 21.9 0
Chrome 22.7 0
Maxthon 3.33 0
K-Meleon 0 0
Dillo 0 0
UC Browser 6.3 0
Chrome 21.7 0
Maxthon 4.90 0
Chrome 6.2 0
Chrome 15.7 0
MS IPP 0 0
Yandex Browser 2.5 0
Maxthon 7.0 0
Firefox 79.0 0
Chrome 20.6 0
Maxthon 4.3 0
Pale Moon 10.0 0
MS Proxy 0 0
Chrome 22.4 0
Iceweasel 4.0 0
Chrome 24.4 0
Ace Explorer 0 0
Firefox 70.0 0
Chrome 14.1 0
Chrome 19.5 0
Firefox 20.1 0
Chrome 23.7 0
Chrome 31.0 0
Chrome 23.8 0
Chrome 15.5 0
Chrome 16.3 0
Chrome 16.4 0
Yandex Browser 0.0 0
Shiira 1.0 0
Chrome 1.4 0
Zune 2.5 0
Iron 30.0 0
Chrome 12.6 0
Chrome 15.8 0
Firefox 61.0 0
Chrome 13.1 0
Chrome 14.6 0
Chrome 22.5 0
iBrowser 2.5 0
Opera 13.0 0
Chrome 17.8 0
Chrome 18.7 0
Chrome 21.4 0
Chrome 6.9 0
Chrome 24.5 0
Chrome 24.6 0
Firefox 80.0 0
Camino 0.0 0
Charlotte 1.1 0
Chrome 7.3 0
Sleipnir 2.5 0
Chrome 20.9 0
Chrome 16.5 0
Sundance 0.99 0
CoRom+ 25.0 0
Chrome 17.6 0
Chrome 18.9 0
Mosaic 3.8 0
Chrome 7.2 0
Chrome 16.8 0
Chrome 15.9 0
Chrome 19.2 0
WebTV/MSNTV 1.2 0
Chrome 20.7 0
Chrome 14.3 0
Kindle 2.0 0
Chrome 17.2 0
w3m 0.3 0
Openwave Mobile Browser 6.2 0
Iron 29.0 0
Sleipnir 3.0 0
Chrome 8.4 0
Chrome 13.8 0
iBrowser 2.4 0
Konqueror 4.3 0
Chrome 15.6 0
Chrome 18.3 0
Chrome 19.4 0
Chrome 20.1 0
Vienna 2.5 0
Chrome 0.9 0
Chrome 19.3 0
SeaMonkey 4.2 0
Comodo Dragon 0 0
Konqueror 4.7 0
Chrome 20.4 0
Chrome 14.7 0
Kindle 3.3 0
Chrome 7.8 0
Chrome 26.7 0
SeaMonkey 9.27 0
Chrome 14.2 0
Chrome 8.3 0
Firefox 40.0 0
Camino 1.8 0
Chrome 22.8 0
Safari 3.3 0
Chrome 15.4 0
Sleipnir 2.2 0
Chrome 9.1 0
Chrome 6.1 0
Chrome 16.6 0
SeaMonkey 3.0 0
Lunascape 1.02 0
Chrome 14.8 0
Chrome 15.1 0
Kindle 3.5 0
Maxthon 25.0 0
Chrome 21.3 0
Chrome 18.2 0
Dillo 3.0 0
iBrowser 2.2 0
Chrome 21.6 0
Chrome 4.5 0
Chrome 2.8 0
Chrome 23.5 0
Dolfin 2.2 0
Chrome 7.1 0
GreenBrowser 0 0
Chrome 10.6 0
Chrome 33.0 0
Chrome 15.2 0
Sleipnir 3.7 0
Chrome 19.6 0
Epiphany 3.22 0
Chrome 3.3 0
MPlayer 1.0 0
Chrome 17.5 0
Chrome 26.4 0
Flock 2.02 0
Chrome 1.7 0
Flock 2.05 0
Chrome 5.1 0
Chrome 2.6 0
Lunascape 0.96 0
SeaMonkey 11.1 0
Kindle 3.2 0
Chrome 9.4 0
UC Browser 5.1 0
Chrome 5.4 0
Chrome 21.8 0
Chrome 17.9 0
Epiphany 2.91 0
Opera 18.2 0
Chrome 5.3 0
Flock 2.07 0
Google Desktop 0 0
Kindle 3.7 0
Firefox 39.0 0
Chrome 22.2 0
Chrome 31.7 0
Chrome 14.5 0
Sundance 2.0 0
Chrome 7.4 0
Iceweasel 0 0
Midori 0.45 0
Chrome 2.9 0
Chrome 34.2 0
Flock 2.09 0
Dillo 2.2 0
Safari 4.9 0
Chrome 17.3 0
Chrome 31.5 0
Charlotte 1.0 0
Maxthon 4.05 0
WordPress 0 0
Opera 12.7 0
Chrome 4.8 0
Yandex Browser 0 0
Safari 11.9 0
Chrome 0.6 0
Netscape 9.2 0
Chrome 33.1 0
Chrome 3.7 0
Chrome 88.8 0
Chrome 7.7 0
Opera 25.0 0
Firefox 45.0 0
Chrome 10.8 0
Chrome 11.5 0
Chrome 0.8 0
Chrome 12.7 0
Flock 2.04 0
Chrome 4.2 0
Safari 26.6 0
Chrome 44.8 0
Sleipnir 0 0
Maxthon 4.2 0
Flock 2.01 0
Vienna 1.2 0
QQ Browser 1.6 0
Chrome 4.4 0
Chrome 28.4 0
Sleipnir 2.30 0
Dillo 2.1 0
Chrome 25.9 0
Lynx 2.7 0
Google 0 0
Kindle 3.1 0
Chrome 6.3 0
Safari 8.6 0
Chrome 12.8 0
K-Meleon 0.8 0
Chrome 61.2 0
Lynx 2.4 0
Flock 7.0 0
Sleipnir 3.6 0
Chrome 10.3 0
Chrome 8.2 0
Chrome 6.8 0
Sleipnir 1.9 0
Chrome 30.3 0
Sleipnir 2.6 0
Mozilla 2.0 0
Chrome 3.5 0
Camino 2.3 0
Chrome 1.8 0
Flock 2.03 0
Sleipnir 2.40 0
Safari 6.2 0
QQ Browser 6.15 0
Opera iPad 0
Mosaic 0 0
Midori 7.9 0
Chrome 5.2 0
Chrome 10.1 0
Kindle 3.4 0
Firefox 16.5 0
Firefox 69.0 0
Sundance 1.1 0
Opera 16.0 0
Mozilla 2.2 0
Chrome 12.2 0
Chrome 8.5 0
CoRom+ 24.0 0
Silk 0 0
Pocket PC 0 0
Escape 0 0
Safari 16.9 0
IE 3.0 0
Safari 9.0 0
Opera 14.2 0
Chrome 47.1 0
Vienna 1.0 0
Chrome 32.7 0
Chrome 9.6 0
Chrome 28.1 0
Chrome 6.4 0
Google Webmaster Tools 0 0
Chrome 8.6 0
Flock 2.06 0
Chrome 9.5 0
Firefox 23.6 0
Chrome 66.0 0
SeaMonkey 1.6 0
Websense 0 0
Chrome 12.5 0
Mozilla 6.0 0
Kindle 4.4 0
Chrome 87.0 0
Firefox 14.6 0
Wipeout Pure 0 0
Chrome 29.9 0
Vienna 0 0
Chromium 18.6 0
Custo 0 0
Chrome 6.6 0
Chrome 11.2 0
Chrome 12.1 0
Firefox 1.1 0
Netscape 9.1 0
Safari 5.9 0
Chrome 8.7 0
Chrome 9.7 0
Chrome 27.8 0
Firefox 4.2 0
Chrome 13.7 0
OmniWeb 5.12 0
Chrome 5.9 0
Chrome 43.4 0
Firefox 82.0 0
Iron 35.5 0
Safari 4.6 0
Chrome 27.6 0
Maxthon 5.2 0
K-Meleon 1.02 0
Chrome 1.9 0
Chrome 43.2 0
Links 2.0 0
Maxthon 4.6 0
Chrome 6.7 0
Chrome 2.3 0
Charlotte 2.1 0
Chrome 25.8 0
K-Meleon 0.9 0
Flock 3.7 0
Dolphin 0.8 0
SeaMonkey 5.9 0
Sleipnir 2.41 0
Beamrise 0.0 0
Firefox 53.0 0
Safari 9.9 0
RockMelt 0.2 0
Safari 11.0 0
Galeon 1.2 0
Chrome 4.3 0
Chrome 12.3 0
Opera 11.7 0
Firefox 13.6 0
Firefox 4.6 0
Phantom 22.0 0
Kindle 1.1 0
rekonq 4.8 0
Epiphany 1.5 0
Maxthon 1.6 0
Dolphin 4.0 0
Chrome 10.4 0
Opera 3.0 0
Chrome 11.1 0
Firefox 74.0 0
Epiphany 3.1 0
Chrome 12.4 0
Firefox 13.2 0
Firefox 9.10 0
Chrome 13.4 0
Yahoo! My Browser 0 0
Chrome 12.9 0
Chrome 27.4 0
MFC Foundation Class Library 0 0
Chrome 6.5 0
Openwave Mobile Browser 6.3 0
Safari 5.4 0
Midori 5.0 0
fantomas fantomCrew Browser 0 0
Maxthon 24.0 0
SeaMonkey 3.15 0
Firefox 15.6 0
OmniWeb 3.0 0
Firefox 56.0 0
Lunascape 0.95 0
Chrome 47.0 0
Firefox 1.6 0
Chrome 25.7 0
QQ Browser 6.40 0
Chrome 37.3 0
Dolphin 3.5 0
Chrome 66.6 0
Chrome 11.9 0
Chrome 34.0 0
Firefox 17.6 0
EVE-minibrowser 0 0
fantomas multiBlocker browser 0 0
Kindle 1.0 0
Chrome 3.6 0
Chrome 5.5 0
Maxthon 4.03 0
SeaMonkey 6.1 0
Chrome 4.6 0
Maxthon 9.9 0
Silk 3.2 0
Chrome 3.9 0
Firefox 30.6 0
Firefox 4.5 0
Dolphin 6.2 0
Firefox 17.1 0
Maxthon 3.1 0

Develop Reference

r css asp.net wordpress firebase qt symfony nginx http apache-flex

How to make svg stroke-dash one dash - css

Try #keyframes progress { 0% { stroke-dasharray: 0 1000; } 99% { stroke-dasharray: 1000 0; } } The number 1000 refers to the length of the path, not the percent filled, so you want it to equal the length of your circle. When you have a value of 100 it creates dashes every 100 units.

Related

How do I align path element row-wise in SVG component?

Prevent snap at the end of SVG color gradient animation

SVG stroke-width not working

IE 11 and Edge adding space above and below SVG despite using "display: block"

How to keep the REST authentication credentials in AngularJS on page reload?

Categories

Resources