SVG animation not repeating properly

SVG animation not repeating properly - svg

I am having some difficulty getting my SVG icons to repeat properly. I need them to repeat like a gif, individually and indefinitely. I can get only two to work but I need all three to repeat one after the other. Here is a js fiddle of the SVG animation in action. Code below
https://jsfiddle.net/allanberlin/cma0ejkw/
<svg version="1.1" id="Layer_1" class="loader" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 100 100" enable-background="new 0 0 100 100" xml:space="preserve">
<g>
<path fill="#FFFFFF" d="M46.5,68.5c-2.3,0-4.3-0.8-5.8-2.2l-7.1-7.2c0,0,0,0-0.1-0.1l0,0c-1.4-1.5-2.2-3.6-2.1-6.1
c0.2-7,6.9-15.7,14.8-19.7c5.3-2.6,10.1-2.5,12.9,0.2l0.1,0.1l0.1,0.1l7,7.2c0.3,0.3,0.7,0.8,0.9,1.2l0,0c0.8,1.3,1.2,3,1.2,4.9
c-0.2,7-6.9,15.8-14.8,19.7C51.1,67.9,48.7,68.5,46.5,68.5z M39.5,61.4l3.2,3.3c1.9,1.9,5.8,1.8,10-0.2c7-3.4,13.2-11.4,13.3-17.4
c0.1-1.4-0.2-2.5-0.8-3.4l0,0c-0.2-0.2-0.3-0.5-0.6-0.8l-3.1-3.2c0,0.1,0,0.2,0,0.2s0,0.2,0,0.3c-0.4,7-6.9,15.5-14.8,19.3l0,0
c-2.3,1.2-4.6,1.8-6.7,1.8l0,0C39.8,61.4,39.6,61.4,39.5,61.4z M35.5,57.4c0.3,0.3,0.7,0.6,1.1,0.8c0.2,0.1,0.3,0.2,0.5,0.2
c0.3,0.1,0.7,0.2,1,0.2c0.2,0,0.4,0.1,0.7,0.1c1.1-6.7,7.3-14.4,14.6-18c1.8-0.9,3.8-1.5,5.4-1.8c-0.1-1.3-0.5-2.4-1.2-3.2
c0,0-0.1,0-0.1-0.1c-1.9-2-5.8-1.9-10.1,0.2c-7,3.4-13.2,11.4-13.3,17.4C34.1,54.9,34.5,56.4,35.5,57.4L35.5,57.4z M58.6,41.5
c-1.3,0.2-2.7,0.8-4.1,1.4c-6.4,3.1-11.9,9.8-13.1,15.6c1.3-0.3,2.7-0.8,4.1-1.4l0,0C52,54,57.5,47.3,58.6,41.5z"/>
<animate id="Circle" attributeName="visibility" from="hidden" to="visable" dur="1s" begin="0s; Mona.end"/>
</g>
<g>
<path fill="#FFFFFF" d="M43.2,70.2l-16.1-8l21.4-32.5l24.3,35.2L43.2,70.2z M49.3,35.6l-4.4,31.7l23.4-4.2L49.3,35.6z M30.8,61.2
L42.3,67l4.1-29.3L30.8,61.2z"/>
<animate id="Triangle" attributeName="visibility" from="hidden" to="visable" dur="1s" begin="2s; Circle.begin+1s"/>
</g>
<g>
<path fill="#FFFFFF" d="M42.6,68l-20.2-7.1l0.5-1.2c0.3-0.5,5.2-12.5,7.1-16.6l0.2-0.3c1.1-2.4,2.7-5.8,5.7-5.8
c0.4,0,0.8,0.1,1.2,0.2l0,0l0.2,0.1l9.2,3.2c1,0.3,2.1-0.1,2.5-1.1c0.3-0.6,0.5-1.1,0.6-1.3l0.2-0.3c1.1-2.4,2.7-5.8,5.7-5.8l0,0
c0.5,0,1,0.1,1.4,0.2l1.3,0.4l0,0l16.4,5.8c1.8,0.6,2.9,2.4,2.8,4.8c-0.2,1.9-0.6,3.3-1.2,4.9l-0.4,1.2l-5.2-1.8
c-1-0.3-2.1,0.1-2.5,1.1c-1.9,4.4-4.9,11.3-4.9,11.4l-0.2,0.3c-1,2.1-2.2,4.6-5.1,3.9l0,0c0,0-0.1,0-0.4-0.2l0,0
c-0.1,0-0.1-0.1-0.2-0.1c-0.9-0.3-3.3-1.2-9.8-3.5c-1-0.3-2.1,0.1-2.5,1.1C44,64.6,43,66.9,43,66.9L42.6,68z M27.9,60.1l11.5,4
c1,0.3,2.1-0.1,2.5-1.1c0.6-1.4,1.4-3.3,2.2-5.2l0,0c0.1-0.2,0.2-0.3,0.2-0.5l0.3-0.6l0,0c1.1-2.7,2.4-5.8,3.2-7.4l0.2-0.3
c0.4-0.7,0.8-1.6,1.2-2.4c0.6-1.1,0.1-2.4-1-2.9l-11.5-4c-0.2-0.1-0.3-0.1-0.6-0.1c-1.5,0-2.6,2.3-3.4,4.2l-0.2,0.3
c-1.3,2.7-4.1,9.3-5.8,13.3C26.2,58.5,26.8,59.7,27.9,60.1z M58.8,61.8c0.7,0.2,1.1-0.3,2.2-2.5l0.2-0.2c0-0.1,4.8-11.3,6.2-14.2
l0,0l0,0l0,0l0,0l0.5-1.1l0,0c0.3-0.7,0.7-1.5,1.1-2.2c0.6-1.1,0.1-2.4-1-2.8l-11.5-4c-0.2-0.1-0.3-0.1-0.6-0.1l0,0
c-1.5,0-2.6,2.3-3.4,4.2l-0.2,0.3c-0.1,0.1-0.2,0.4-0.4,0.8c-0.5,1.1,0.1,2.3,1.2,2.6l2.4,0.8l0,0c0.5,0.2,1,0.5,1.3,0.8
c0.9,0.9,1.4,2.5,1.4,4.5L58,59.3c0,0.7,0.2,1.9,0.7,2.2C58.6,61.7,58.7,61.7,58.8,61.8z M47.8,55.6c-0.5,1.1,0.1,2.3,1.2,2.7
c2,0.7,4.4,1.5,6.3,2.2c-0.1-0.6-0.1-1-0.1-1.2l0.1-10.5c0-1.2-0.3-2.2-0.7-2.7c-0.1-0.1-0.2-0.2-0.4-0.2l0,0l0,0
c-0.2-0.1-0.3-0.1-0.6-0.1c-1.5,0-2.6,2.3-3.4,4.2L50,50.4C49.5,51.6,48.7,53.6,47.8,55.6z M72.3,45.3L72.3,45.3
c1.2,0.4,2.4-0.3,2.6-1.5c0-0.2,0.1-0.5,0.1-0.7c0.1-0.7,0-1.8-1-2.2l0,0c-0.2-0.1-0.4-0.1-0.7-0.1l0,0c-0.8,0-1.4,0.7-2,1.5
C70.6,43.4,71.1,44.8,72.3,45.3z"/>
<animate id="Mona" attributeName="visibility" from="hidden" to="visable" dur="1s" begin="3s; Triangle.begin+1s"/>
</g>
</svg>

