i have a svg animation which works very well, but i have a problem with one point.
There's a biker who rides from left to right. All the time ...
I want to have, that the biker rides from left to right, then from right to left and so on. Here is my pen:
<svg version="1.1" x="0" y="0"
viewBox="0 0 1325 139.1" style="enable-background:new 0 0 1325 139.1;" xml:space="preserve">
<path id="pfad" fill="none" stroke="#a2b91c" stroke-miterlimit="10" d="M636.2,91.9l25-3.8c54.7-9,111.6-19.2,173.1-29.4C1131.4,9.6,1312,81.5,1312,81.5l13,5.6l-13-5.6"/>
<g id="bike" fill="#a2b91c" transform="scale (-1, 1) translate(-800, -67)">
<path class="st2" d="M800.7,54c-2-1.4-4.8-1.4-6.8-0.2l-2-2c0-0.7,0.2-1.3,0.3-2l0.9-0.4c0.2-0.7,0.9-0.6,1.3-1
c0.1-0.2,0.1-0.4,0-0.6l-1,0.1l-0.1,0c0.3-1-0.2-1.8-0.5-2.7c-1.7-1.9-4.2-2.6-6.7-2.4c-1.8,0-2.9,1.3-4.4,1.9l-0.2-0.1
c0-0.4,0.4-0.4,0.6-0.7c0.1-0.5-0.3-0.7-0.4-1.1c-0.2-0.2-0.4-0.3-0.6-0.3c-1.4,0.1-2.5,0.7-3.4,1.5c-0.6,0.8-0.6,1.8-0.3,2.8
c0.3,0.2,0.6,0,0.8,0.2L778,47c0.1,0.2,0.3,0.5,0.6,0.7c0.1,0.1,0.1,0.6,0.3,0.4c0.3-0.2,0.3,0.2,0.6,0c0.1,0.4,0.6,0.3,0.7,0.7
c0.3,0.6,0.6-0.7,1.1-0.4c0.3,0.7,0.6,1.4,0.1,2.1c-0.8,0.4-1.8,0.4-2.7,0.5c-0.7,0-1.4,0.2-2.1-0.1c-0.4,0.3-0.7-0.3-1.2,0
c-0.2,0.2-0.2,0.4-0.1,0.7c0.1,0.4,0.6,0.6,0.5,1c-0.2,0.5,0.5,0.4,0.5,0.9c0.7,0.2,1.5-0.2,2,0.4c0,0,0,0.1-0.1,0.1
c-0.2,0-0.3,0.2-0.2,0.4c0,0.5-0.7,0.2-0.9,0.6c0.4,0.4,0.7,1.1,1.4,1.2c-0.1,0.4-0.7,0.2-1,0.3c-0.3-0.1-0.7-0.3-0.8-0.6
c-0.4-0.1-0.3,0.4-0.4,0.6c-0.2,0.1-0.6,0-0.6,0.3c0.3,0.6,1,0.9,1.5,1.3c-1.1,0.9-2.1,2.3-2.3,3.7c-0.2,1.9,0.3,4.2,1.8,5.4
c1.6,1.5,3.5,1.7,5.5,1.2c2.1-0.5,3.5-2.4,3.9-4.5c0.3-2.2-0.6-4.7-2.6-6c-0.4-0.4-1.2-0.3-1.4-1c0.1-0.2,0.1-0.4,0.3-0.4
c2.2,1.4,4.2,3,6.3,4.4c0,0.6-0.2,1.3,0,2c0.3,0.8,1.1,1.4,1.9,1.6c-0.1,0.2-0.4,0.3-0.5,0.6c0.2,0.2,0.4,0.2,0.7,0.1
c0.3,0,0.2,0.3,0.2,0.5l2.3-0.4c0.1-0.3-0.2-0.6-0.3-0.8c0-0.1,0.1-0.2,0.3-0.2l1.2,0.7c1.3,0.5,2.7,0.6,4.1,0.3
c2.2-0.6,4.2-2.7,4.5-5C803.7,57.9,802.9,55.4,800.7,54z M780.4,53.9c0.1,0,0.2,0,0.3,0.1l0,0.2l-0.3,0.1L780.4,53.9z M778.2,52.8
c0.4,0.1,0.9,0.4,1.4,0.5l0,0.3c-0.5,0.1-0.9-0.5-1.4-0.5C778.2,53.1,778.1,52.9,778.2,52.8z M779.6,54.3c-0.1,0.2-0.4,0.1-0.5,0.1
c-0.2-0.1-0.4-0.2-0.3-0.5L779.6,54.3z M778.5,55.7c-0.2-0.2,0-0.5,0-0.7c0.4,0,0.7,0.2,1.1,0.1c0.2,0.3-0.1,0.5-0.3,0.8
C779,56,778.7,55.9,778.5,55.7z M777,57.5c-0.3-0.3-0.2-0.3-0.2-0.5c0.3-0.2,0.6,0,1,0c0.9-0.1,2.1-0.3,2.5-1.2
c0.1-0.3,0-1,0.6-0.8c0.2,0.5,0.2,1,0.1,1.5c-0.1,0.1-0.3,0.1-0.3,0.2c0,0.2,0.3,0.2,0.4,0.3c-1.2-0.1-2.4,0.1-3.4,0.7
C777.5,57.8,777.2,57.7,777,57.5z M785.6,62c0.3,1.9-0.4,3.8-1.8,5c-1.4,1.1-3.7,1.4-5.2,0.7c-1.8-0.9-3-2.5-3.1-4.6
c-0.2-1.8,0.9-3.8,2.4-4.8c1-0.4,2.3-1,3.4-0.6c0.2,0.4-0.1,0.7,0,1.1c-0.2,1.2,0,2.5-0.8,3.5c-0.2,0-0.3,0.2-0.4,0.4
c-0.1,0.3,0.2,0.6,0.5,0.7c0.3,0.1,0.6-0.2,0.7-0.5c0.1-0.2-0.2-0.3-0.2-0.5c1-1.4,0.8-3,1.2-4.4C784,58.7,785.2,60.2,785.6,62z
M781.5,54.5c0.1,0.6,0.2,1.3-0.1,1.9c-0.2-0.5-0.1-1.1-0.2-1.6c0.2,0,0.2-0.3,0.3-0.5c0.1-0.2-0.2-0.4-0.1-0.6
c0.1,0.1,0.2-0.1,0.3,0.1C781.8,54,781.6,54.3,781.5,54.5z M791.1,62.8c0.1,0.1,0.2,0.2,0.2,0.4l-0.2,0L791.1,62.8z M788,50.5
l-0.1,0.8c-0.4-0.2-0.8-0.4-1.2-0.4C787.2,50.8,787.5,50.6,788,50.5z M790.3,62.1c-0.1,0.1-0.3,0.1-0.5,0.2
c-0.1-0.1-0.2-0.4-0.1-0.5l0-0.1C790,61.8,790.2,61.9,790.3,62.1z M784.3,48.7c0.3-0.1,0.8-0.2,1.1-0.2c-0.4,0.5-0.7,1-1.2,1.3
C784.3,49.4,784,49,784.3,48.7z M782.5,54.3c-0.3-0.2,0.1-0.6-0.1-0.9c0.6-0.3,0.7-1,0.8-1.6c0.2-0.2,0.8-0.1,0.9-0.5l0.1,0
c0.8,0.8,1.8,1.4,2.6,2.1c-1.5,0.5-2.9,1.1-4.3,1.6C782.5,54.8,782.4,54.5,782.5,54.3z M784.4,57.1c0.2-0.2-0.1-0.5,0-0.7
c0-0.3,0.3-0.7,0.1-0.9c-0.3,0.2-0.2,0.6-0.4,0.9c-0.2-0.3,0.1-0.9-0.4-0.9c-0.2,0.4,0.1,0.8,0,1.2c-0.3-0.2-0.6-0.2-0.8-0.5
c-0.1-0.3,0-0.5,0.3-0.6c1.3-0.5,2.7-1,4.1-1.5l0.7,0.5c-0.4,1.1,0.4,2,1,2.7c-0.4,0.4-0.9,0.6-1.2,1c0,0.2,0.2,0.3,0.3,0.4
c0.3-0.1,0.3,0.3,0.4,0.5c0.4-0.1,0.7,0.1,0.8,0.4c0,0.3,0.6,0.6,0.1,0.8l-0.3,0C787.5,59.3,785.8,58.2,784.4,57.1z M789.4,61.4
c0.2,0.2,0,0.6,0.1,0.9c0,0.1-0.1,0.1-0.2,0.1C789.2,62.1,789.2,61.7,789.4,61.4z M790.4,63.8c-0.4,0.1-0.7-0.4-0.9-0.7
c0.4-0.2,0.6,0.3,0.9,0.4C790.5,63.7,790.4,63.7,790.4,63.8z M790.5,63.1c-0.1,0.1-0.3,0-0.4-0.1c-0.1-0.2,0.1-0.2,0.2-0.3l0.2,0
L790.5,63.1z M790.3,59.9c-0.2-0.2-0.6-0.5-0.6-0.8c0.3-0.1,0.4,0.1,0.5,0.3C790.3,59.5,790.4,59.7,790.3,59.9z M791.5,63.8
c-0.1,0.1-0.2,0-0.3,0.1c-0.1,0-0.1-0.2-0.1-0.2C791.3,63.4,791.6,63.6,791.5,63.8z M790.8,54.9c-0.2-0.3-0.7-0.4-0.5-0.8
c0.2-0.5,0.4-1,0.7-1.4C791.1,53.5,790.8,54.2,790.8,54.9z M791.6,55.5l0.2-2.2c0.4,0.4,0.6,1,0.9,1.4c-0.1,0.5-0.5,0.7-0.8,1.1
C791.8,55.7,791.6,55.7,791.6,55.5z M792.1,57.4c0.3-0.2,0.2-0.4,0.2-0.7c0.3-0.7,0.8-1.3,1.4-1.7c1.1,1.3,2.3,2.6,3.3,4
c-0.3,0.3-0.6-0.3-0.9-0.1c0.1,0.2,0.4,0.2,0.5,0.4l-3.7,1.5C792.5,59.7,792.7,58.4,792.1,57.4z M802.6,60.6
c-0.4,2.2-2.3,3.8-4.4,4.2c-1.4,0.3-2.7-0.2-4-0.8c0-0.3,0.5-0.5,0.2-0.9c-0.4-0.7-1.2-1-1.3-1.9c1.1-0.5,2.2-1.1,3.4-1.5
c0.1,0.2,0.4,0.4,0.6,0.5c0.2,0,0.5-0.1,0.6-0.3c0.1-0.3-0.2-0.7-0.1-1l-0.2-0.4c-1.1-1.4-2.3-2.7-3.3-4.1c2.1-1.5,5.1-1.3,7,0.6
C802.5,56.5,803.1,58.8,802.6,60.6z"/>
</g>
<animateMotion
xlink:href="#bike"
dur="6s"
begin="0s"
repeatCount="indefinite"
rotate="auto"
direction="alternate"
>
<mpath xlink:href="#pfad" />
</animateMotion>
</svg>
THX
addition to #KingCodeFish answer you can rotate your bike by rotate="auto-reverse"
<svg version="1.1" x="0" y="0"
viewBox="0 0 1325 139.1" style="enable-background:new 0 0 1325 139.1;" xml:space="preserve">
<path id="pfad" fill="none" stroke="#a2b91c" stroke-miterlimit="10" d="M636.2,91.9l25-3.8c54.7-9,111.6-19.2,173.1-29.4C1131.4,9.6,1312,81.5,1312,81.5l13,5.6l-13-5.6"/>
<g id="bike" fill="#a2b91c" transform="scale (-1, 1) translate(-800, -67)">
<path class="st2" d="M800.7,54c-2-1.4-4.8-1.4-6.8-0.2l-2-2c0-0.7,0.2-1.3,0.3-2l0.9-0.4c0.2-0.7,0.9-0.6,1.3-1
c0.1-0.2,0.1-0.4,0-0.6l-1,0.1l-0.1,0c0.3-1-0.2-1.8-0.5-2.7c-1.7-1.9-4.2-2.6-6.7-2.4c-1.8,0-2.9,1.3-4.4,1.9l-0.2-0.1
c0-0.4,0.4-0.4,0.6-0.7c0.1-0.5-0.3-0.7-0.4-1.1c-0.2-0.2-0.4-0.3-0.6-0.3c-1.4,0.1-2.5,0.7-3.4,1.5c-0.6,0.8-0.6,1.8-0.3,2.8
c0.3,0.2,0.6,0,0.8,0.2L778,47c0.1,0.2,0.3,0.5,0.6,0.7c0.1,0.1,0.1,0.6,0.3,0.4c0.3-0.2,0.3,0.2,0.6,0c0.1,0.4,0.6,0.3,0.7,0.7
c0.3,0.6,0.6-0.7,1.1-0.4c0.3,0.7,0.6,1.4,0.1,2.1c-0.8,0.4-1.8,0.4-2.7,0.5c-0.7,0-1.4,0.2-2.1-0.1c-0.4,0.3-0.7-0.3-1.2,0
c-0.2,0.2-0.2,0.4-0.1,0.7c0.1,0.4,0.6,0.6,0.5,1c-0.2,0.5,0.5,0.4,0.5,0.9c0.7,0.2,1.5-0.2,2,0.4c0,0,0,0.1-0.1,0.1
c-0.2,0-0.3,0.2-0.2,0.4c0,0.5-0.7,0.2-0.9,0.6c0.4,0.4,0.7,1.1,1.4,1.2c-0.1,0.4-0.7,0.2-1,0.3c-0.3-0.1-0.7-0.3-0.8-0.6
c-0.4-0.1-0.3,0.4-0.4,0.6c-0.2,0.1-0.6,0-0.6,0.3c0.3,0.6,1,0.9,1.5,1.3c-1.1,0.9-2.1,2.3-2.3,3.7c-0.2,1.9,0.3,4.2,1.8,5.4
c1.6,1.5,3.5,1.7,5.5,1.2c2.1-0.5,3.5-2.4,3.9-4.5c0.3-2.2-0.6-4.7-2.6-6c-0.4-0.4-1.2-0.3-1.4-1c0.1-0.2,0.1-0.4,0.3-0.4
c2.2,1.4,4.2,3,6.3,4.4c0,0.6-0.2,1.3,0,2c0.3,0.8,1.1,1.4,1.9,1.6c-0.1,0.2-0.4,0.3-0.5,0.6c0.2,0.2,0.4,0.2,0.7,0.1
c0.3,0,0.2,0.3,0.2,0.5l2.3-0.4c0.1-0.3-0.2-0.6-0.3-0.8c0-0.1,0.1-0.2,0.3-0.2l1.2,0.7c1.3,0.5,2.7,0.6,4.1,0.3
c2.2-0.6,4.2-2.7,4.5-5C803.7,57.9,802.9,55.4,800.7,54z M780.4,53.9c0.1,0,0.2,0,0.3,0.1l0,0.2l-0.3,0.1L780.4,53.9z M778.2,52.8
c0.4,0.1,0.9,0.4,1.4,0.5l0,0.3c-0.5,0.1-0.9-0.5-1.4-0.5C778.2,53.1,778.1,52.9,778.2,52.8z M779.6,54.3c-0.1,0.2-0.4,0.1-0.5,0.1
c-0.2-0.1-0.4-0.2-0.3-0.5L779.6,54.3z M778.5,55.7c-0.2-0.2,0-0.5,0-0.7c0.4,0,0.7,0.2,1.1,0.1c0.2,0.3-0.1,0.5-0.3,0.8
C779,56,778.7,55.9,778.5,55.7z M777,57.5c-0.3-0.3-0.2-0.3-0.2-0.5c0.3-0.2,0.6,0,1,0c0.9-0.1,2.1-0.3,2.5-1.2
c0.1-0.3,0-1,0.6-0.8c0.2,0.5,0.2,1,0.1,1.5c-0.1,0.1-0.3,0.1-0.3,0.2c0,0.2,0.3,0.2,0.4,0.3c-1.2-0.1-2.4,0.1-3.4,0.7
C777.5,57.8,777.2,57.7,777,57.5z M785.6,62c0.3,1.9-0.4,3.8-1.8,5c-1.4,1.1-3.7,1.4-5.2,0.7c-1.8-0.9-3-2.5-3.1-4.6
c-0.2-1.8,0.9-3.8,2.4-4.8c1-0.4,2.3-1,3.4-0.6c0.2,0.4-0.1,0.7,0,1.1c-0.2,1.2,0,2.5-0.8,3.5c-0.2,0-0.3,0.2-0.4,0.4
c-0.1,0.3,0.2,0.6,0.5,0.7c0.3,0.1,0.6-0.2,0.7-0.5c0.1-0.2-0.2-0.3-0.2-0.5c1-1.4,0.8-3,1.2-4.4C784,58.7,785.2,60.2,785.6,62z
M781.5,54.5c0.1,0.6,0.2,1.3-0.1,1.9c-0.2-0.5-0.1-1.1-0.2-1.6c0.2,0,0.2-0.3,0.3-0.5c0.1-0.2-0.2-0.4-0.1-0.6
c0.1,0.1,0.2-0.1,0.3,0.1C781.8,54,781.6,54.3,781.5,54.5z M791.1,62.8c0.1,0.1,0.2,0.2,0.2,0.4l-0.2,0L791.1,62.8z M788,50.5
l-0.1,0.8c-0.4-0.2-0.8-0.4-1.2-0.4C787.2,50.8,787.5,50.6,788,50.5z M790.3,62.1c-0.1,0.1-0.3,0.1-0.5,0.2
c-0.1-0.1-0.2-0.4-0.1-0.5l0-0.1C790,61.8,790.2,61.9,790.3,62.1z M784.3,48.7c0.3-0.1,0.8-0.2,1.1-0.2c-0.4,0.5-0.7,1-1.2,1.3
C784.3,49.4,784,49,784.3,48.7z M782.5,54.3c-0.3-0.2,0.1-0.6-0.1-0.9c0.6-0.3,0.7-1,0.8-1.6c0.2-0.2,0.8-0.1,0.9-0.5l0.1,0
c0.8,0.8,1.8,1.4,2.6,2.1c-1.5,0.5-2.9,1.1-4.3,1.6C782.5,54.8,782.4,54.5,782.5,54.3z M784.4,57.1c0.2-0.2-0.1-0.5,0-0.7
c0-0.3,0.3-0.7,0.1-0.9c-0.3,0.2-0.2,0.6-0.4,0.9c-0.2-0.3,0.1-0.9-0.4-0.9c-0.2,0.4,0.1,0.8,0,1.2c-0.3-0.2-0.6-0.2-0.8-0.5
c-0.1-0.3,0-0.5,0.3-0.6c1.3-0.5,2.7-1,4.1-1.5l0.7,0.5c-0.4,1.1,0.4,2,1,2.7c-0.4,0.4-0.9,0.6-1.2,1c0,0.2,0.2,0.3,0.3,0.4
c0.3-0.1,0.3,0.3,0.4,0.5c0.4-0.1,0.7,0.1,0.8,0.4c0,0.3,0.6,0.6,0.1,0.8l-0.3,0C787.5,59.3,785.8,58.2,784.4,57.1z M789.4,61.4
c0.2,0.2,0,0.6,0.1,0.9c0,0.1-0.1,0.1-0.2,0.1C789.2,62.1,789.2,61.7,789.4,61.4z M790.4,63.8c-0.4,0.1-0.7-0.4-0.9-0.7
c0.4-0.2,0.6,0.3,0.9,0.4C790.5,63.7,790.4,63.7,790.4,63.8z M790.5,63.1c-0.1,0.1-0.3,0-0.4-0.1c-0.1-0.2,0.1-0.2,0.2-0.3l0.2,0
L790.5,63.1z M790.3,59.9c-0.2-0.2-0.6-0.5-0.6-0.8c0.3-0.1,0.4,0.1,0.5,0.3C790.3,59.5,790.4,59.7,790.3,59.9z M791.5,63.8
c-0.1,0.1-0.2,0-0.3,0.1c-0.1,0-0.1-0.2-0.1-0.2C791.3,63.4,791.6,63.6,791.5,63.8z M790.8,54.9c-0.2-0.3-0.7-0.4-0.5-0.8
c0.2-0.5,0.4-1,0.7-1.4C791.1,53.5,790.8,54.2,790.8,54.9z M791.6,55.5l0.2-2.2c0.4,0.4,0.6,1,0.9,1.4c-0.1,0.5-0.5,0.7-0.8,1.1
C791.8,55.7,791.6,55.7,791.6,55.5z M792.1,57.4c0.3-0.2,0.2-0.4,0.2-0.7c0.3-0.7,0.8-1.3,1.4-1.7c1.1,1.3,2.3,2.6,3.3,4
c-0.3,0.3-0.6-0.3-0.9-0.1c0.1,0.2,0.4,0.2,0.5,0.4l-3.7,1.5C792.5,59.7,792.7,58.4,792.1,57.4z M802.6,60.6
c-0.4,2.2-2.3,3.8-4.4,4.2c-1.4,0.3-2.7-0.2-4-0.8c0-0.3,0.5-0.5,0.2-0.9c-0.4-0.7-1.2-1-1.3-1.9c1.1-0.5,2.2-1.1,3.4-1.5
c0.1,0.2,0.4,0.4,0.6,0.5c0.2,0,0.5-0.1,0.6-0.3c0.1-0.3-0.2-0.7-0.1-1l-0.2-0.4c-1.1-1.4-2.3-2.7-3.3-4.1c2.1-1.5,5.1-1.3,7,0.6
C802.5,56.5,803.1,58.8,802.6,60.6z"/>
</g>
<animateMotion
xlink:href="#bike"
dur="6s"
begin="0s;second.end"
repeatCount="1"
rotate="auto"
id="first">
<mpath xlink:href="#pfad" />
</animateMotion>
<animateMotion
xlink:href="#bike"
dur="6s"
begin="first.end-200ms"
repeatCount="1"
rotate="auto-reverse"
keyPoints="1;0"
keyTimes="0;1"
calcMode="linear"
id="second">
<mpath xlink:href="#pfad" />
</animateMotion>
</svg>
also you can flip the bike driver horizontally
<svg version="1.1"
x="0" y="0"
height="100"
width="689.07001"
viewBox="0 0 689.07294 99.996689"
xml:space="preserve">
<path id="pfad"
stroke="#a2b91c"
transform="scale(1,1)"
stroke-miterlimit="10"
fill="none"
d="m -28.711004,104.58853 24.9999999,-3.8 C 50.988996,91.788535 136.67514,76.504229 198.17514,66.304229 c 297.1,-49.100005 477.7,22.8 477.7,22.8 18.95813,6.809335 42.13126,10.093934 42.13126,10.093934" />
<g id="bike"
fill="#a2b91c"
width="9.34564"
height="8.50777">
<path d="m -27.175349,-10.682945 c 1.68648,-1.764806 4.432203,-2.314868 6.628704,-1.530439 l 1.568761,-2.353483 c -0.137438,-0.685964 -0.451302,-1.234846 -0.686607,-1.901894 l -0.96098,-0.215656 c -0.333426,-0.647155 -1.000207,-0.411607 -1.471037,-0.725158 -0.137244,-0.176656 -0.176366,-0.3732 -0.117621,-0.588661 l 1.000182,-0.09812 0.09806,-0.01963 c -0.490329,-0.922101 -0.157131,-1.803819 -0.03933,-2.745992 1.294113,-2.196533 3.60813,-3.372875 6.098866,-3.667698 1.765017,-0.353139 3.098723,0.705801 4.687277,0.99986 l 0.176491,-0.13729 c -0.07847,-0.392224 -0.470697,-0.313753 -0.725671,-0.568689 -0.196144,-0.470667 0.15684,-0.745257 0.176458,-1.157042 0.156876,-0.235347 0.333368,-0.372647 0.529484,-0.411877 1.3923986,-0.176611 2.5887368,0.195922 3.6282088,0.803815 0.745288,0.666737 0.941484,1.647345 0.843511,2.686721 -0.254937,0.254973 -0.588341,0.117712 -0.745218,0.353059 l 0.196117,-0.03923 c -0.0588,0.215735 -0.196079,0.549138 -0.451013,0.804102 -0.07843,0.117675 0.01967,0.607958 -0.215694,0.451081 -0.333408,-0.137261 -0.254936,0.254973 -0.588344,0.117713 -0.01957,0.411852 -0.5294862,0.411878 -0.5490642,0.82373 -0.176463,0.647198 -0.725669,-0.568689 -1.157041,-0.176456 -0.156839,0.745257 -0.31367,1.490475 0.31393,2.078848 0.862933,0.235271 1.8434992,0.03908 2.7456042,-0.03943 0.6864,-0.137328 1.411994,-0.07856 2.039558,-0.510046 0.451081,0.215694 0.627544,-0.431503 1.176646,-0.235431 0.235348,0.156876 0.274589,0.352995 0.235387,0.666776 -0.01957,0.41185 -0.47063,0.706054 -0.294101,1.078663 0.294207,0.451042 -0.41181,0.490321 -0.313712,0.980585 -0.64716,0.333445 -1.51007,0.09817 -1.882696,0.78462 0,0 0.01963,0.09805 0.117676,0.07843 0.196117,-0.03923 0.333405,0.137262 0.274591,0.352985 0.0981,0.490285 0.725632,0.05877 1.00018,0.411767 -0.313751,0.470696 -0.470587,1.215934 -1.137372,1.451381 0.176531,0.37261 0.725633,0.05878 1.039375,0.09797 0.274552,-0.156913 0.627545,-0.431502 0.666735,-0.745284 0.37261,-0.176531 0.372649,0.333369 0.509938,0.509868 0.215736,0.0588 0.588342,-0.117711 0.647198,0.176466 -0.176463,0.647197 -0.803994,1.078664 -1.215817,1.569054 1.255225,0.666714 2.51045199,1.8433126 2.98125197,3.1768266 0.568876,1.823806 0.52978,4.177188 -0.70560697,5.648171 -1.274622,1.78470898 -3.098428,2.35358498 -5.157685,2.25569698 -2.1573282,-0.0783 -3.9028388,-1.66674998 -4.7070658,-3.64742198 -0.725744,-2.098341 -0.333714,-4.72637 1.3723526,-6.3935086 0.313751,-0.470697 1.117857,-0.529586 1.176606,-1.255225 -0.13729,-0.176491 -0.176531,-0.372608 -0.372649,-0.333368 -1.8825936,1.804403 -3.5298406,3.7656696 -5.3143596,5.5504786 0.117711,0.588343 0.451153,1.235533 0.392362,1.961174 -0.137171,0.843314 -0.803952,1.588553 -1.54917,1.941675 0.137291,0.176491 0.451082,0.215693 0.607998,0.490245 -0.156877,0.235348 -0.352995,0.274589 -0.666775,0.235387 -0.294178,0.05886 -0.137262,0.333407 -0.09802,0.529525 l -2.333793,0.059 c -0.156914,-0.274551 0.0784,-0.627574 0.137173,-0.843314 -0.01963,-0.09806 -0.13729,-0.176491 -0.333406,-0.137261 l -1.039343,0.921796 c -1.177236,0.74392998 -2.530359,1.11675498 -3.962079,1.09744698 -2.274966,-0.156977 -4.648026,-1.82391198 -5.393416,-4.02063798 -1.059216,-2.235317 -0.76521,-4.843443 1.117319,-6.6480596 z m 19.8867398,-4.080929 c -0.09805,0.01963 -0.196115,0.03923 -0.27455,0.156915 l 0.03923,0.196116 0.313791,0.0392 -0.07847,-0.392224 z m 1.941488,-1.51026 c -0.37261,0.176531 -0.804038,0.568795 -1.274726,0.764946 l 0.05885,0.294167 c 0.509898,-4.4e-5 0.78441,-0.666853 1.274722,-0.764936 0,0 0.0588,-0.215736 -0.05885,-0.294167 z m -1.078512,1.745518 c 0.137291,0.176491 0.411852,0.01957 0.509899,-4.5e-5 0.176492,-0.137289 0.352995,-0.274587 0.19608,-0.549138 l -0.705979,0.549178 z m 1.353303,1.156995 c 0.156877,-0.235348 -0.0981,-0.490285 -0.137328,-0.6864 -0.392224,0.07847 -0.647161,0.333444 -1.058999,0.313859 -0.137262,0.333406 0.196144,0.470668 0.45112,0.725594 0.313789,0.0392 0.588342,-0.117712 0.745219,-0.353061 z m 1.823992,1.470787 c 0.235309,-0.353024 0.13726,-0.333407 0.09802,-0.529525 -0.333405,-0.13726 -0.588341,0.117713 -0.980565,0.196184 -0.902125,0.07852 -2.118041,0.11783 -2.686815,-0.686213 -0.156914,-0.274551 -0.196183,-0.980567 -0.745286,-0.666736 -0.09803,0.529524 7.7e-5,1.019778 0.196222,1.490475 0.117675,0.07843 0.313791,0.0392 0.333408,0.137261 0.03923,0.196117 -0.254936,0.254964 -0.333371,0.372649 1.15705,-0.333486 2.372985,-0.372791 3.471246,0.01937 0.215736,0.0588 0.490284,-0.0981 0.64716,-0.333446 z m -7.5500738,6.0997486 c 0.07859,1.921982 1.1377367,3.64771 2.7459856,4.549724 1.5885532,0.80395198 3.9027512,0.64689798 5.2362692,-0.333816 1.588455,-1.235626 2.45126897,-3.039926 2.13724899,-5.118789 -0.157027,-1.804208 -1.62802799,-3.5496356 -3.29506999,-4.2358916 -1.059068,-0.196044 -2.451466,-0.529327 -3.451648,0.07869 -0.117637,0.431467 0.235387,0.666777 0.215803,1.0786676 0.431541,1.137455 0.490475,2.451369 1.471078,3.274987 0.196117,-0.03923 0.333406,0.137261 0.470697,0.313753 0.156916,0.274551 -0.0784,0.627572 -0.352955,0.784488 -0.274552,0.156915 -0.627573,-0.0784 -0.784489,-0.352955 -0.137289,-0.176492 0.137263,-0.333407 0.09803,-0.529525 -1.255225,-1.176607 -1.372986,-2.784795 -2.0399382,-4.0791256 -1.5296629,1.0198696 -2.4119846,2.7262096 -2.4510816,4.5697076 z M -8.2494454,-13.9597 c 0.01967,0.607957 0.05893,1.314015 0.4708062,1.843501 0.09802,-0.529525 -0.117751,-1.098262 -0.117785,-1.608152 -0.1961172,0.03922 -0.2549732,-0.254935 -0.3922652,-0.431427 -0.137288,-0.176491 0.117637,-0.431467 -0.01967,-0.607957 -0.07843,0.117675 -0.215736,-0.0588 -0.274551,0.156915 -0.0588,0.215736 0.196157,0.470669 0.333446,0.647161 z m -7.7851336,10.0220956 c -0.07843,0.117676 -0.156874,0.235348 -0.117637,0.431466 l 0.196119,-0.03923 -0.07847,-0.392224 z m 0.626681,-12.6690406 0.255002,0.764835 c 0.352995,-0.274591 0.705978,-0.54918 1.098204,-0.627653 -0.509899,4.4e-5 -0.843315,-0.137171 -1.353206,-0.137182 z m 0.02044,11.8259286 c 0.117677,0.07843 0.313793,0.0392 0.529525,0.09802 0.07843,-0.117675 0.117637,-0.431466 -4.4e-5,-0.509899 l -0.01963,-0.09806 c -0.274551,0.156915 -0.451042,0.294205 -0.509861,0.509938 z m 3.254552,-14.3170756 c -0.313791,-0.0392 -0.823691,-0.03916 -1.117858,0.01969 0.490322,0.411812 0.882605,0.843242 1.431685,1.039312 -0.176529,-0.372609 0.03916,-0.823691 -0.313859,-1.058999 z m 2.8636706,5.13799 c 0.254934,-0.254965 -0.215773,-0.568718 -0.07852,-0.902124 -0.6471979,-0.176463 -0.8826066,-0.843241 -1.0983516,-1.411997 -0.235349,-0.156876 -0.804075,0.0589 -0.980586,-0.313712 l -0.09805,0.01963 c -0.627504,0.941393 -1.49038,1.725918 -2.137437,2.569243 1.568957,0.196004 3.059435,0.509674 4.5303206,0.72525 -0.03922,-0.196116 -4.4e-5,-0.509898 -0.137328,-0.6864 z m -1.3137486,3.118318 c -0.235347,-0.156875 -4.4e-5,-0.509899 -0.137328,-0.6864 -0.05885,-0.294167 -0.431505,-0.627546 -0.274627,-0.862894 0.333405,0.137261 0.313829,0.549103 0.568793,0.804038 0.137262,-0.333408 -0.274628,-0.862895 0.215655,-0.960982 0.2745897,0.352984 0.0589,0.804076 0.2354307,1.176646 0.254937,-0.254974 0.5491019,-0.313831 0.6863629,-0.647237 0.0392,-0.313792 -0.0981,-0.490285 -0.4118789,-0.529486 -1.3727997,-0.235238 -2.8436797,-0.450856 -4.3145597,-0.666479 l -0.588302,0.627611 c 0.608035,1.000144 1.28e-4,2.039655 -0.450856,2.8436826 0.470696,0.313752 1.000181,0.411767 1.372898,0.745147 0.03923,0.196116 -0.13726,0.333407 -0.215695,0.451083 -0.313791,-0.0392 -0.235309,0.353022 -0.294136,0.568754 -0.411841,-0.01957 -0.666776,0.235387 -0.705979,0.549178 0.05885,0.294176 -0.47063,0.706055 0.0589,0.804076 l 0.294165,-0.05886 c 1.353104,-1.392492 2.804301,-2.804677 3.961255,-4.1579856 z m -4.059229,5.1973616 c -0.156876,0.235348 0.117713,0.588342 0.0785,0.902124 0.01963,0.09806 0.117674,0.07843 0.215736,0.0588 0.0392,-0.313791 -0.03927,-0.706016 -0.294243,-0.960952 z m -0.509727,2.549543 c 0.411842,0.01957 0.607919,-0.529554 0.74518,-0.86296 -0.431465,-0.117636 -0.529486,0.411878 -0.804037,0.568794 -0.0588,0.215736 0.03923,0.196116 0.05885,0.294166 z m -0.235388,-0.666776 c 0.117677,0.07843 0.294168,-0.05886 0.372611,-0.17653 0.0588,-0.215736 -0.137291,-0.176491 -0.254963,-0.254934 l -0.196117,0.03923 0.07847,0.392224 z m -0.431693,-3.177011 c 0.156876,-0.235348 0.490245,-0.607997 0.431388,-0.902163 -0.31379,-0.0392 -0.372608,0.17653 -0.431427,0.392264 -0.07843,0.117675 -0.13726,0.333406 4.4e-5,0.509899 z m -0.411548,4.059616 c 0.117675,0.07843 0.196115,-0.03923 0.31379,0.0392 0.09806,-0.01963 0.0588,-0.215736 0.0588,-0.215736 -0.254943,-0.254931 -0.50987,4.4e-5 -0.372579,0.176535 z m -1.059646,-8.8643736 c 0.137262,-0.333407 0.607919,-0.529555 0.33333,-0.882549 -0.294205,-0.451042 -0.588409,-0.902093 -0.961092,-1.235438 0.0589,0.804076 0.490394,1.43159 0.627722,2.118042 z m -0.666736,0.745287 -0.627723,-2.118041 c -0.313753,0.470696 -0.392146,1.09826 -0.607853,1.549361 0.196146,0.470667 0.627613,0.588303 1.000281,0.921674 0.07843,-0.117674 0.27455,-0.156914 0.235308,-0.353023 z m -0.117535,1.9611746 c -0.334475,-0.137035 -0.27573,-0.352497 -0.334512,-0.64733 -0.431549,-0.6272686 -1.039523,-1.1174606 -1.706341,-1.3922066 -0.82359,1.4905746 -1.745234,3.0007436 -2.451082,4.5697086 0.353023,0.235309 0.529485,-0.411879 0.862893,-0.274628 -0.05879,0.215737 -0.352984,0.27459 -0.411812,0.490322 l 3.922346,0.744953 c 0.176456,-1.157041 -0.274736,-2.39258 0.117405,-3.490842 z m -9.668107,5.197751 c 0.823819,2.078747 3.000842,3.27489998 5.138466,3.25520398 1.431688,0.01952 2.608337,-0.72582798 3.765293,-1.56925298 -0.05885,-0.294166 -0.588371,-0.392185 -0.372677,-0.843267 0.254896,-0.764873 0.980497,-1.216033 0.901984,-2.118137 -1.176745,-0.274478 -2.373083,-0.64702 -3.62821,-0.803815 -0.05879,0.215737 -0.313754,0.470707 -0.490246,0.607997 -0.196116,0.03923 -0.509899,3.9e-5 -0.647198,-0.176464 -0.156915,-0.274551 0.05878,-0.725632 -0.09813,-1.000182 l 0.117638,-0.431466 c 0.802867,-1.588928 1.724504,-3.0992996 2.430435,-4.6681536 -2.353561,-1.058383 -5.255992,-0.273961 -6.746349,1.9623516 -1.078426,1.744722 -1.215663,4.118495 -0.37217,5.785041 z" />
<animateMotion xlink:href="#bike" dur="6s" rotate="auto" begin="0s;fourth.end" repeatCount="1" id="first" fill="freeze">
<mpath xlink:href="#pfad" />
</animateMotion>
<animateTransform attributeName="transform" type="scale" from="1 1" to="-1 1" begin="first.end" dur="0.2s" fill="freeze"
id="second" />
<animateMotion xlink:href="#bike" dur="6s" rotate="auto" begin="second.end" direction="alternate" keyPoints="1;0" keyTimes="0;1"
fill="freeze" calcMode="linear" id="third">
<mpath xlink:href="#pfad" />
</animateMotion>
<animateTransform attributeName="transform" type="scale" from="-1 1" to="1 1" begin="third.end" dur="0.2s" fill="freeze" repeatCount="1"
id="fourth" />
</g>
</svg>
This works with keyPoints and keyTimes, the calcMode="linear" part is for a Chrome bug. I then began each animation using id's and .end, making an exception to the first run-through using 0s;second.end.
<svg version="1.1" x="0" y="0"
viewBox="0 0 1325 139.1" style="enable-background:new 0 0 1325 139.1;" xml:space="preserve">
<path id="pfad" fill="none" stroke="#a2b91c" stroke-miterlimit="10" d="M636.2,91.9l25-3.8c54.7-9,111.6-19.2,173.1-29.4C1131.4,9.6,1312,81.5,1312,81.5l13,5.6l-13-5.6"/>
<g id="bike" fill="#a2b91c" transform="scale (-1, 1) translate(-800, -67)">
<path class="st2" d="M800.7,54c-2-1.4-4.8-1.4-6.8-0.2l-2-2c0-0.7,0.2-1.3,0.3-2l0.9-0.4c0.2-0.7,0.9-0.6,1.3-1
c0.1-0.2,0.1-0.4,0-0.6l-1,0.1l-0.1,0c0.3-1-0.2-1.8-0.5-2.7c-1.7-1.9-4.2-2.6-6.7-2.4c-1.8,0-2.9,1.3-4.4,1.9l-0.2-0.1
c0-0.4,0.4-0.4,0.6-0.7c0.1-0.5-0.3-0.7-0.4-1.1c-0.2-0.2-0.4-0.3-0.6-0.3c-1.4,0.1-2.5,0.7-3.4,1.5c-0.6,0.8-0.6,1.8-0.3,2.8
c0.3,0.2,0.6,0,0.8,0.2L778,47c0.1,0.2,0.3,0.5,0.6,0.7c0.1,0.1,0.1,0.6,0.3,0.4c0.3-0.2,0.3,0.2,0.6,0c0.1,0.4,0.6,0.3,0.7,0.7
c0.3,0.6,0.6-0.7,1.1-0.4c0.3,0.7,0.6,1.4,0.1,2.1c-0.8,0.4-1.8,0.4-2.7,0.5c-0.7,0-1.4,0.2-2.1-0.1c-0.4,0.3-0.7-0.3-1.2,0
c-0.2,0.2-0.2,0.4-0.1,0.7c0.1,0.4,0.6,0.6,0.5,1c-0.2,0.5,0.5,0.4,0.5,0.9c0.7,0.2,1.5-0.2,2,0.4c0,0,0,0.1-0.1,0.1
c-0.2,0-0.3,0.2-0.2,0.4c0,0.5-0.7,0.2-0.9,0.6c0.4,0.4,0.7,1.1,1.4,1.2c-0.1,0.4-0.7,0.2-1,0.3c-0.3-0.1-0.7-0.3-0.8-0.6
c-0.4-0.1-0.3,0.4-0.4,0.6c-0.2,0.1-0.6,0-0.6,0.3c0.3,0.6,1,0.9,1.5,1.3c-1.1,0.9-2.1,2.3-2.3,3.7c-0.2,1.9,0.3,4.2,1.8,5.4
c1.6,1.5,3.5,1.7,5.5,1.2c2.1-0.5,3.5-2.4,3.9-4.5c0.3-2.2-0.6-4.7-2.6-6c-0.4-0.4-1.2-0.3-1.4-1c0.1-0.2,0.1-0.4,0.3-0.4
c2.2,1.4,4.2,3,6.3,4.4c0,0.6-0.2,1.3,0,2c0.3,0.8,1.1,1.4,1.9,1.6c-0.1,0.2-0.4,0.3-0.5,0.6c0.2,0.2,0.4,0.2,0.7,0.1
c0.3,0,0.2,0.3,0.2,0.5l2.3-0.4c0.1-0.3-0.2-0.6-0.3-0.8c0-0.1,0.1-0.2,0.3-0.2l1.2,0.7c1.3,0.5,2.7,0.6,4.1,0.3
c2.2-0.6,4.2-2.7,4.5-5C803.7,57.9,802.9,55.4,800.7,54z M780.4,53.9c0.1,0,0.2,0,0.3,0.1l0,0.2l-0.3,0.1L780.4,53.9z M778.2,52.8
c0.4,0.1,0.9,0.4,1.4,0.5l0,0.3c-0.5,0.1-0.9-0.5-1.4-0.5C778.2,53.1,778.1,52.9,778.2,52.8z M779.6,54.3c-0.1,0.2-0.4,0.1-0.5,0.1
c-0.2-0.1-0.4-0.2-0.3-0.5L779.6,54.3z M778.5,55.7c-0.2-0.2,0-0.5,0-0.7c0.4,0,0.7,0.2,1.1,0.1c0.2,0.3-0.1,0.5-0.3,0.8
C779,56,778.7,55.9,778.5,55.7z M777,57.5c-0.3-0.3-0.2-0.3-0.2-0.5c0.3-0.2,0.6,0,1,0c0.9-0.1,2.1-0.3,2.5-1.2
c0.1-0.3,0-1,0.6-0.8c0.2,0.5,0.2,1,0.1,1.5c-0.1,0.1-0.3,0.1-0.3,0.2c0,0.2,0.3,0.2,0.4,0.3c-1.2-0.1-2.4,0.1-3.4,0.7
C777.5,57.8,777.2,57.7,777,57.5z M785.6,62c0.3,1.9-0.4,3.8-1.8,5c-1.4,1.1-3.7,1.4-5.2,0.7c-1.8-0.9-3-2.5-3.1-4.6
c-0.2-1.8,0.9-3.8,2.4-4.8c1-0.4,2.3-1,3.4-0.6c0.2,0.4-0.1,0.7,0,1.1c-0.2,1.2,0,2.5-0.8,3.5c-0.2,0-0.3,0.2-0.4,0.4
c-0.1,0.3,0.2,0.6,0.5,0.7c0.3,0.1,0.6-0.2,0.7-0.5c0.1-0.2-0.2-0.3-0.2-0.5c1-1.4,0.8-3,1.2-4.4C784,58.7,785.2,60.2,785.6,62z
M781.5,54.5c0.1,0.6,0.2,1.3-0.1,1.9c-0.2-0.5-0.1-1.1-0.2-1.6c0.2,0,0.2-0.3,0.3-0.5c0.1-0.2-0.2-0.4-0.1-0.6
c0.1,0.1,0.2-0.1,0.3,0.1C781.8,54,781.6,54.3,781.5,54.5z M791.1,62.8c0.1,0.1,0.2,0.2,0.2,0.4l-0.2,0L791.1,62.8z M788,50.5
l-0.1,0.8c-0.4-0.2-0.8-0.4-1.2-0.4C787.2,50.8,787.5,50.6,788,50.5z M790.3,62.1c-0.1,0.1-0.3,0.1-0.5,0.2
c-0.1-0.1-0.2-0.4-0.1-0.5l0-0.1C790,61.8,790.2,61.9,790.3,62.1z M784.3,48.7c0.3-0.1,0.8-0.2,1.1-0.2c-0.4,0.5-0.7,1-1.2,1.3
C784.3,49.4,784,49,784.3,48.7z M782.5,54.3c-0.3-0.2,0.1-0.6-0.1-0.9c0.6-0.3,0.7-1,0.8-1.6c0.2-0.2,0.8-0.1,0.9-0.5l0.1,0
c0.8,0.8,1.8,1.4,2.6,2.1c-1.5,0.5-2.9,1.1-4.3,1.6C782.5,54.8,782.4,54.5,782.5,54.3z M784.4,57.1c0.2-0.2-0.1-0.5,0-0.7
c0-0.3,0.3-0.7,0.1-0.9c-0.3,0.2-0.2,0.6-0.4,0.9c-0.2-0.3,0.1-0.9-0.4-0.9c-0.2,0.4,0.1,0.8,0,1.2c-0.3-0.2-0.6-0.2-0.8-0.5
c-0.1-0.3,0-0.5,0.3-0.6c1.3-0.5,2.7-1,4.1-1.5l0.7,0.5c-0.4,1.1,0.4,2,1,2.7c-0.4,0.4-0.9,0.6-1.2,1c0,0.2,0.2,0.3,0.3,0.4
c0.3-0.1,0.3,0.3,0.4,0.5c0.4-0.1,0.7,0.1,0.8,0.4c0,0.3,0.6,0.6,0.1,0.8l-0.3,0C787.5,59.3,785.8,58.2,784.4,57.1z M789.4,61.4
c0.2,0.2,0,0.6,0.1,0.9c0,0.1-0.1,0.1-0.2,0.1C789.2,62.1,789.2,61.7,789.4,61.4z M790.4,63.8c-0.4,0.1-0.7-0.4-0.9-0.7
c0.4-0.2,0.6,0.3,0.9,0.4C790.5,63.7,790.4,63.7,790.4,63.8z M790.5,63.1c-0.1,0.1-0.3,0-0.4-0.1c-0.1-0.2,0.1-0.2,0.2-0.3l0.2,0
L790.5,63.1z M790.3,59.9c-0.2-0.2-0.6-0.5-0.6-0.8c0.3-0.1,0.4,0.1,0.5,0.3C790.3,59.5,790.4,59.7,790.3,59.9z M791.5,63.8
c-0.1,0.1-0.2,0-0.3,0.1c-0.1,0-0.1-0.2-0.1-0.2C791.3,63.4,791.6,63.6,791.5,63.8z M790.8,54.9c-0.2-0.3-0.7-0.4-0.5-0.8
c0.2-0.5,0.4-1,0.7-1.4C791.1,53.5,790.8,54.2,790.8,54.9z M791.6,55.5l0.2-2.2c0.4,0.4,0.6,1,0.9,1.4c-0.1,0.5-0.5,0.7-0.8,1.1
C791.8,55.7,791.6,55.7,791.6,55.5z M792.1,57.4c0.3-0.2,0.2-0.4,0.2-0.7c0.3-0.7,0.8-1.3,1.4-1.7c1.1,1.3,2.3,2.6,3.3,4
c-0.3,0.3-0.6-0.3-0.9-0.1c0.1,0.2,0.4,0.2,0.5,0.4l-3.7,1.5C792.5,59.7,792.7,58.4,792.1,57.4z M802.6,60.6
c-0.4,2.2-2.3,3.8-4.4,4.2c-1.4,0.3-2.7-0.2-4-0.8c0-0.3,0.5-0.5,0.2-0.9c-0.4-0.7-1.2-1-1.3-1.9c1.1-0.5,2.2-1.1,3.4-1.5
c0.1,0.2,0.4,0.4,0.6,0.5c0.2,0,0.5-0.1,0.6-0.3c0.1-0.3-0.2-0.7-0.1-1l-0.2-0.4c-1.1-1.4-2.3-2.7-3.3-4.1c2.1-1.5,5.1-1.3,7,0.6
C802.5,56.5,803.1,58.8,802.6,60.6z"/>
</g>
<animateMotion
xlink:href="#bike"
dur="6s"
begin="0s;second.end"
repeatCount="1"
rotate="auto"
direction="alternate"
fill="freeze"
id="first">
<mpath xlink:href="#pfad" />
</animateMotion>
<animateMotion
xlink:href="#bike"
dur="6s"
begin="first.end"
repeatCount="1"
rotate="auto"
direction="alternate"
keyPoints="1;0"
keyTimes="0;1"
calcMode="linear"
fill="freeze"
id="second">
<mpath xlink:href="#pfad" />
</animateMotion>
</svg>
Related
I need to draw svg like below for my project ,
as you see it is like hexagonal but arms length are different
and also angles are diffrent
for beginning I have this shape that I made it online
<?xml version="1.0" encoding="utf-8"?>
<svg viewBox="0 0 500 500" xmlns="http://www.w3.org/2000/svg" xmlns:bx="https://boxy-svg.com">
<path d="M 666.103 405.572 Q 674 401.012 681.897 405.572 L 764.819 453.446 Q 772.717 458.006 772.717 467.125 L 772.717 562.875 Q 772.717 571.994 764.819 576.554 L 681.897 624.428 Q 674 628.988 666.103 624.428 L 583.181 576.554 Q 575.283 571.994 575.283 562.875 L 575.283 467.125 Q 575.283 458.006 583.181 453.446 Z" style="fill: rgb(216, 216, 216); stroke: rgb(0, 0, 0); stroke-opacity: 0; stroke-width: 0px;" transform="matrix(0.000073, 1, -1, 0.000073, 770.866394, -503.854004)" bx:shape="n-gon 674 515 113.988 113.988 6 0.08 1#c1c50f7e"/>
</svg>
How can I change it to first picture ?
If you have the time for it, it can be constructed. Here I create a mask that has the right shape and – in the mask – cut off the corners. This mask is then used on a <rect>.
<svg xmlns="http//www.w3.org/2000/svg" viewBox="0 0 120 70" width="300">
<defs>
<path id="corner" d="M -1 -2 L 6 0 Q 0 0 -3 5.2 Z" />
<mask id="hex">
<path d="M 0 34.64 L 20 0 L 100 0 L 120 34.64 L 100 69.28 L 20 69.28 Z" fill="white"/>
<g fill="black">
<use transform="translate(20 0)" href="#corner" />
<use transform="translate(0 34.64) rotate(-60)" href="#corner" />
<use transform="translate(20 69.28) rotate(-120)" href="#corner" />
<use transform="translate(100 69.28) rotate(-180)" href="#corner" />
<use transform="translate(120 34.64) rotate(-240)" href="#corner" />
<use transform="translate(100 0) rotate(-300)" href="#corner" />
</g>
</mask>
</defs>
<rect width="120" height="70" fill="#42aaab" mask="url(#hex)" />
</svg>
With Chrome the image looks perfectly and with Mozilla it looks deformed.
Chrome !
Firefox !
I have tried to modify the code to make it compatible but I have not succeeded.
<div class="col-md-3" >
<ul class="nav tab-info">
<li class="active"><img style="width:100%;" src="{!!asset('img/fechas/programa.svg')!!}"></li>
<li><img style="width:100%;" src="{!!asset('img/fechas/ponentes.svg')!!}"></li>
</ul>
</div>
This is the code of the speakers image, I made some modifications to the original but I have not achieved anything, I hope you can help me I leave the code at the request of the partner. Thank you.
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
xmlns:osb="http://www.openswatchbook.org/uri/2009/osb"
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
width="350"
height="93"
viewBox="0 0 350 93"
version="1.1"
id="svg74"
sodipodi:docname="prueba.svg"
inkscape:version="0.92.3 (2405546, 2018-03-11)">
<metadata
id="metadata78">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title>block1m-dn</dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
<sodipodi:namedview
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1"
objecttolerance="10"
gridtolerance="10"
guidetolerance="10"
inkscape:pageopacity="0"
inkscape:pageshadow="2"
inkscape:window-width="1600"
inkscape:window-height="837"
id="namedview76"
showgrid="false"
inkscape:zoom="0.76940455"
inkscape:cx="125.41259"
inkscape:cy="214.94077"
inkscape:window-x="-8"
inkscape:window-y="-8"
inkscape:window-maximized="1"
inkscape:current-layer="Page-1"
inkscape:snap-text-baseline="true" />
<!-- Generator: Sketch 51.1 (57501) - http://www.bohemiancoding.com/sketch -->
<title
id="title45">block1m-dn</title>
<desc
id="desc47">Created with Sketch.</desc>
<defs
id="defs51">
<linearGradient
id="linearGradient858"
osb:paint="solid">
<stop
style="stop-color:#c00000;stop-opacity:1;"
offset="0"
id="stop856" />
</linearGradient>
<circle
id="path-1"
cx="30"
cy="30"
r="30" />
<path
d="m 102.304,31 h -3.36 V 13.984 h 3.36 z m 6.84,-6.792 V 31 h -3.192 V 19.192 h 3.096 v 1.464 c 0.72,-1.224 2.136,-1.776 3.408,-1.776 2.928,0 4.272,2.088 4.272,4.68 V 31 h -3.192 v -6.888 c 0,-1.32 -0.648,-2.352 -2.184,-2.352 -1.392,0 -2.208,1.08 -2.208,2.448 z m 22.08,-10.584 v 15.24 c 0,0.792 0.048,1.656 0.096,2.136 h -3.048 c -0.048,-0.24 -0.12,-0.816 -0.12,-1.368 -0.528,0.936 -1.728,1.656 -3.312,1.656 -3.36,0 -5.76,-2.64 -5.76,-6.216 0,-3.456 2.328,-6.168 5.664,-6.168 2.04,0 3,0.84 3.336,1.464 v -6.744 z m -8.928,11.448 c 0,2.112 1.248,3.36 2.928,3.36 1.632,0 2.904,-1.248 2.904,-3.384 0,-2.112 -1.272,-3.288 -2.904,-3.288 -1.632,0 -2.928,1.2 -2.928,3.312 z M 137.776,31 H 134.68 V 13.624 h 3.144 v 6.864 c 0.528,-0.84 1.824,-1.608 3.576,-1.608 3.456,0 5.448,2.664 5.448,6.168 0,3.576 -2.208,6.24 -5.568,6.24 -1.632,0 -2.88,-0.72 -3.504,-1.728 z m 5.88,-5.928 c 0,-2.16 -1.296,-3.336 -2.928,-3.336 -1.608,0 -2.952,1.176 -2.952,3.336 0,2.136 1.344,3.36 2.952,3.36 1.632,0 2.928,-1.2 2.928,-3.36 z m 12.912,-5.928 v 3.216 c -0.36,-0.072 -0.672,-0.096 -0.96,-0.096 -1.632,0 -3.048,0.792 -3.048,3.336 V 31 h -3.192 V 19.192 h 3.096 v 1.752 c 0.72,-1.56 2.352,-1.848 3.36,-1.848 0.264,0 0.504,0.024 0.744,0.048 z M 166.528,31 c -0.048,-0.24 -0.096,-0.792 -0.096,-1.272 -0.648,1.104 -2.016,1.584 -3.264,1.584 -2.856,0 -4.488,-2.088 -4.488,-4.656 v -7.464 h 3.192 v 6.816 c 0,1.32 0.672,2.376 2.16,2.376 1.416,0 2.232,-0.96 2.232,-2.328 v -6.864 h 3.192 v 9.672 c 0,0.912 0.072,1.728 0.12,2.136 z m 17.544,-17.376 v 15.24 c 0,0.792 0.048,1.656 0.096,2.136 H 181.12 C 181.072,30.76 181,30.184 181,29.632 c -0.528,0.936 -1.728,1.656 -3.312,1.656 -3.36,0 -5.76,-2.64 -5.76,-6.216 0,-3.456 2.328,-6.168 5.664,-6.168 2.04,0 3,0.84 3.336,1.464 v -6.744 z m -8.928,11.448 c 0,2.112 1.248,3.36 2.928,3.36 1.632,0 2.904,-1.248 2.904,-3.384 0,-2.112 -1.272,-3.288 -2.904,-3.288 -1.632,0 -2.928,1.2 -2.928,3.312 z"
id="path-3"
inkscape:connector-curvature="0" />
<linearGradient
inkscape:collect="always"
xlink:href="#linearGradient858"
id="linearGradient3613"
gradientUnits="userSpaceOnUse"
gradientTransform="translate(10)"
x1="78.916122"
y1="44.384567"
x2="323.81326"
y2="44.384567" />
</defs>
<g
id="Page-1"
style="fill:none;fill-rule:evenodd;stroke:none;stroke-width:1">
<g
id="block1m-dn">
<g
id="Text-Copy"
transform="translate(97,7)" />
<g
id="Group-Copy"
transform="translate(20,7)"
style="opacity:1;fill:#ffffff;fill-opacity:1">
<g
id="Oval"
style="fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:#818388;stroke-width:4">
<g
id="g971">
<circle
style="fill:#ffffff;fill-opacity:1"
r="30"
cy="38"
cx="20"
id="circle55" />
</g>
</g>
<g
id="Artboard-17#4x-Clipped"
style="fill:#ffffff;fill-opacity:1">
<mask
id="mask-2"
fill="white">
<use
xlink:href="#path-1"
id="use58"
x="0"
y="0"
width="100%"
height="100%" />
</mask>
<g
id="g61"
style="fill:#ffffff;fill-opacity:1" />
<g
id="g968" />
</g>
</g>
</g>
<text
xml:space="preserve"
style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:50.66666794px;line-height:1.25;font-family:Bahnschrift;-inkscape-font-specification:'Bahnschrift, Bold';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:start;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;fill:url(#linearGradient3613);fill-opacity:1;stroke:none"
x="84.957787"
y="62.370247"
id="text3785"><tspan
sodipodi:role="line"
id="tspan850"
x="84.957787"
y="62.370247"
style="fill:url(#linearGradient3613);fill-opacity:1">PONENTES</tspan></text>
<image
y="19.55138"
x="16.953688"
id="image847"
xlink:href="data:image/png;base64,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 "
preserveAspectRatio="none"
height="46.169998"
width="46.169998"
style="fill:#c83737;fill-opacity:1" />
<path
style="opacity:1;fill:#c00000;fill-opacity:0;stroke-width:0.32492658"
d="M 35.476697,76.584652 C 17.384745,73.676488 5.4802854,57.004989 8.7140086,39.10507 10.555267,28.912989 18.042219,19.634036 27.634373,15.656119 c 4.293653,-1.7806 7.346505,-2.359559 12.391297,-2.349951 5.516447,0.01051 8.842051,0.728131 13.416693,2.895159 3.956897,1.874399 6.47746,3.696265 9.491206,6.86025 3.926864,4.122624 6.303952,8.244295 7.86696,13.640649 0.65576,2.26404 0.74091,3.252168 0.72506,8.413985 -0.0166,5.404257 -0.08461,6.065502 -0.895124,8.702132 C 67.206711,64.955975 58.908407,72.9092 47.498981,75.987931 45.560742,76.510946 37.505484,76.910768 35.476697,76.584652 Z M 46.93883,72.226955 C 55.430952,70.062872 62.7261,63.704855 66.03809,55.58118 72.654085,39.353414 62.858598,21.110652 45.554789,17.433803 c -1.636502,-0.347737 -3.517684,-0.442459 -6.666363,-0.335669 -3.785512,0.12839 -4.809432,0.287306 -7.473311,1.159889 -4.597985,1.506121 -7.739085,3.484362 -11.37243,7.162271 -3.420727,3.462681 -5.277149,6.390127 -6.630549,10.455902 -2.596413,7.799935 -1.711605,16.66101 2.328703,23.321245 4.529517,7.46667 11.81826,12.359619 20.385712,13.684972 2.702723,0.418099 7.815849,0.108135 10.812279,-0.655458 z"
id="path862"
inkscape:connector-curvature="0" />
</g>
</svg>
For Firefox, it is necessary to indicate not only the width, but also the height of the image
<img style="width:100%; height:100%"
Try opening the SVG file in a text editor and delete the line preserveAspectRatio="none"
The none attribute stretches the image to the full width of the parent container without maintaining proportions
preserveAspectRatio
Update
Thank you very much to #enxaneta for this comment:
You are using a very strange liniar gradient just to fill the text
with a solid color.
It helped to find a solution.
As it turned out, if one of the two colors is black, then the vector editors: Figma, Sketch write a linear gradient with only one
attribute stop-color instead of two
<linearGradient id="linearGradient858">
<stop offset="0" id="stop856" style="stop-color:#c00000;stop-opacity:1"/>
</linearGradient>
Chrome processes this form of writing the gradient, butFirefox does not understand it because it more strictly complies with the requirements of the SVG specification
Gradients are used to style text, so there is such a difference in rendering text.
I used the SVG-EDITOR code optimizer, that's what happened in
the end
Note
It is necessary to add * .svg files to the optimizer
We remove the gradients, add text as a separate line using the usual
text decoration attributes
<text x="74.96" y="62.37" id="text3785" style="font-size:50;font-weight:bold; fill:crimson">PONENTES </text>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="350" height="93" width="350" height="93" viewBox="0 0 350 93" version="1.1" id="svg74">
<metadata id="metadata78"/>
<title id="title45">
block1m-dn
</title>
<desc id="desc47">
Created with Sketch.
</desc>
<defs id="defs51">
<!-- <linearGradient id="linearGradient858"> -->
<!-- <stop offset="0" id="stop856" style="stop-color:#c00000;stop-opacity:1"/> -->
<!-- </linearGradient> -->
<circle id="path-1" cx="30" cy="30" r="30"/>
<path d="m102.3 31h-3.36V13.98h3.36zm6.84-6.79V31h-3.19V19.19h3.1v1.46c0.72-1.22 2.14-1.78 3.41-1.78 2.93 0 4.27 2.09 4.27 4.68V31h-3.19v-6.89c0-1.32-0.65-2.35-2.18-2.35-1.39 0-2.21 1.08-2.21 2.45zm22.08-10.58v15.24c0 0.79 0.05 1.66 0.1 2.14h-3.05c-0.05-0.24-0.12-0.82-0.12-1.37-0.53 0.94-1.73 1.66-3.31 1.66-3.36 0-5.76-2.64-5.76-6.22 0-3.46 2.33-6.17 5.66-6.17 2.04 0 3 0.84 3.34 1.46v-6.74zm-8.93 11.45c0 2.11 1.25 3.36 2.93 3.36 1.63 0 2.9-1.25 2.9-3.38 0-2.11-1.27-3.29-2.9-3.29-1.63 0-2.93 1.2-2.93 3.31zM137.78 31H134.68V13.62h3.14v6.86c0.53-0.84 1.82-1.61 3.58-1.61 3.46 0 5.45 2.66 5.45 6.17 0 3.58-2.21 6.24-5.57 6.24-1.63 0-2.88-0.72-3.5-1.73zm5.88-5.93c0-2.16-1.3-3.34-2.93-3.34-1.61 0-2.95 1.18-2.95 3.34 0 2.14 1.34 3.36 2.95 3.36 1.63 0 2.93-1.2 2.93-3.36zm12.91-5.93v3.22c-0.36-0.07-0.67-0.1-0.96-0.1-1.63 0-3.05 0.79-3.05 3.34V31h-3.19V19.19h3.1v1.75c0.72-1.56 2.35-1.85 3.36-1.85 0.26 0 0.5 0.02 0.74 0.05zM166.53 31c-0.05-0.24-0.1-0.79-0.1-1.27-0.65 1.1-2.02 1.58-3.26 1.58-2.86 0-4.49-2.09-4.49-4.66v-7.46h3.19v6.82c0 1.32 0.67 2.38 2.16 2.38 1.42 0 2.23-0.96 2.23-2.33v-6.86h3.19v9.67c0 0.91 0.07 1.73 0.12 2.14zm17.54-17.38v15.24c0 0.79 0.05 1.66 0.1 2.14H181.12C181.07 30.76 181 30.18 181 29.63c-0.53 0.94-1.73 1.66-3.31 1.66-3.36 0-5.76-2.64-5.76-6.22 0-3.46 2.33-6.17 5.66-6.17 2.04 0 3 0.84 3.34 1.46v-6.74zm-8.93 11.45c0 2.11 1.25 3.36 2.93 3.36 1.63 0 2.9-1.25 2.9-3.38 0-2.11-1.27-3.29-2.9-3.29-1.63 0-2.93 1.2-2.93 3.31z" id="path-3"/>
<linearGradient xlink:href="#linearGradient858" id="linearGradient3613" gradientUnits="userSpaceOnUse" gradientTransform="translate(10)" x1="78.92" y1="44.38" x2="323.81" y2="44.38"/>
</defs>
<g id="Page-1" fill="none">
<g id="block1m-dn">
<g id="Text-Copy" transform="translate(97,7)"/>
<g id="Group-Copy" transform="translate(20,7)" fill="#fff">
<g id="Oval" style="fill:#fff;stroke-width:4;stroke:#818388">
<g id="g971">
<circle r="30" cy="38" cx="20" id="circle55" fill="#fff"/>
</g>
</g>
<g id="Artboard-17#4x-Clipped" fill="#fff">
<mask id="mask-2" fill="white">
<use xlink:href="#path-1" id="use58" x="0" y="0" width="100" height="100"/>
</mask>
<g id="g61" fill="#fff"/>
<g id="g968"/>
</g>
</g>
</g>
<!-- <text xml:space="preserve" x="84.96" y="62.37" id="text3785" style="-inkscape-font-specification:'Bahnschrift, Bold';fill:url(#linearGradient3613);font-family:Bahnschrift;font-feature-settings:normal;font-size:50.67;font-variant-caps:normal;font-variant-ligatures:normal;font-variant-numeric:normal;font-weight:bold;letter-spacing:0;line-height:1.25;text-align:start;text-anchor:start;word-spacing:0;writing-mode:lr-tb">
<tspan id="tspan850" x="84.96" y="62.37" fill="url(#linearGradient3613)">
PONENTES
</tspan>
</text> -->
<!-- Add text -->
<text x="74.96" y="62.37" id="text3785" style="font-size:50;font-weight:bold; fill:crimson">PONENTES </text>
<image y="19.55" x="16.95" id="image847" xlink:href="data:image/png;base64,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 " preserveAspectRatio="none" height="46.17" width="46.17" fill="#c83737"/>
<path d="M35.48 76.58C17.38 73.68 5.48 57 8.71 39.11 10.56 28.91 18.04 19.63 27.63 15.66c4.29-1.78 7.35-2.36 12.39-2.35 5.52 0.01 8.84 0.73 13.42 2.9 3.96 1.87 6.48 3.7 9.49 6.86 3.93 4.12 6.3 8.24 7.87 13.64 0.66 2.26 0.74 3.25 0.73 8.41-0.02 5.4-0.08 6.07-0.9 8.7C67.21 64.96 58.91 72.91 47.5 75.99 45.56 76.51 37.51 76.91 35.48 76.58ZM46.94 72.23C55.43 70.06 62.73 63.7 66.04 55.58 72.65 39.35 62.86 21.11 45.55 17.43c-1.64-0.35-3.52-0.44-6.67-0.34-3.79 0.13-4.81 0.29-7.47 1.16-4.6 1.51-7.74 3.48-11.37 7.16-3.42 3.46-5.28 6.39-6.63 10.46-2.6 7.8-1.71 16.66 2.33 23.32 4.53 7.47 11.82 12.36 20.39 13.68 2.7 0.42 7.82 0.11 10.81-0.66z" id="path862" style="fill:none;stroke-width:0.32"/>
</g>
</svg>
NOTE
If you save the file in * .svg format, then the rendering of the text size will be different even if there is only one line in the file
Why is this happening I do not know
I've tried numerous methods I've found on stackoverflow and google but my svg isn't resizing. Can someone please explain why?
<div>
<svg viewBox="32 32 32 32" height="100" width="100">
<g transform="translate(0,-952.36218)">
<path d="m 50,971.36219 c -1.656801,0 -3,1.34315 -3,3 l 0,24.99998 -25,0 c -1.6568,0 -3,1.34313 -3,3.00003 0,1.6568 1.3432,3 3,3 l 25,0 0,25 c 0,1.6568 1.343199,3 3,3 1.656899,0 3,-1.3432 3,-3 l 0,-25 25,0 c 1.656801,0 3,-1.3432 3,-3 0,-1.6569 -1.343199,-3.00003 -3,-3.00003 l -25,0 0,-24.99998 c 0,-1.65685 -1.343101,-3 -3,-3 z"
style="text-indent:0;text-transform:none;direction:ltr;block-progression:tb;baseline-shift:baseline;color:ffffff;enable-background:accumulate;"
fill="#ffffff" fill-opacity="1" stroke="none" marker="none" visibility="visible" display="inline" overflow="visible"
/>
</g>
</svg>
</div>
https://codepen.io/hellojessicagraham/pen/XBOyzP
I adjusted the viewbox values and removed the svg css styles.
<svg viewBox="15 32 75 36" height="20px" width="20px">
https://codepen.io/anon/pen/OwddPa
Explanation of how svg viewbox works:
https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/viewBox
You can do it by modifying 'width' and 'height' attributes on your tag.
<svg viewBox="32 32 32 32" height="100" width="100">
Or, also through css, by adding in your stylesheet:
svg{
width:100px;
height:100px;
}
<div style='background:red'>
<svg viewBox="32 32 32 32" height="100" width="100">
<g transform="translate(0,-952.36218)">
<path d="m 50,971.36219 c -1.656801,0 -3,1.34315 -3,3 l 0,24.99998 -25,0 c -1.6568,0 -3,1.34313 -3,3.00003 0,1.6568 1.3432,3 3,3 l 25,0 0,25 c 0,1.6568 1.343199,3 3,3 1.656899,0 3,-1.3432 3,-3 l 0,-25 25,0 c 1.656801,0 3,-1.3432 3,-3 0,-1.6569 -1.343199,-3.00003 -3,-3.00003 l -25,0 0,-24.99998 c 0,-1.65685 -1.343101,-3 -3,-3 z"
style="text-indent:0;text-transform:none;direction:ltr;block-progression:tb;baseline-shift:baseline;color:ffffff;enable-background:accumulate;"
fill="#ffffff" fill-opacity="1" stroke="none" marker="none" visibility="visible" display="inline" overflow="visible"
/>
</g>
</svg>
</div>
I have built a simon game ina Js/jQuery with svg graphics. It works normally in Firefox but seems broken in every other browser. It seems that the problem lies inside the foreignObject svg element. The simon game lies in codepen.io:
http://codepen.io/gavlooth/pen/PzKYdv
Does anyone have any idea of what is going wrong?
Here is the code
<div id="canvas">
<div id="circle">
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns: rdf="http://www.w3.org/1999/02/22- rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
width="300"
height="300"
viewbox ="0 0 1062.9921 1062.9921"
id="svg2"
version="1.1"
inkscape:version="0.91 r13725"
sodipodi:docname="simon2 svg.svg">
<defs
id="defs4" />
<sodipodi:namedview
id="base"
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1.0"
inkscape:pageopacity="0.0"
inkscape:pageshadow="2"
inkscape:zoom="2.8"
inkscape:cx="196.48829"
inkscape:cy="174.88852"
inkscape:document-units="px"
inkscape:current-layer="layer1"
showgrid="false"
inkscape:window-width="1536"
inkscape:window-height="801"
inkscape:window-x="-8"
inkscape:window-y="-8"
inkscape:window-maximized="1" />
<metadata
id="metadata7">
< rdf: rdf>
<cc:work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title />
</cc:work>
</ rdf: rdf>
</metadata>
<g
inkscape:label="Layer 1"
inkscape:groupmode="layer"
id="layer1"
transform="translate(0,10.629921)">
<ellipse
style="fill:#2f9d84;fill-opacity:0.82882882"
id="path4149"
cx="537.88177"
cy="499.36212"
rx="504.27341"
ry="474.14215"
transform="matrix(0.99999945,-0.00104714,0.00106105,0.99999944,0,0)" />
<foreignObject x="300" y="300" width="500" height="400" requiredExtensions="http://www.w3.org/1999/xhtml">
<body xmlns="http://www.w3.org/1999/xhtml">
<div>
<div id = "Fcontainer">
<div id = "item1"> Simon <span class="sup">®</span> </div>
<div id = "item2">
<div id="counter">
<div id="dis">
--
</div>
</div>
<div id = "start">
<div class='btn-circle red' style="margin-top:25%">
</div>
</div>
<div id= "strict">
<div id='indicator-light'>
</div>
<div id ="skata" class='btn-circle orange'>
</div>
</div>
</div>
<div id = "item3">
<div style="margin-left:12%;">
<div>
COUNT
</div>
<div>
START
</div>
<div>
STRICT
</div>
</div>
<div id="svg-button" style="height:70%;">
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns: rdf="http://www.w3.org/1999/02/22- rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
width="100%"
height="100%"
viewbox ="0 0 44.122022 44.122029"
id="svg4246"
version="1.1"
inkscape:version="0.91 r13725"
sodipodi:docname="button1.svg">
<defs
id="defs4248">
<linearGradient
gradientTransform="matrix(0.70155592,0,0,0.73625312,527.90634,341.60443)"
inkscape:collect="always"
xlink:href="#linearGradient3257"
id="linearGradient2714"
gradientUnits="userSpaceOnUse"
x1="127.19796"
y1="18.49473"
x2="127.19796"
y2="47.546875" />
<linearGradient
id="linearGradient3257"
inkscape:collect="always">
<stop
id="stop3259"
offset="0"
style="stop-color:#ffffff;stop-opacity:1" />
<stop
id="stop3261"
offset="1"
style="stop-color:#ffffff;stop-opacity:0" />
</linearGradient>
<linearGradient
gradientTransform="matrix(0.7015559,0,0,0.7362531,405.0492,347.31872)"
inkscape:collect="always"
xlink:href="#linearGradient3257"
id="linearGradient2716"
gradientUnits="userSpaceOnUse"
x1="127.19796"
y1="18.49473"
x2="127.19796"
y2="47.546875" />
</defs>
<sodipodi:namedview
id="base"
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1.0"
inkscape:pageopacity="0.0"
inkscape:pageshadow="2"
inkscape:zoom="11.2"
inkscape:cx="30.895793"
inkscape:cy="15.757932"
inkscape:document-units="px"
inkscape:current-layer="layer1"
showgrid="false"
fit-margin-top="0"
fit-margin-left="0"
fit-margin-right="0"
fit-margin-bottom="0"
inkscape:window-width="1536"
inkscape:window-height="801"
inkscape:window-x="-8"
inkscape:window-y="-8"
inkscape:window-maximized="1" />
<metadata
id="metadata4251">
< rdf: rdf>
<cc:work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title></dc:title>
</cc:work>
</ rdf: rdf>
</metadata>
<g
inkscape:label="Layer 1"
inkscape:groupmode="layer"
id="layer1"
transform="translate(-595.08187,-353.15835)">
<ellipse class="identifier"
ry="22.061014"
rx="22.06101"
cy="375.21936"
cx="617.14288"
id="path3676"
style="fill:#ef2929;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:4;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
<ellipse class="identifier"
ry="11.988996"
rx="15.734934"
cy="367.21024"
cx="617.14282"
style="opacity:0.75;fill:url(#linearGradient2714);fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:1;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
id="path3678" />
<g
style="fill:#a40000;stroke:none"
transform="matrix(0.58240892,0,0,0.62445042,258.47069,-114.72848)"
id="g3750">
<path
transform="matrix(0.935483,0,0,0.935483,3.100892,-64.47165)"
d="m 649.08789,892.00586 c -7.61805,2.49027 -13.14452,9.59996 -13.14453,18.05664 2e-5,10.525 8.53164,19.05663 19.05664,19.05664 10.525,-3e-5 19.05663,-8.53164 19.05664,-19.05664 -2e-5,-8.45901 -5.5512,-15.56911 -13.17578,-18.05664 l 0,6.80273 c 4.06873,2.13526 6.90625,6.34341 6.90625,11.25391 10e-6,7.04627 -5.74083,12.78711 -12.78711,12.78711 -7.04628,10e-6 -12.78711,-5.74083 -12.78711,-12.78711 -2e-5,-4.90752 2.80743,-9.1179 6.875,-11.25391 l 0,-6.80273 z"
inkscape:href="#path22091"
id="path3752"
style="fill:#a40000;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:1;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
xlink:href="#path22091"
inkscape:original="M 649.75 891.0625 C 641.40779 893.35756 635.28126 900.99292 635.28125 910.0625 C 635.28127 920.94545 644.11705 929.78124 655 929.78125 C 665.88295 929.78122 674.71874 920.94545 674.71875 910.0625 C 674.71873 900.98968 668.56549 893.35456 660.21875 891.0625 L 660.21875 899.15625 C 664.28467 901.11041 667.125 905.25095 667.125 910.0625 C 667.12501 916.75034 661.68785 922.1875 655 922.1875 C 648.31215 922.18751 642.875 916.75035 642.875 910.0625 C 642.87498 905.25102 645.6842 901.11044 649.75 899.15625 L 649.75 891.0625 z "
inkscape:radius="-0.66131908"
sodipodi:type="inkscape:offset" />
<path
transform="matrix(0.935483,0,0,0.935483,3.100892,-64.47165)"
d="m 651.78906,887.91406 0,22.60938 6.42188,0 0,-22.60938 -6.42188,0 z"
inkscape:href="#path22093"
id="path3754"
style="fill:#a40000;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:1;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
xlink:href="#path22093"
inkscape:original="M 651.1875 887.3125 L 651.1875 911.125 L 658.8125 911.125 L 658.8125 887.3125 L 651.1875 887.3125 z "
inkscape:radius="-0.60243881"
sodipodi:type="inkscape:offset" />
</g>
<g
id="g3756"
transform="matrix(0.58240892,0,0,0.58240892,258.47069,-82.518459)"
style="fill:#eeeeec;stroke:none">
<path class="identifier"
sodipodi:type="inkscape:offset"
inkscape:radius="-0.66131908"
inkscape:original="M 649.75 891.0625 C 641.40779 893.35756 635.28126 900.99292 635.28125 910.0625 C 635.28127 920.94545 644.11705 929.78124 655 929.78125 C 665.88295 929.78122 674.71874 920.94545 674.71875 910.0625 C 674.71873 900.98968 668.56549 893.35456 660.21875 891.0625 L 660.21875 899.15625 C 664.28467 901.11041 667.125 905.25095 667.125 910.0625 C 667.12501 916.75034 661.68785 922.1875 655 922.1875 C 648.31215 922.18751 642.875 916.75035 642.875 910.0625 C 642.87498 905.25102 645.6842 901.11044 649.75 899.15625 L 649.75 891.0625 z "
xlink:href="#path22091"
style="fill:#eeeeec;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:1;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
id="path3758"
inkscape:href="#path22091"
d="m 649.08789,892.00586 c -7.61805,2.49027 -13.14452,9.59996 -13.14453,18.05664 2e-5,10.525 8.53164,19.05663 19.05664,19.05664 10.525,-3e-5 19.05663,-8.53164 19.05664,-19.05664 -2e-5,-8.45901 -5.5512,-15.56911 -13.17578,-18.05664 l 0,6.80273 c 4.06873,2.13526 6.90625,6.34341 6.90625,11.25391 10e-6,7.04627 -5.74083,12.78711 -12.78711,12.78711 -7.04628,10e-6 -12.78711,-5.74083 -12.78711,-12.78711 -2e-5,-4.90752 2.80743,-9.1179 6.875,-11.25391 l 0,-6.80273 z"
transform="matrix(0.935483,0,0,0.935483,3.100892,-64.47165)" />
<path class="identifier"
sodipodi:type="inkscape:offset"
inkscape:radius="-0.60243881"
inkscape:original="M 651.1875 887.3125 L 651.1875 911.125 L 658.8125 911.125 L 658.8125 887.3125 L 651.1875 887.3125 z "
xlink:href="#path22093"
style="fill:#eeeeec;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:1;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
id="path3760"
inkscape:href="#path22093"
d="m 651.78906,887.91406 0,22.60938 6.42188,0 0,-22.60938 -6.42188,0 z"
transform="matrix(0.935483,0,0,0.935483,3.100892,-64.47165)" />
</g>
</g>
</svg>
</div>
<div style="height:10%; display:flex;align-items:center;justify-content: space-between;">
<h1 id="onoff" style ="width:100%;margin-bottom:1%;">OFF</h1>
</div>
</div>
</div>
</div>
</body>
</foreignObject>
<path
style="fill:rgb(155,0,2);fill-opacity:1;fill-rule:evenodd;stroke:#000000;stroke-width:0.25401148px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
d="M 254.74219 151.22852 A 90.20688 102.17109 86.965732 0 1 161.13867 232.70508 L 161.2832 276.62891 A 132.65856 125.40141 0 0 0 293.52539 151.22852 L 254.74219 151.22852 z "
transform="matrix(3.5433068,0,0,3.5433068,0,-10.629921)"
id="path3342" />
<path
style="fill:#ff0000;fill-rule:evenodd;stroke:#000000;stroke-width:0.90004063px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
id="path_3342-2"
ry="444.33566"
rx="470.04999"
cy="516.64783"
cx="538.57147"
d=""
inkscape:connector-curvature="0" />
<path
style="fill:#ff0000;fill-rule:evenodd;stroke:#000000;stroke-width:0.90004063px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
id="path_3342-3"
ry="444.33566"
rx="470.04999"
cy="516.64783"
cx="538.57147"
d=""
inkscape:connector-curvature="0" />
<path
style="fill:rgb(0,173,173);fill-rule:evenodd;stroke:#000000;stroke-width:0.23711532px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
d="M 51.255859 152.16797 L 10.865234 152.40625 A 132.67548 125.41836 0 0 0 143.81641 277.04102 L 143.7168 232.44531 A 90.20688 102.17109 86.965732 0 1 51.255859 152.16797 z "
transform="matrix(3.5433068,0,0,3.5433068,0,-10.629921)"
id="path3342-8" />
<path
style="fill:rgb(173,158,0);fill-opacity:1;fill-rule:evenodd;stroke:#000000;stroke-width:0.25482526px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
d="M 162.19531 10.912109 L 161.88867 52.886719 A 90.20688 102.17109 86.965732 0 1 255.52539 137.11719 L 293.92773 137.11719 A 132.65774 126.20696 0 0 0 162.19531 10.912109 z "
transform="matrix(3.5433068,0,0,3.5433068,0,-10.629921)"
id="path3342-9" />
<path
style="fill:rgb(54,100,0);fill-opacity:1;fill-rule:evenodd;stroke:#000000;stroke-width:0.25401148px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
d="M 141.89453 10.105469 A 132.65856 125.40141 0 0 0 10.066406 135.21094 L 51.109375 135.30273 A 90.20688 102.17108 86.96573 0 1 142.18945 54.666016 L 141.89453 10.105469 z "
transform="matrix(3.5433068,0,0,3.5433068,0,-10.629921)"
id="path3342-27" />
<ellipse
ry="319.72186"
rx="361.94296"
cy="504.01788"
cx="541.88934"
id="ellipse4202"
style="fill:#cac8e9;fill-opacity:1;fill-rule:evenodd;stroke:#000000;stroke-width:1.69846582px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
transform="matrix(0.99991186,-0.01327684,0.00207067,0.99999786,0,0)" />
</g>
</svg>
</div>
</div>
I've received a SVG SMIL file that I want to use within a HTML5 project. I'm not to familiar when using SVG SMIL files and upon opening the file I can see it's in XML format and I've done all necessary changes to get it working in HTML5, however it does not validate via W3C which I would like to fix.
The problem seems to be that using value:none fails the validation in HTML5, in fact its repeated 11 times as reported by w3c Bad value none for attribute fill on element set.. I'm hoping one of you bright sparks can point me in the right direction in solving this problem You can see my full code below.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Test Project</title>
</head>
<body>
<svg version="1.1" viewBox="0 0 2560 1440" preserveAspectRatio="xMidYMid meet" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<mask id="canvasMask"><rect x="0" y="0" width="2560px" height="1440px" fill="#FFFFFF" stroke="none"/></mask>
</defs>
<rect fill="#ffffff" stroke="none" x="0" y="0" width="2560px" height="1440px"/>
<g id="id9bd0d08a1535f0fee8058e02" mask="url(#canvasMask)">
<image id="idf94d0269df15dd8365325749" xlink:href="http://www.example.com/placeholder.png" width="2560px" height="1440px" visibility="hidden">
<set attributeName="visibility" attributeType="CSS" to="visible" begin="0s; loop.end" fill="none"/>
<animateTransform attributeName="transform" type="translate" additive="replace" begin="0s; loop.end" dur="10s" repeatCount="1" fill="none" from="1279.999 715.999" to="1279.999 715.999" calcMode="discrete"/>
<animateTransform attributeName="transform" type="scale" additive="sum" begin="0s; loop.end" dur="10s" repeatCount="1" fill="none" from="1.007112705842029 1.0059462593277573" to="1.007112705842029 1.0059462593277573" calcMode="discrete"/>
<animateTransform attributeName="transform" type="translate" additive="sum" begin="0s; loop.end" dur="10s" repeatCount="1" fill="none" from="-1280.0 -720.0" to="-1280.0 -720.0" calcMode="discrete"/>
</image>
<g id="id8dea74305ccf397f1904b8e7" visibility="hidden">
<set attributeName="visibility" attributeType="CSS" to="visible" begin="0s; loop.end" fill="none"/>
<animateTransform attributeName="transform" type="translate" additive="replace" begin="0s; loop.end" dur="3.5s" repeatCount="indefinite" fill="none" from="0.0 0.0" to="0.0 0.0" calcMode="discrete"/>
<animateTransform attributeName="transform" type="translate" additive="sum" begin="0s; loop.end" dur="3.5s" repeatCount="indefinite" fill="none" from="-0.0 -0.0" to="-0.0 -0.0" calcMode="discrete"/>
<path id="idfabee4aa5eaa0c6e65db7ea4" d="M 1113.895,597.719 L 1112.895,597.719 L 1111.895,597.719 L 1109.895,597.719 L 1105.895,598.719 L 1101.895,600.719 L 1097.895,601.719 L 1085.895,605.719 L 1077.895,606.719 L 1068.895,607.719 L 1060.895,608.719 L 1051.895,610.719 L 1026.895,613.719 L 1013.895,615.719 L 998.895,618.719 L 985.895,621.719 L 972.895,625.719 L 960.895,628.719 L 942.895,636.719 L 938.895,639.719 L 934.895,643.719 L 932.895,645.719 L 929.895,648.719 L 928.895,654.719 L 928.895,656.719 L 928.895,659.719 L 929.895,664.719 L 930.895,666.719 L 932.895,668.719 L 935.895,672.719 L 950.895,690.719 L 964.895,702.719 L 988.895,722.719 L 997.895,728.719 L 1004.895,731.719 L 1015.895,737.719 L 1022.895,740.719 L 1030.895,743.719 L 1038.895,748.719 L 1048.895,751.719 L 1062.895,756.719 L 1075.895,760.719 L 1093.895,765.719 L 1109.895,771.719 L 1152.895,784.719 L 1190.895,798.719 L 1212.895,808.719 L 1230.895,814.719 L 1245.895,824.719 L 1258.895,830.719 L 1271.895,838.719 L 1308.895,871.719 L 1315.895,880.719 L 1319.895,887.719 L 1326.895,904.719 L 1328.895,912.719 L 1329.895,920.719 L 1328.895,928.719 L 1326.895,935.719 L 1322.895,944.719 L 1315.895,953.719 L 1306.895,964.719 L 1298.895,971.719 L 1288.895,980.719 L 1280.895,987.719 L 1243.895,1008.719 L 1206.895,1019.719 L 1180.895,1024.719 L 1146.895,1027.719 L 1115.895,1027.719 L 1081.895,1027.719 L 1049.895,1024.719 L 988.895,1011.719 L 957.895,1002.719 L 930.895,995.719 L 910.895,989.719 L 889.895,981.719 L 869.895,975.719 L 852.895,968.719 L 820.895,951.719 L 805.895,941.719 L 787.895,929.719 L 772.895,914.719 " style="fill: none; stroke: #f46a0f; stroke-width: 2.0; stroke-opacity: 1.0" visibility="hidden">
<set attributeName="visibility" attributeType="CSS" to="visible" begin="0s; loop.end" fill="none"/>
<set attributeName="visibility" attributeType="CSS" to="hidden" begin="3.5s; loop.end + 3.5s" dur="6.5s" fill="freeze"/>
<animateTransform attributeName="transform" type="translate" additive="replace" begin="0s; loop.end" dur="3.5s" repeatCount="1" fill="none" from="997.636 795.5" to="1563.636 593.5"/>
<animateTransform attributeName="transform" type="translate" additive="sum" begin="0s; loop.end" dur="3.5s" repeatCount="1" fill="none" from="-1051.395 -812.719" to="-1051.395 -812.719" calcMode="discrete"/>
</path>
<path id="id182b2443fa479d88d6788af0" d="M 1026.895,472.719 C 955.895,814.719 809.895,964.719 1122.895,952.719 C 1435.895,940.719 1658.895,907.719 1467.895,772.719 C 1276.895,637.719 1271.895,584.719 1158.895,536.719 C 1045.895,488.719 1026.895,472.719 1026.895,472.719 M 1026.895,472.719 " style="fill: none; stroke: #f46a0f; stroke-width: 2.0; stroke-opacity: 1.0" visibility="hidden">
<set attributeName="visibility" attributeType="CSS" to="visible" begin="0s; loop.end" fill="none"/>
<set attributeName="visibility" attributeType="CSS" to="hidden" begin="3.5s; loop.end + 3.5s" dur="6.5s" fill="freeze"/>
<animateTransform attributeName="transform" type="translate" additive="replace" begin="0s; loop.end" dur="3.5s" repeatCount="1" fill="none" from="1180.703 695.832" to="1746.703 493.832"/>
<animateTransform attributeName="transform" type="translate" additive="sum" begin="0s; loop.end" dur="3.5s" repeatCount="1" fill="none" from="-1234.463 -713.052" to="-1234.463 -713.052" calcMode="discrete"/>
</path>
</g>
</g>
<rect id="looper" x="0" y="0" width="1" height="1" style="fill: none; stroke: none"><set id="loop" attributeName="x" to="0" begin="0s; loop.end" dur="10s" fill="freeze"/></rect>
</svg>
</body>
</html>
Valid values for fill are freeze and remove when fill is an attribute of set. N.B. remove is the default value so you rarely see fill set to remove.
fill means when the animation finishes keep the final animated value, remove means when the animation finishes revert to the original base value.
It's rather up to you to determine which of these meets your functional requirements.
W3C HTML5 validator maintainer here. As far as I can see, the validator is behaving as expected here and in line with the document-conformance requirements in the SVG spec. Because at http://www.w3.org/TR/SVG/animate.html#FillAttribute (and as noted in another answer) the SVG defines fill = "freeze" | "remove", so fill="none" isn't valid.
And not knowing what you're trying to achieve with fill="none" in your code, I can't suggest a valid alternative… So maybe if you post another question explaining what you're trying to achieve, you can get some answers for what to replace fill="none" to get it.