visible has two i's and no a.
Do you really want everything to appear at once. If not make the groups hidden by default as I've done.
body {
background-color: #aad5df;
}
<svg version="1.1" id="Layer_1" class="loader" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 100 100" enable-background="new 0 0 100 100" xml:space="preserve">
<g visibility="hidden">
<path fill="#FFFFFF" d="M46.5,68.5c-2.3,0-4.3-0.8-5.8-2.2l-7.1-7.2c0,0,0,0-0.1-0.1l0,0c-1.4-1.5-2.2-3.6-2.1-6.1
c0.2-7,6.9-15.7,14.8-19.7c5.3-2.6,10.1-2.5,12.9,0.2l0.1,0.1l0.1,0.1l7,7.2c0.3,0.3,0.7,0.8,0.9,1.2l0,0c0.8,1.3,1.2,3,1.2,4.9
c-0.2,7-6.9,15.8-14.8,19.7C51.1,67.9,48.7,68.5,46.5,68.5z M39.5,61.4l3.2,3.3c1.9,1.9,5.8,1.8,10-0.2c7-3.4,13.2-11.4,13.3-17.4
c0.1-1.4-0.2-2.5-0.8-3.4l0,0c-0.2-0.2-0.3-0.5-0.6-0.8l-3.1-3.2c0,0.1,0,0.2,0,0.2s0,0.2,0,0.3c-0.4,7-6.9,15.5-14.8,19.3l0,0
c-2.3,1.2-4.6,1.8-6.7,1.8l0,0C39.8,61.4,39.6,61.4,39.5,61.4z M35.5,57.4c0.3,0.3,0.7,0.6,1.1,0.8c0.2,0.1,0.3,0.2,0.5,0.2
c0.3,0.1,0.7,0.2,1,0.2c0.2,0,0.4,0.1,0.7,0.1c1.1-6.7,7.3-14.4,14.6-18c1.8-0.9,3.8-1.5,5.4-1.8c-0.1-1.3-0.5-2.4-1.2-3.2
c0,0-0.1,0-0.1-0.1c-1.9-2-5.8-1.9-10.1,0.2c-7,3.4-13.2,11.4-13.3,17.4C34.1,54.9,34.5,56.4,35.5,57.4L35.5,57.4z M58.6,41.5
c-1.3,0.2-2.7,0.8-4.1,1.4c-6.4,3.1-11.9,9.8-13.1,15.6c1.3-0.3,2.7-0.8,4.1-1.4l0,0C52,54,57.5,47.3,58.6,41.5z" />
<animate id="Circle" attributeName="visibility" from="hidden" to="visible" dur="1s" begin="0s; Mona.end"/>
</g>
<g visibility="hidden">
<path fill="#FFFFFF" d="M43.2,70.2l-16.1-8l21.4-32.5l24.3,35.2L43.2,70.2z M49.3,35.6l-4.4,31.7l23.4-4.2L49.3,35.6z M30.8,61.2
L42.3,67l4.1-29.3L30.8,61.2z"/>
<animate id="Triangle" from="hidden" to="visible" dur="1s" attributeName="visibility" begin="Circle.begin+1s"/>
</g>
<g visibility="hidden">
<path fill="#FFFFFF" d="M42.6,68l-20.2-7.1l0.5-1.2c0.3-0.5,5.2-12.5,7.1-16.6l0.2-0.3c1.1-2.4,2.7-5.8,5.7-5.8
c0.4,0,0.8,0.1,1.2,0.2l0,0l0.2,0.1l9.2,3.2c1,0.3,2.1-0.1,2.5-1.1c0.3-0.6,0.5-1.1,0.6-1.3l0.2-0.3c1.1-2.4,2.7-5.8,5.7-5.8l0,0
c0.5,0,1,0.1,1.4,0.2l1.3,0.4l0,0l16.4,5.8c1.8,0.6,2.9,2.4,2.8,4.8c-0.2,1.9-0.6,3.3-1.2,4.9l-0.4,1.2l-5.2-1.8
c-1-0.3-2.1,0.1-2.5,1.1c-1.9,4.4-4.9,11.3-4.9,11.4l-0.2,0.3c-1,2.1-2.2,4.6-5.1,3.9l0,0c0,0-0.1,0-0.4-0.2l0,0
c-0.1,0-0.1-0.1-0.2-0.1c-0.9-0.3-3.3-1.2-9.8-3.5c-1-0.3-2.1,0.1-2.5,1.1C44,64.6,43,66.9,43,66.9L42.6,68z M27.9,60.1l11.5,4
c1,0.3,2.1-0.1,2.5-1.1c0.6-1.4,1.4-3.3,2.2-5.2l0,0c0.1-0.2,0.2-0.3,0.2-0.5l0.3-0.6l0,0c1.1-2.7,2.4-5.8,3.2-7.4l0.2-0.3
c0.4-0.7,0.8-1.6,1.2-2.4c0.6-1.1,0.1-2.4-1-2.9l-11.5-4c-0.2-0.1-0.3-0.1-0.6-0.1c-1.5,0-2.6,2.3-3.4,4.2l-0.2,0.3
c-1.3,2.7-4.1,9.3-5.8,13.3C26.2,58.5,26.8,59.7,27.9,60.1z M58.8,61.8c0.7,0.2,1.1-0.3,2.2-2.5l0.2-0.2c0-0.1,4.8-11.3,6.2-14.2
l0,0l0,0l0,0l0,0l0.5-1.1l0,0c0.3-0.7,0.7-1.5,1.1-2.2c0.6-1.1,0.1-2.4-1-2.8l-11.5-4c-0.2-0.1-0.3-0.1-0.6-0.1l0,0
c-1.5,0-2.6,2.3-3.4,4.2l-0.2,0.3c-0.1,0.1-0.2,0.4-0.4,0.8c-0.5,1.1,0.1,2.3,1.2,2.6l2.4,0.8l0,0c0.5,0.2,1,0.5,1.3,0.8
c0.9,0.9,1.4,2.5,1.4,4.5L58,59.3c0,0.7,0.2,1.9,0.7,2.2C58.6,61.7,58.7,61.7,58.8,61.8z M47.8,55.6c-0.5,1.1,0.1,2.3,1.2,2.7
c2,0.7,4.4,1.5,6.3,2.2c-0.1-0.6-0.1-1-0.1-1.2l0.1-10.5c0-1.2-0.3-2.2-0.7-2.7c-0.1-0.1-0.2-0.2-0.4-0.2l0,0l0,0
c-0.2-0.1-0.3-0.1-0.6-0.1c-1.5,0-2.6,2.3-3.4,4.2L50,50.4C49.5,51.6,48.7,53.6,47.8,55.6z M72.3,45.3L72.3,45.3
c1.2,0.4,2.4-0.3,2.6-1.5c0-0.2,0.1-0.5,0.1-0.7c0.1-0.7,0-1.8-1-2.2l0,0c-0.2-0.1-0.4-0.1-0.7-0.1l0,0c-0.8,0-1.4,0.7-2,1.5
C70.6,43.4,71.1,44.8,72.3,45.3z"/>
<animate id="Mona" attributeName="visibility" from="hidden" to="visible" dur="1s" begin="Triangle.begin+1s"/>
</g>
</svg>

Here's another way to do it, but without the flashing.
body {
background-color: #aad5df;
}
<svg version="1.1" id="Layer_1" class="loader" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 100 100" enable-background="new 0 0 100 100" xml:space="preserve">
<g>
<path fill="#FFFFFF" d="M46.5,68.5c-2.3,0-4.3-0.8-5.8-2.2l-7.1-7.2c0,0,0,0-0.1-0.1l0,0c-1.4-1.5-2.2-3.6-2.1-6.1
c0.2-7,6.9-15.7,14.8-19.7c5.3-2.6,10.1-2.5,12.9,0.2l0.1,0.1l0.1,0.1l7,7.2c0.3,0.3,0.7,0.8,0.9,1.2l0,0c0.8,1.3,1.2,3,1.2,4.9
c-0.2,7-6.9,15.8-14.8,19.7C51.1,67.9,48.7,68.5,46.5,68.5z M39.5,61.4l3.2,3.3c1.9,1.9,5.8,1.8,10-0.2c7-3.4,13.2-11.4,13.3-17.4
c0.1-1.4-0.2-2.5-0.8-3.4l0,0c-0.2-0.2-0.3-0.5-0.6-0.8l-3.1-3.2c0,0.1,0,0.2,0,0.2s0,0.2,0,0.3c-0.4,7-6.9,15.5-14.8,19.3l0,0
c-2.3,1.2-4.6,1.8-6.7,1.8l0,0C39.8,61.4,39.6,61.4,39.5,61.4z M35.5,57.4c0.3,0.3,0.7,0.6,1.1,0.8c0.2,0.1,0.3,0.2,0.5,0.2
c0.3,0.1,0.7,0.2,1,0.2c0.2,0,0.4,0.1,0.7,0.1c1.1-6.7,7.3-14.4,14.6-18c1.8-0.9,3.8-1.5,5.4-1.8c-0.1-1.3-0.5-2.4-1.2-3.2
c0,0-0.1,0-0.1-0.1c-1.9-2-5.8-1.9-10.1,0.2c-7,3.4-13.2,11.4-13.3,17.4C34.1,54.9,34.5,56.4,35.5,57.4L35.5,57.4z M58.6,41.5
c-1.3,0.2-2.7,0.8-4.1,1.4c-6.4,3.1-11.9,9.8-13.1,15.6c1.3-0.3,2.7-0.8,4.1-1.4l0,0C52,54,57.5,47.3,58.6,41.5z" visibility="hidden">
<set id="Circle" attributeName="visibility" attributeType="CSS" to="visible"
begin="0s; Mona.end" dur="1s" fill="freeze"/>
<set attributeName="visibility" attributeType="CSS" to="hidden"
begin="Circle.end" fill="freeze"/>
</path>
</g>
<g>
<path fill="#FFFFFF" d="M43.2,70.2l-16.1-8l21.4-32.5l24.3,35.2L43.2,70.2z M49.3,35.6l-4.4,31.7l23.4-4.2L49.3,35.6z M30.8,61.2
L42.3,67l4.1-29.3L30.8,61.2z" visibility="hidden">
<set id="Triangle" attributeName="visibility" attributeType="CSS" to="visible"
begin="Circle.end" dur="1s" fill="freeze"/>
<set attributeName="visibility" attributeType="CSS" to="hidden"
begin="Triangle.end" fill="freeze"/>
</path>
</g>
<g>
<path fill="#FFFFFF" d="M42.6,68l-20.2-7.1l0.5-1.2c0.3-0.5,5.2-12.5,7.1-16.6l0.2-0.3c1.1-2.4,2.7-5.8,5.7-5.8
c0.4,0,0.8,0.1,1.2,0.2l0,0l0.2,0.1l9.2,3.2c1,0.3,2.1-0.1,2.5-1.1c0.3-0.6,0.5-1.1,0.6-1.3l0.2-0.3c1.1-2.4,2.7-5.8,5.7-5.8l0,0
c0.5,0,1,0.1,1.4,0.2l1.3,0.4l0,0l16.4,5.8c1.8,0.6,2.9,2.4,2.8,4.8c-0.2,1.9-0.6,3.3-1.2,4.9l-0.4,1.2l-5.2-1.8
c-1-0.3-2.1,0.1-2.5,1.1c-1.9,4.4-4.9,11.3-4.9,11.4l-0.2,0.3c-1,2.1-2.2,4.6-5.1,3.9l0,0c0,0-0.1,0-0.4-0.2l0,0
c-0.1,0-0.1-0.1-0.2-0.1c-0.9-0.3-3.3-1.2-9.8-3.5c-1-0.3-2.1,0.1-2.5,1.1C44,64.6,43,66.9,43,66.9L42.6,68z M27.9,60.1l11.5,4
c1,0.3,2.1-0.1,2.5-1.1c0.6-1.4,1.4-3.3,2.2-5.2l0,0c0.1-0.2,0.2-0.3,0.2-0.5l0.3-0.6l0,0c1.1-2.7,2.4-5.8,3.2-7.4l0.2-0.3
c0.4-0.7,0.8-1.6,1.2-2.4c0.6-1.1,0.1-2.4-1-2.9l-11.5-4c-0.2-0.1-0.3-0.1-0.6-0.1c-1.5,0-2.6,2.3-3.4,4.2l-0.2,0.3
c-1.3,2.7-4.1,9.3-5.8,13.3C26.2,58.5,26.8,59.7,27.9,60.1z M58.8,61.8c0.7,0.2,1.1-0.3,2.2-2.5l0.2-0.2c0-0.1,4.8-11.3,6.2-14.2
l0,0l0,0l0,0l0,0l0.5-1.1l0,0c0.3-0.7,0.7-1.5,1.1-2.2c0.6-1.1,0.1-2.4-1-2.8l-11.5-4c-0.2-0.1-0.3-0.1-0.6-0.1l0,0
c-1.5,0-2.6,2.3-3.4,4.2l-0.2,0.3c-0.1,0.1-0.2,0.4-0.4,0.8c-0.5,1.1,0.1,2.3,1.2,2.6l2.4,0.8l0,0c0.5,0.2,1,0.5,1.3,0.8
c0.9,0.9,1.4,2.5,1.4,4.5L58,59.3c0,0.7,0.2,1.9,0.7,2.2C58.6,61.7,58.7,61.7,58.8,61.8z M47.8,55.6c-0.5,1.1,0.1,2.3,1.2,2.7
c2,0.7,4.4,1.5,6.3,2.2c-0.1-0.6-0.1-1-0.1-1.2l0.1-10.5c0-1.2-0.3-2.2-0.7-2.7c-0.1-0.1-0.2-0.2-0.4-0.2l0,0l0,0
c-0.2-0.1-0.3-0.1-0.6-0.1c-1.5,0-2.6,2.3-3.4,4.2L50,50.4C49.5,51.6,48.7,53.6,47.8,55.6z M72.3,45.3L72.3,45.3
c1.2,0.4,2.4-0.3,2.6-1.5c0-0.2,0.1-0.5,0.1-0.7c0.1-0.7,0-1.8-1-2.2l0,0c-0.2-0.1-0.4-0.1-0.7-0.1l0,0c-0.8,0-1.4,0.7-2,1.5
C70.6,43.4,71.1,44.8,72.3,45.3z" visibility="hidden">
<set id="Mona" attributeName="visibility" attributeType="CSS" to="visible"
begin="Triangle.end" dur="1s" fill="freeze"/>
<set attributeName="visibility" attributeType="CSS" to="hidden"
begin="Mona.end" fill="freeze"/>
</path>
</g>
</svg>

Related

Animate SVG with animateTransform (translate + skew)

How can I make the red bar skew into the position of the green?
I am trying to animate a logo with SVG animation. Therefore I am using skewX and transition for the animateTransform, but somehow only the skewX animation is executed. The transition seems not to work. (if I run the animations without the text part it works, but all together, seems to be conflicting.
Updated (to be more clear):
The group with the ID "Bar-Falling" has 2 animations:
<animateTransform attributeName="transform" type="skewX" ..
and
<animateTransform attributeName="transform" type="translate" ...
Why is the translate animation not working?
Any help appreciated.
<svg xmlns="http://www.w3.org/2000/svg" width="1492.94" height="157.41" viewBox="0 0 1492.94 157.41">
<g id="Socia">
<path d="M36,117.5a23,23,0,0,0,7.3,8.5A29.61,29.61,0,0,0,54,130.8a48.92,48.92,0,0,0,12.6,1.6,75.9,75.9,0,0,0,9.5-.7,34.66,34.66,0,0,0,9.5-2.8A21.28,21.28,0,0,0,93,123a14.49,14.49,0,0,0,3-9.4,13.49,13.49,0,0,0-3.9-9.9,30,30,0,0,0-10.2-6.3A107,107,0,0,0,67.58,93c-5.3-1.3-10.8-2.7-16.3-4.2a130.32,130.32,0,0,1-16.4-5.2,55.48,55.48,0,0,1-14.3-7.9,36.83,36.83,0,0,1-10.4-12.2,36.88,36.88,0,0,1-3.9-17.6,38.27,38.27,0,0,1,5-20.1,44.16,44.16,0,0,1,13-14.2,55.38,55.38,0,0,1,18.1-8.4A76.8,76.8,0,0,1,62.58.5a102.66,102.66,0,0,1,22.7,2.6,56.65,56.65,0,0,1,19.3,8.5A43.2,43.2,0,0,1,118,26.7,46.44,46.44,0,0,1,123,49H91a29,29,0,0,0-2.9-11.2,19.51,19.51,0,0,0-6.4-7,29.43,29.43,0,0,0-9.2-3.6,53.39,53.39,0,0,0-11.3-1,42.55,42.55,0,0,0-8,.8,21.89,21.89,0,0,0-7.3,2.9,19.1,19.1,0,0,0-5.3,5.3,14.83,14.83,0,0,0-2.2,8,12.77,12.77,0,0,0,1.8,7.1,15.36,15.36,0,0,0,6.6,5.2,81.69,81.69,0,0,0,13.7,4.6c5.8,1.5,13.5,3.5,22.9,5.9,2.8.6,6.7,1.6,11.7,3.1A55.17,55.17,0,0,1,110,76.2a45.3,45.3,0,0,1,12.8,13c3.6,5.4,5.3,12.3,5.3,20.8a45.31,45.31,0,0,1-4,19.2,40.82,40.82,0,0,1-11.9,15.1,55.62,55.62,0,0,1-19.5,10,95.22,95.22,0,0,1-27.1,3.6,93.77,93.77,0,0,1-24.2-2.9,62,62,0,0,1-20.7-9.6,47.67,47.67,0,0,1-14.2-16.7,48.29,48.29,0,0,1-5.3-24.1h32.1A28.77,28.77,0,0,0,36,117.5" transform="translate(-1.14 -0.5)" style="fill: #fac800"/>
<path d="M143.18,76.75a49.66,49.66,0,0,1,29.1-29.7,68,68,0,0,1,46.5,0A49.82,49.82,0,0,1,248,76.75a66,66,0,0,1,4,23.7,65.09,65.09,0,0,1-4,23.6,51.54,51.54,0,0,1-11.4,18,48.77,48.77,0,0,1-17.8,11.5,64.22,64.22,0,0,1-23.3,4,65.49,65.49,0,0,1-23.2-4,49.62,49.62,0,0,1-17.8-11.5,51.54,51.54,0,0,1-11.4-18,65.82,65.82,0,0,1-4-23.6,68.74,68.74,0,0,1,4.1-23.7m27.2,36.5a34.71,34.71,0,0,0,4.3,11.2,22.7,22.7,0,0,0,8.1,7.9,24.48,24.48,0,0,0,12.7,2.9,26.12,26.12,0,0,0,12.8-2.9,22.2,22.2,0,0,0,8.2-7.9,31.81,31.81,0,0,0,4.3-11.2,61.1,61.1,0,0,0,1.3-12.8,62.74,62.74,0,0,0-1.3-12.9,31.81,31.81,0,0,0-4.3-11.2,23.82,23.82,0,0,0-8.2-7.9,25.79,25.79,0,0,0-12.8-3.1,23.71,23.71,0,0,0-12.7,3.1,24.48,24.48,0,0,0-8.1,7.9,31.81,31.81,0,0,0-4.3,11.2,61.37,61.37,0,0,0-1.3,12.9,60.43,60.43,0,0,0,1.3,12.8" transform="translate(-1.14 -0.5)" style="fill: #fac800"/>
<path d="M320.53,65.1a20.57,20.57,0,0,0-12,3.3,26.45,26.45,0,0,0-7.9,8.4,35.46,35.46,0,0,0-4.3,11.5,65.27,65.27,0,0,0-1.3,12.4,53.8,53.8,0,0,0,1.3,12,40.1,40.1,0,0,0,4.1,11.1,24.56,24.56,0,0,0,7.6,8.1,21.19,21.19,0,0,0,11.8,3.2c7.2,0,12.7-2,16.6-6a28.73,28.73,0,0,0,7.3-16.1h29c-2,14.5-7.6,25.5-16.9,33.1s-21.2,11.4-35.6,11.4a59.53,59.53,0,0,1-22.5-4.2,50.81,50.81,0,0,1-17.4-11.5,51.79,51.79,0,0,1-11.2-17.6,61.58,61.58,0,0,1-4-22.4,72.21,72.21,0,0,1,3.7-23.5,53.89,53.89,0,0,1,10.9-18.8,48.82,48.82,0,0,1,17.5-12.3,57.9,57.9,0,0,1,23.6-4.4,69.64,69.64,0,0,1,18.7,2.5,50.38,50.38,0,0,1,16,7.7,39.67,39.67,0,0,1,16.6,31h-29.3c-2.1-12.7-9.5-19-22.3-18.9" transform="translate(-1.14 -0.5)" style="fill: #fac800"/>
<rect x="386.78" y="44.39" width="29.9" height="109" style="fill: #fac800"/>
<rect x="386.48" y="3.5" width="29.9" height="24.39" style="fill: #fac800"/>
<path d="M508.33,111.74a49.13,49.13,0,0,1-.5,6.7,24,24,0,0,1-2.8,8.3,20.12,20.12,0,0,1-7.1,7.1c-3.2,2-7.8,3-13.7,3a39.35,39.35,0,0,1-6.9-.6,17.52,17.52,0,0,1-5.9-2.2,10.38,10.38,0,0,1-4-4.3,16.38,16.38,0,0,1,0-13.7,13,13,0,0,1,3.9-4.5,17.82,17.82,0,0,1,5.7-2.8q3.3-1,6.6-1.8c2.4-.4,4.8-.8,7.1-1.1s4.7-.6,6.9-1a42.07,42.07,0,0,0,6.1-1.6,12.08,12.08,0,0,0,4.7-2.6ZM469,78.54c.6-5.9,2.5-10.1,5.9-12.7s8-3.8,14-3.8a63,63,0,0,1,7.5.5,16.4,16.4,0,0,1,6.1,2.1,11.81,11.81,0,0,1,4.2,4.4,15.71,15.71,0,0,1,1.6,7.7,8.25,8.25,0,0,1-2.7,7.1,20.59,20.59,0,0,1-8.1,3.7,75.83,75.83,0,0,1-11.6,1.9c-4.3.4-8.8,1-13.3,1.7a120.86,120.86,0,0,0-13.3,2.8,39.23,39.23,0,0,0-11.8,5.3,27.7,27.7,0,0,0-8.4,9.6,32.25,32.25,0,0,0-3.3,15.3,34.11,34.11,0,0,0,2.8,14.5,27,27,0,0,0,7.9,10.1,33.43,33.43,0,0,0,11.9,6,54.46,54.46,0,0,0,14.5,1.9,66.48,66.48,0,0,0,19.8-3,39.48,39.48,0,0,0,16.9-10.3,45.11,45.11,0,0,0,.7,5.3,33.42,33.42,0,0,0,1.4,5.2h30.4a25.69,25.69,0,0,1-3-10.1,112.67,112.67,0,0,1-.8-14.2V73a26.57,26.57,0,0,0-4.4-16,29.58,29.58,0,0,0-11.5-9.2,51.51,51.51,0,0,0-15.4-4.5,116.21,116.21,0,0,0-16.7-1.2,90.08,90.08,0,0,0-18,1.8,51.32,51.32,0,0,0-16.1,6,36.1,36.1,0,0,0-11.8,11.2,34.16,34.16,0,0,0-5.3,17.5Z" transform="translate(-1.14 -0.5)" style="fill: #fac800"/>
</g>
<g id="Bar-Falling">
<rect x="555.29" y="3.59" width="33.1" height="150.6" style="fill: #F11344" >
<animateTransform
attributeName="transform"
type="skewX"
from="0"
to="-20"
begin="0.5s"
dur="0.2s"
repeatCount="1"
fill="freeze"/>
<animateTransform
attributeName="transform"
type="translate"
from="0"
to="20"
begin="0.5s"
dur="0.2s"
repeatCount="1"
fill="freeze"
additive="sum"/>
</rect>
</g>
<g id="Placeholder-For-Where-Bar-Should-Be-Positioned-After-Animation">
<polygon points="645.83 3.59 588.13 154.19 555.63 154.19 613.33 3.59 645.83 3.59" style="fill: #00ff00">
</polygon>
</g>
<g id="Bar-1">
<rect x="666.29" y="3.59" width="33.1" height="150.6" style="fill: #fac800">
<animate
attributeType="CSS"
attributeName="opacity"
begin="0.2s"
from="0"
to="1"
dur="1s"/>
<animate
attributeType="CSS"
attributeName="opacity"
from="0"
to="0"
dur="0.2s"/>
</rect>
</g>
<g id="Bar-2">
<rect x="722.44" y="4.09" width="33.1" height="150.6" transform="translate(-1.37 1.61) rotate(-0.16)" style="fill: #fac800">
<animate
attributeType="CSS"
attributeName="opacity"
begin="0.3s"
from="0"
to="1"
dur="1s"/>
<animate
attributeType="CSS"
attributeName="opacity"
from="0"
to="0"
dur="0.3s"/>
</rect>
</g>
<g id="Income">
<animateTransform
attributeName="transform"
type="translate"
additive="sum"
from="-120"
to="0"
begin="0s"
dur="0.3s"
repeatCount="1"
fill="freeze"
/>
<rect id="I" x="777.18" y="3.59" width="33.1" height="150.6" style="fill: #fac800">
</rect>
<path id="N" d="M862.43,45.82V61h.6a34,34,0,0,1,14.8-13.8,42.53,42.53,0,0,1,18.5-4.3,51.05,51.05,0,0,1,19.7,3.3,29.52,29.52,0,0,1,12.2,9,35.46,35.46,0,0,1,6.2,14.2,95.87,95.87,0,0,1,1.8,18.5v67h-30V93.22q0-13.5-4.2-20.1c-2.8-4.4-7.8-6.7-15-6.7-8.1,0-14.1,2.4-17.8,7.3s-5.5,12.8-5.5,23.9v57.2h-29.9v-109Z" transform="translate(-1.14 -0.5)" style="fill: #fac800">
</path>
<path id="C" d="M1008.48,65.1a21.34,21.34,0,0,0-12,3.3,25.09,25.09,0,0,0-7.8,8.4,35.79,35.79,0,0,0-4.3,11.4,65.27,65.27,0,0,0-1.3,12.4,53.8,53.8,0,0,0,1.3,12,40.1,40.1,0,0,0,4.1,11.1,24.89,24.89,0,0,0,7.6,8.2,21.41,21.41,0,0,0,11.8,3.2c7.1,0,12.6-2,16.6-6a28.73,28.73,0,0,0,7.3-16.1h28.9c-2,14.5-7.6,25.5-16.9,33.1s-21.1,11.4-35.6,11.3a57.17,57.17,0,0,1-22.4-4.2,50.81,50.81,0,0,1-17.4-11.5,51.79,51.79,0,0,1-11.2-17.6,61.58,61.58,0,0,1-4-22.4,72.21,72.21,0,0,1,3.7-23.5,53.89,53.89,0,0,1,10.9-18.8,48.82,48.82,0,0,1,17.5-12.3,57.9,57.9,0,0,1,23.6-4.4,69.64,69.64,0,0,1,18.7,2.5,50.38,50.38,0,0,1,16,7.7,39.7,39.7,0,0,1,16.6,31.1h-29.3c-2.1-12.7-9.5-18.9-22.4-18.9" transform="translate(-1.14 -0.5)" style="fill: #fac800">
</path>
<path id="O" d="M1075.53,76.75a49.66,49.66,0,0,1,29.1-29.7,68,68,0,0,1,46.5,0,49.82,49.82,0,0,1,29.2,29.7,66,66,0,0,1,4,23.7,65.09,65.09,0,0,1-4,23.6,51.54,51.54,0,0,1-11.4,18,48.77,48.77,0,0,1-17.8,11.5,64.22,64.22,0,0,1-23.3,4,65.49,65.49,0,0,1-23.2-4,49.62,49.62,0,0,1-17.8-11.5,51.54,51.54,0,0,1-11.4-18,65.82,65.82,0,0,1-4-23.6,68.74,68.74,0,0,1,4.1-23.7m27.2,36.5a34.71,34.71,0,0,0,4.3,11.2,22.7,22.7,0,0,0,8.1,7.9,24.48,24.48,0,0,0,12.7,2.9,26.12,26.12,0,0,0,12.8-2.9,22.2,22.2,0,0,0,8.2-7.9,31.81,31.81,0,0,0,4.3-11.2,61.1,61.1,0,0,0,1.3-12.8,62.74,62.74,0,0,0-1.3-12.9,31.81,31.81,0,0,0-4.3-11.2,23.82,23.82,0,0,0-8.2-7.9,25.79,25.79,0,0,0-12.8-3.1,23.71,23.71,0,0,0-12.7,3.1,24.48,24.48,0,0,0-8.1,7.9,31.81,31.81,0,0,0-4.3,11.2,61.37,61.37,0,0,0-1.3,12.9,60.43,60.43,0,0,0,1.3,12.8" transform="translate(-1.14 -0.5)" style="fill: #fac800">
</path>
<path id="M" d="M1229.53,45.34v14.8h.4a42.4,42.4,0,0,1,14.2-13.1,37.49,37.49,0,0,1,19.1-4.6,42.79,42.79,0,0,1,19,4.1,26.94,26.94,0,0,1,13,14.2,47,47,0,0,1,13.2-12.7,36,36,0,0,1,19.7-5.5,61.65,61.65,0,0,1,16,2.1,32.63,32.63,0,0,1,12.6,6.7,30.31,30.31,0,0,1,8.2,12.1,50.43,50.43,0,0,1,3,18v72.9H1338V92.64c0-3.6-.2-7.1-.4-10.3a22.39,22.39,0,0,0-2.3-8.4,14,14,0,0,0-5.6-5.7,20.34,20.34,0,0,0-10-2.2,19,19,0,0,0-10.2,2.4,17,17,0,0,0-6.1,6.4,25.86,25.86,0,0,0-2.9,8.9,67.25,67.25,0,0,0-.7,10v60.7h-29.9V93.24c0-3.2,0-6.4-.2-9.6a26.56,26.56,0,0,0-1.8-8.8,13.84,13.84,0,0,0-5.3-6.4,20.26,20.26,0,0,0-10.8-2.5,21.25,21.25,0,0,0-5.6,1,16.77,16.77,0,0,0-6.7,3.6,22.1,22.1,0,0,0-5.6,7.6,30.3,30.3,0,0,0-2.3,13v63.4h-29.9v-109Z" transform="translate(-1.14 -0.5)" style="fill: #fac800">
</path>
<path id="E" d="M1422.58,128c4.5,4.4,11,6.5,19.4,6.5a27.06,27.06,0,0,0,15.6-4.5c4.3-3,7-6.2,8-9.6H1492c-4.2,13-10.7,22.4-19.4,28s-19.2,8.5-31.6,8.4a62.37,62.37,0,0,1-23.3-4.2,49.43,49.43,0,0,1-17.5-11.7,53.12,53.12,0,0,1-10.9-18.1,65.4,65.4,0,0,1-3.9-23.2,63.24,63.24,0,0,1,3.9-22.8,52.6,52.6,0,0,1,29-30.4A57,57,0,0,1,1441,42a51.87,51.87,0,0,1,24.2,5.3,48.45,48.45,0,0,1,17,14.5,58.48,58.48,0,0,1,9.6,20.7,76.29,76.29,0,0,1,2.1,24.3h-78.7c.5,9.8,2.9,16.9,7.4,21.2m33.9-57.3c-3.6-3.9-9-5.9-16.3-5.9a27,27,0,0,0-11.9,2.4,23.25,23.25,0,0,0-7.6,6,21.33,21.33,0,0,0-4,7.6,34.33,34.33,0,0,0-1.4,7.1h48.6c-1.4-7.6-3.9-13.3-7.4-17.2" transform="translate(-1.14 -0.5)" style="fill: #fac800">
</path>
</g>
</svg>

Cannot display more than one svg on page

Not sure if I'm misunderstanding something fundamental about svgs, but when I try and add more than one svg on the page only the first one renders. The below svgs were exported from Sketch (I'm working on removing the fluff). The svg is in the dom (I can see it in the chrome inspector) but nothing renders on screen for the second svg. If I swap the order then again only the first one displays.
<svg width="18px" height="19px" viewBox="0 0 18 19" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 3.8.3 (29802) - http://www.bohemiancoding.com/sketch -->
<title>LinkedIn</title>
<desc>Created with Sketch.</desc>
<defs>
<path d="M404,1613.54534 L404,1620.20005 L400.142017,1620.20005 L400.142017,1613.99103 C400.142017,1612.43128 399.584002,1611.3668 398.18754,1611.3668 C397.121518,1611.3668 396.487128,1612.08418 396.208036,1612.77812 C396.106259,1613.0262 396.080062,1613.3715 396.080062,1613.71876 L396.080062,1620.20005 L392.220782,1620.20005 C392.220782,1620.20005 392.272758,1609.68401 392.220782,1608.59447 L396.079685,1608.59447 L396.079685,1610.23951 C396.07186,1610.25182 396.06169,1610.26508 396.054325,1610.27701 L396.079685,1610.27701 L396.079685,1610.23951 C396.592378,1609.44986 397.507994,1608.32182 399.557427,1608.32182 C402.096537,1608.32178 404,1609.98055 404,1613.54534 L404,1613.54534 Z M388.18381,1603 C386.863556,1603 386,1603.86598 386,1605.00478 C386,1606.11876 386.838572,1607.01102 388.132587,1607.01102 L388.158366,1607.01102 C389.504191,1607.01102 390.341172,1606.11893 390.341172,1605.00478 C390.315812,1603.86598 389.504191,1603 388.18381,1603 L388.18381,1603 Z M386.229207,1620.20005 L390.087023,1620.20005 L390.087023,1608.59447 L386.229207,1608.59447 L386.229207,1620.20005 L386.229207,1620.20005 Z" id="path-1"></path>
<filter x="-50%" y="-50%" width="200%" height="200%" filterUnits="objectBoundingBox" id="filter-2">
<feOffset dx="0" dy="1" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
<feColorMatrix values="0 0 0 0 0 0 0 0 0 0.239215686 0 0 0 0 0.490196078 0 0 0 1 0" type="matrix" in="shadowOffsetOuter1"></feColorMatrix>
</filter>
</defs>
<g id="1.-Homepage" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="1440/1a.-Homepage" transform="translate(-386.000000, -1603.000000)">
<g id="LinkedIn">
<use fill="black" fill-opacity="1" filter="url(#filter-2)" xlink:href="#path-1"></use>
<use fill="#FFFFFF" fill-rule="evenodd" xlink:href="#path-1"></use>
<use fill="black" fill-opacity="1" xlink:href="#path-1"></use>
</g>
</g>
</g>
</svg>
<svg width="10px" height="19px" viewBox="0 0 10 19" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 3.8.3 (29802) - http://www.bohemiancoding.com/sketch -->
<title>Shape</title>
<desc>Created with Sketch.</desc>
<defs>
<path d="M323.219245,1604.00369 L320.921439,1604 C318.339932,1604 316.671649,1605.7116 316.671649,1608.36076 L316.671649,1610.37137 L314.361308,1610.37137 C314.161667,1610.37137 314,1610.53322 314,1610.73286 L314,1613.64599 C314,1613.84563 314.161851,1614.0073 314.361308,1614.0073 L316.671649,1614.0073 L316.671649,1621.35807 C316.671649,1621.55771 316.833316,1621.71938 317.032957,1621.71938 L320.047295,1621.71938 C320.246936,1621.71938 320.408603,1621.55753 320.408603,1621.35807 L320.408603,1614.0073 L323.109931,1614.0073 C323.309572,1614.0073 323.471239,1613.84563 323.471239,1613.64599 L323.472345,1610.73286 C323.472345,1610.637 323.434186,1610.5452 323.366533,1610.47736 C323.29888,1610.40952 323.20671,1610.37137 323.110853,1610.37137 L320.408603,1610.37137 L320.408603,1608.66695 C320.408603,1607.84774 320.60382,1607.43187 321.670968,1607.43187 L323.218877,1607.43132 C323.418333,1607.43132 323.58,1607.26947 323.58,1607.07001 L323.58,1604.36499 C323.58,1604.16572 323.418518,1604.00406 323.219245,1604.00369 L323.219245,1604.00369 Z" id="path-1"></path>
<filter x="-50%" y="-50%" width="200%" height="200%" filterUnits="objectBoundingBox" id="filter-2">
<feOffset dx="0" dy="1" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
<feColorMatrix values="0 0 0 0 0 0 0 0 0 0.239215686 0 0 0 0 0.490196078 0 0 0 1 0" type="matrix" in="shadowOffsetOuter1"></feColorMatrix>
</filter>
</defs>
<g id="1.-Homepage" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="1440/1a.-Homepage" transform="translate(-314.000000, -1604.000000)">
<g id="Shape">
<use fill="black" fill-opacity="1" filter="url(#filter-2)" xlink:href="#path-1"></use>
<use fill="#FFFFFF" fill-rule="evenodd" xlink:href="#path-1"></use>
<use fill="black" fill-opacity="1" xlink:href="#path-1"></use>
</g>
</g>
</g>
</svg>

svg mouseover doesn't work in zurb foundation nav topbar

I'm working with zurb foudation and have a roll over on an svg that is within the header. If the svg is under
then the roll over effect on the svg doesn't work. but if I remove either the section tag or the data-topbar attribute then it works fine. you can see an example of all three variations here:
http://firefields.com/foundation-5.5.0/icon-issue.html
and this is the svg code
<svg version="1.1" id="headTest" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 42 42" enable-background="new 0 0 42 42" xml:space="preserve" >
<defs>
<mask id="Mask">
<path fill="#ffffff" d="M25.4,12.7L15.3,28.6c0.2,0.2,0.4,0.4,0.6,0.5c0.4,0.2,0.7,0.4,1.2,0.5L27,13.9c-0.3-0.4-0.6-0.7-0.8-0.8
C25.9,12.9,25.7,12.8,25.4,12.7z"/>
<path fill="#ffffff" d="M14.3,25.9c0.3-0.2,0.6-0.3,0.8-0.4l1.5-2.3c-1,0.1-2.1,0.4-3.3,0.9c-2.1,1.1-4.2,3-5.8,5.4
c-0.5,0.7-0.8,1.4-1.1,2.1c0.5,0.7,0.9,1.2,1.5,1.8c0.4-0.9,0.8-1.9,1.4-2.8C10.6,28.5,12.4,26.8,14.3,25.9z"/>
<path fill="#ffffff" d="M20.3,37.6c1.6-2.5,2.5-5.3,2.5-7.8c0-1.7-0.4-3.2-1-4.3l-1.2,2.1c0.2,0.7,0.4,1.4,0.3,2.2
c0,2.1-0.8,4.6-2.2,6.7c-0.5,0.7-1,1.4-1.5,2c-2.8-0.7-5.3-1.9-7.6-3.6C9.2,35.6,9.1,36.3,9,37c2.6,2,5.6,3.2,8.8,3.7
c0.6-0.6,1.1-1.1,1.6-1.8l0,0c0,0,0,0,0.1,0C19.7,38.5,20,38.1,20.3,37.6z"/>
<path fill="#ffffff" d="M38.7,12c-0.8-1.7-2-3.3-3.3-4.6c-0.1,0.7-0.4,1.5-0.7,2.2c0,0,0,0.1,0.1,0.1l-0.1-0.1c-0.4,1-0.8,2-1.5,3
c-1.4,2.1-3.2,3.8-5,4.8c-0.7,0.3-1.3,0.6-1.9,0.7l-1.2,2.1c1.3,0.1,2.7-0.3,4.1-0.9c2.1-1.1,4.2-3.1,5.8-5.5
c0.5-0.7,0.8-1.4,1.1-2.1c0.3,0.5,0.6,0.8,0.7,1.3c4.5,8.9,0.9,19.7-7.9,24.2c-2.4,1.2-4.9,1.9-7.5,1.9c-0.5,0.7-0.9,1.4-1.5,2
c3.3,0.2,6.7-0.6,9.9-2.1C39.9,33.9,43.8,21.8,38.7,12z"/>
<path fill="#ffffff" d="M12.9,5c2.9-1.5,6-2.1,9.1-1.9c0.6-0.7,1.1-1.3,1.7-1.9c-3.8-0.5-7.8,0.1-11.6,2c-9.9,4.9-13.9,17-8.9,26.8
c1,2.1,2.4,3.9,4.1,5.5c0.1-0.7,0.4-1.5,0.7-2.1c-1.1-1.2-2.1-2.6-3-4.2C0.5,20.3,4,9.5,12.9,5z"/>
<path fill="#ffffff" d="M22.4,5.6c-1.6,2.5-2.5,5.3-2.5,7.8c0,1.4,0.2,2.6,0.7,3.5l1.4-2.2c-0.1-0.4-0.1-0.8-0.1-1.3
c0-2.1,0.8-4.6,2.2-6.7c0.7-1.1,1.4-2.1,2.1-2.8c2.6,0.8,5,2.1,7.1,4.1c0.3-0.8,0.5-1.6,0.5-2.2c-2.3-2-5-3.3-7.9-4
c-0.7,0.5-1.2,1-1.8,1.7c0.3,0.1,0.2,0-0.1,0C23.4,4,22.9,4.8,22.4,5.6z"/>
</mask>
</defs>
<g mask="url(#Mask)">
<circle fill="#222222" class="icon-background-circle" cx="21" cy="21" r="21"/>
<circle fill="#73e8eb" class="icon-foreground-circle" cx="21" cy="21" r="0">
<animate attributeType="xml" attributeName="r" begin="hoverZone.mouseover" to="21" dur="0.15s" fill="freeze" />
<animate attributeType="xml" attributeName="r" begin="hoverZone.mouseout" to="0" dur="0.15s" fill="freeze" />
</circle>
</g>
<rect id="hoverZone" x="0" y="0" width="42" height="42" fill-opacity="0" />
</svg>
hope you can help.

It has nothing to do with the <section> element.
When an an SVG is embedded via the <img> element, animations are allowed, but interaction (such as mouse events) are not. This is for privacy reasons.
Use <object> or <embed> instead.

SVG animateTransform rotate and scale the same object at the same time?

I'd like to animate scaling and rotating an object at the same time.. so far my attempts failed. I can only chain the animation (rotate, then scale) but not rotate and scale together.
What did I miss?
I have tried to remove "additive="sum" but that just overwrites and ignored the scale animation...
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<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"
width="200px" height="200px" viewBox="0 0 200 200" enable-background="new 0 0 200 200" xml:space="preserve">
<rect x="29.2" y="33.6" width="136.7" height="136.7">
<animateTransform attributeName="transform" type="scale"
from="0" to="1" dur="1s" additive="sum" accumulate="sum"/>
<animateTransform attributeName="transform" type="rotate"
from="0 100 100" to="100 100 100" dur="5s" repeatCount="indefinite" accumulate="sum" />
<animate attributeType="CSS" attributeName="opacity"
from="1" to="0" dur="4s" fill="freeze" />
</rect>
</svg>
I appreciate all the help!

You just need additive="sum" on both the animate elements. It works fine for me on Firefox with that one change.
<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"
width="200px" height="200px" viewBox="0 0 200 200" enable-background="new 0 0 200 200" xml:space="preserve">
<rect x="29.2" y="33.6" width="136.7" height="136.7">
<animateTransform attributeName="transform" type="scale"
from="0" to="1" dur="1s" additive="sum" accumulate="sum"/>
<animateTransform attributeName="transform" type="rotate"
from="0 100 100" to="100 100 100" dur="5s" repeatCount="indefinite" additive="sum" accumulate="sum" />
<animate attributeType="CSS" attributeName="opacity"
from="1" to="0" dur="4s" fill="freeze" />
</rect>
</svg>

XML SVG - persist the end state of an animation

After the end of an AnimateTransform action, the element snaps back to the original value.
This isn't exactly unexpected as it's in the SMIL documentation:
As with all animation elements, this only manipulates the presentation value, and when the animation completes, the effect is no longer applied
But it is unwanted. I'd like to find a way to persist the changes using XML animations
Here's an example in SVG
<svg width="200" height="200" viewBox="0 0 100 100"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<rect id="outline" stroke="black" fill="white"
width="100" height="100" >
<animateTransform id="one"
attributeType="XML"
attributeName="transform"
type="translate"
from="0" to="-7"
dur="1s" repeatCount="1" />
</rect>
</svg>
One idea I had was to call a set action with dur="indefinite" that was triggered by the end of the first animation with begin="one.end", but can't quite seem to get the syntax right. I haven't found any documentation that show how to call set for a transformed value.
<svg width="200" height="200" viewBox="0 0 100 100"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<rect id="outline" stroke="black" fill="white"
width="100" height="100" >
<animateTransform id="one"
attributeType="XML"
attributeName="transform"
type="translate"
from="0" to="-7"
dur="1s" repeatCount="1" />
<!-- Doesn't work -->
<set attributeType="XML"
attributeName="transform"
type="translate"
to="-7" begin="one.end" />
<!-- Does work (as POC) -->
<set attributeType="css"
attributeName="fill"
to="green" begin="one.end" />
</rect>
</svg>
This question on persisting the end state of the animation shows how to do this with css transforms by using -webkit-animation-fill-mode: forwards;, but that obviously won't have any affect on an svg animation

fill="freeze" will persist the state of an animation e.g.
<svg width="200" height="200" viewBox="0 0 100 100"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<rect id="outline" stroke="black" fill="white"
width="100" height="100" >
<animateTransform id="one"
attributeType="XML"
attributeName="transform"
type="translate"
from="0" to="-7"
dur="1s" repeatCount="1"
fill="freeze"/>
</rect>
</svg>

Develop Reference

node.js excel linux python-3.x azure haskell apache-spark rust .htaccess string

SVG animation not repeating properly - svg

Related

Animate SVG with animateTransform (translate + skew)

Cannot display more than one svg on page

svg mouseover doesn't work in zurb foundation nav topbar

SVG animateTransform rotate and scale the same object at the same time?

XML SVG - persist the end state of an animation

Categories

Resources