animation not animating instead jumping to end - animation

I am trying to use the SVG animate tag to change the path from a half fill to a complete fill
<svg class="background-gradient" viewBox="0 0 100 100" preserveAspectRatio="none">
<defs>
<linearGradient id="grad">
<stop offset="0%" stop-color="rgba(82,181,244,.1)" stop-opacity="1"></stop>
<stop offset="100%" stop-color="rgba(70,215,255,.7)" stop-opacity="1"></stop>
</linearGradient>
</defs>
<path id="scroll-path" d="M0 0 H100 v 100" fill="url(#grad)">
<animate attributeName="d" from="M0 0 H100 v 100" to="M0 0 H100 L100 100 L0 100" dur="1s" repeatCount="indefinite" />
</path>
</svg>
Currently it just jumps from the beginning to the end of the animation and does not show the smooth fill I was hoping for in between.
Any ideas?


For an animation to be smooth the path must have the same number and types of commands.
Your first path has 3 commands M H v
Your second path has 4 commands M H L L
You'll need to write the first path using 2 L commands instead of the v or the second as a v instead of the two L commands.

Related

Animate a SVG made only of one stroke

I'm a little bit confused, I have an SVG, made only of one stroke that needs to be animated (classic drawing icon animation).
I want to animate the icon like it was drawn from one end of the sroke, to the other end, but it confuses the icon for a shape and the stroke ends up animated around that shape (so instead of having an animated stroke I have a shape that should be a stroke... with strokes animated around it). I don't know if you can get the full stroke path on illustrator to animate it, or if it will keep being a shape and I would never be able to do what I want with it
The svg :
<svg id="Calque_1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 260.02 118.55"><path d="M19.34,17.7c.03,.27,.12,.57,.25,.82,.05,.11,.11,.21,.18,.3-.18-.76-.3-1.41-.39-1.93-.04,.27-.07,.54-.04,.8Z"></path><path d="M246.98,23.58c-7.24,1.13-14.33,3.91-21.18,6.61-5.91,2.32-11.48,4.51-16.82,5.54-8.33,1.61-15.99,.38-23.4-.82-2.81-.45-5.72-.92-8.54-1.2-4.67-.46-9.47-.45-14.69,.02-4.16,.38-8.58,1.06-13.5,2.08-2.32,.48-4.64,1.01-6.68,1.48-5.62,1.29-10.48,2.4-14.51,2.4-.05,0-.1,0-.15,0-2.65-.02-5.03-.55-7.29-1.61-2.02-.96-4.04-2.39-6.35-4.5-1.89-1.73-3.85-3.79-5.93-5.97-2.64-2.77-5.34-5.62-8.31-8.22-2.47-2.17-5.19-4.23-8.07-6.1-2.9-1.89-5.88-3.55-8.84-4.92-2.25-1.04-4.45-1.9-6.49-2.67l.26-.96,.13,.02c1.6,.27,3.21,.52,4.82,.76,3.51,.54,7.12,1.08,10.29,1.86,2.46,.6,4.51,1.31,6.46,2.21,2.1,.97,4.13,2.21,6.21,3.78,2.27,1.71,4.61,3.84,6.58,5.97,1.95,2.1,3.42,4.09,4.27,5.74,1.29,2.5,1.25,4.56,1.23,6.07-.01,.74-.02,1.37,.09,1.98,.16,.85,.59,1.62,1.23,2.23,.66,.62,1.53,1.04,2.34,1.13,.72,.08,1.33-.08,1.93-.52,.5-.36,.97-.9,1.48-1.7,.58-.91,.96-1.78,1.17-2.65,.28-1.18,.25-2.38-.11-3.56-.51-1.69-1.73-3.57-3.02-5.56-.69-1.07-1.38-2.14-2-3.2-.49-.85-.94-1.7-1.38-2.55-1.31-2.51-2.55-4.88-4.63-6.9-1.45-1.41-3.22-2.56-5.42-3.53-2.24-.98-4.91-1.76-8.16-2.38-2.76-.53-6.17-.97-9.86-1.29-3.8-.33-7.79-.52-11.22-.53-3.3-.02-5.74,.14-7.05,.46-.26,.06-.48,.13-.67,.21l-.14,.06-2.75-.56c-1.85-.38-3.5-.72-5.11-1.01-1.93-.35-3.57-.58-5.02-.72-1.49-.13-2.9-.17-4.31-.11-1.66,.07-3.11,.26-4.33,.58-1.24,.32-2.22,.75-2.9,1.3-.82,.65-1.27,1.45-1.51,2.67-.22,1.14-.23,2.62-.18,4.48,.02,.64,.05,1.37,.08,2.14,.14,3.65,.32,8.2-.19,12.2-.3,2.35-.86,4.54-1.65,6.49-.79,1.95-1.84,3.73-3.12,5.29-.68,.83-1.44,1.62-2.17,2.37-1.81,1.87-3.33,3.45-3.63,5.33l-.09,.55-.54-.14c-.61-.16-1.21-.34-1.79-.53-2.25-.74-4.53-1.77-6.77-3.08-2.24-1.31-4.41-2.87-6.43-4.64-1.89-1.65-3.62-3.44-5.13-5.31-1.52-1.88-2.77-3.78-3.72-5.65-.91-1.78-1.54-3.52-1.87-5.18-.12-.57-.19-1.14-.23-1.67l-.02-.3,.25-.16c1.63-1.02,2.78-1.72,3.83-2.17,.96-.41,1.9-.63,2.8-.65,1.13-.03,1.97,.24,2.47,.47,.28,.14,.46,.24,.57,.38l.15,.15-.15,.75c-.1,.51-.22,1.09-.14,1.81,.06,.48,.21,.99,.43,1.42,.22,.45,.51,.83,.84,1.13,.35,.31,.79,.55,1.28,.7,.36,.11,.73,.17,1.1,.17h.35l.11,.34c.55,1.64,1.19,3.14,1.92,4.47,1.12,2.05,2.51,3.86,3.93,5.11,1.44,1.27,2.89,1.94,4.2,1.94h0c1.49,0,2.91-.84,4.11-2.42,1.16-1.53,2.07-3.69,2.63-6.26,.59-2.69,.82-5.87,1.04-8.95,.2-2.79,.39-5.42,.84-7.36,.74-3.18,2.23-4.47,3.12-5.24,.21-.18,.4-.34,.58-.54,.26-.29,.57-.7,.52-1.02-.04-.29-.39-.54-.67-.7-.58-.33-1.77-.55-3.56-.65-2.45-.13-5.61-.05-8.44,.22-2.8,.27-5.29,.71-7.38,1.3-2.39,.68-4.66,1.67-6.95,3.02-1.94,1.15-3.57,2.38-5.04,3.54-1.52,1.2-2.64,2.13-3.5,3.11-.99,1.12-1.58,2.24-1.88,3.52-.13,.56-.2,1.18-.22,1.82v.27l-.24,.14c-1.92,1.2-4.04,2.48-6.61,3.75,.09,.28,.18,.55,.26,.83,2.5-1.23,4.49-2.42,5.96-3.32l.65-.4,.11,.76c.04,.28,.09,.57,.15,.85,.35,1.73,1,3.54,1.95,5.4,.98,1.92,2.26,3.87,3.82,5.8,1.55,1.93,3.31,3.75,5.23,5.42,2.07,1.8,4.28,3.4,6.57,4.74,2.29,1.34,4.62,2.4,6.93,3.15,.75,.24,1.54,.47,2.42,.7l.29,.07,.07,.29c.32,1.25,1.19,2.65,2.59,4.16,1.59,1.72,3.88,3.6,6.63,5.45,2.37,1.59,4.72,2.91,7.17,4.03,1.42,.65,2.85,1.22,4.38,1.75l.12,.04,.09,.1c1.49,1.67,2.99,3.32,4.33,4.75,1.75,1.87,3.62,3.81,5.43,5.28,1.84,1.5,3.52,2.45,5.28,3,1.68,.52,3.46,.68,5.35,.85,2.15,.19,4.58,.4,7.01,1.24,2.74,.94,5.67,2.72,8.5,4.44,1.78,1.08,3.61,2.2,5.45,3.12,2.01,1.01,4.11,1.83,6.06,2.36,2.02,.55,3.78,.75,4.72,.53,1.12-.26,1.34-.72,1.01-2.13-.09-.37-.2-.73-.32-1.14-.19-.64-.41-1.34-.58-2.13-.18-.86-.31-1.82-.45-2.83-.33-2.46-.67-4.95-1.74-6.67-.76-1.21-1.89-2.04-3.56-2.62-1.54-.53-3.45-.81-5.85-1.08-.66-.07-1.65-.18-2.69-.28-4.28-.44-9.6-.98-14.52-2.29-.72-.19-1.44-.4-2.15-.63l-2.3-.73,2.4-.24c1.41-.14,2.8-.36,4.15-.65,4.91-1.07,9.76-3.21,14.04-5.1,2.36-1.04,4.58-2.02,6.41-2.63,1.47-.49,2.65-.73,3.66-.73,.8,0,1.49,.15,2.12,.46,1.5,.73,2.78,2.4,4.13,5.41,1.17,2.59,2.4,6.23,3.71,10.09,1.82,5.35,3.86,11.37,6.41,16.82,2.17,4.65,4.73,8.93,7.6,12.73,2.88,3.82,6.01,7.06,9.31,9.64,3.1,2.43,6.38,4.32,10.04,5.77,3.22,1.28,6.64,2.18,10.44,2.76,3.47,.52,7.09,.73,10.2,.59,3.17-.15,5.68-.64,7.26-1.42,.53-.26,.98-.57,1.34-.92,.61-.59,.94-1.27,1-2.07,.06-.73-.13-1.53-.55-2.39-.47-.94-1.22-1.95-2.24-3-1.26-1.29-2.88-2.61-4.61-4.02-2.57-2.09-5.47-4.44-7.52-7.04-1.88-2.39-3.1-5.04-4.39-7.84-1.03-2.23-2.09-4.54-3.54-6.83-2.24-3.54-5.38-7.02-7.9-9.81-1.18-1.3-2.16-2.39-2.84-3.25q-1.35-1.7-1.13-2.04t1.94-.05c.3,.04,.7,.11,1.13,.18,2.64,.44,6.25,1.04,11.04-.32,3.99-1.13,8.6-3.57,13.06-5.94l.11-.06c1.64-.87,3.2-1.7,4.65-2.41,2.86-1.41,5.13-2.32,7.38-2.94,2.36-.65,4.85-1.02,7.83-1.16,1.31-.06,2.78-.08,4.2-.1,5.24-.08,11.19-.16,15.49-2.26,2.84-1.38,4.68-3.5,5.73-5.02,1.79-2.62,2.44-5.27,2.28-6.74-.17-1.63-1.1-2.44-2.91-2.54-1.41-.07-3.43,.38-5.99,1.34-1.02,.39-2.12,.85-3.27,1.33-4.3,1.81-9.64,4.06-17.08,5.02-4.42,.57-9.68,.68-14.76,.79-6.05,.13-12.27,.27-17.57,1.12-4.54,.73-8.6,2.02-12.07,3.81-3.47,1.8-6.31,4.12-8.21,6.73-1.75,2.39-2.69,5-2.79,7.74-.1,2.69,.59,5.58,2.07,8.59,1.94,3.95,5.2,8.13,8.35,12.17,1.54,1.97,3.12,4,4.51,5.96,1.99,2.82,3.58,5.55,4.49,7.69,1.2,2.83,.96,3.38,.64,3.68-.39,.37-1.07,.32-3.36-.97-1.97-1.11-4.53-2.99-7.4-5.43-3.18-2.71-6.36-5.78-9.19-8.89-2.84-3.12-5.34-6.28-7.44-9.39-2.47-3.65-4.54-7.49-5.99-11.1-1.45-3.62-2.25-6.88-2.38-9.7-.12-2.76,.4-5.13,.87-7.23,.56-2.53,1.01-4.52,.2-6.32-.9-2.02-3.28-3.53-6.29-5.43-1.89-1.2-4.03-2.54-6.06-4.2-2.23-1.81-4.4-4.03-6.69-6.38-3.08-3.15-6.26-6.41-10.01-9.12-2.9-2.1-6.24-3.94-9.92-5.47-3.7-1.54-7.65-2.72-11.42-3.42-3.6-.66-6.47-.78-8.78-.36-2.66,.48-4.51,1.64-5.68,3.56-1.32,2.18-1.7,5.34-2.1,8.68-.3,2.52-.61,5.13-1.36,7.37-1.04,3.1-2.98,5.59-4.53,7.6-1.07,1.37-1.99,2.56-2.5,3.71-.51,1.15-.61,2.22-.32,3.37l.22,.86-.85-.25c-1.77-.53-3.55-.92-5.27-1.29-.8-.17-1.56-.34-2.31-.51l-.43-.1,.05-.44c.2-1.73,1.74-3.33,3.38-5.02,.75-.78,1.53-1.59,2.25-2.47,1.33-1.63,2.42-3.48,3.25-5.52,.82-2.03,1.4-4.28,1.71-6.7,.52-4.04,.34-8.63,.2-12.32v-.2c-.03-.68-.06-1.33-.08-1.95-.05-1.8-.05-3.22,.16-4.29,.19-.98,.57-1.67,1.2-2.17,.59-.47,1.46-.85,2.58-1.14,1.17-.3,2.57-.49,4.17-.55,1.33-.06,2.71-.02,4.19,.11,1.46,.13,3.03,.35,4.94,.7,1.45,.26,3.21,.63,5.09,1.01l2.28,.47,.09,.27c.05,.14,.14,.28,.28,.4,.57,.54,2.25,1.16,4.37,1.96,2,.75,4.5,1.68,7.18,2.93,2.95,1.37,5.89,3,8.74,4.86,2.84,1.85,5.52,3.88,7.97,6.03,2.91,2.56,5.61,5.39,8.21,8.12,2.1,2.21,4.07,4.28,6.01,6.05,2.38,2.17,4.47,3.65,6.57,4.64,2.37,1.12,4.87,1.68,7.65,1.7,.05,0,.1,0,.16,0,4.11,0,9.02-1.12,14.69-2.42,2.01-.46,4.28-.98,6.68-1.48,4.92-1.02,9.3-1.69,13.41-2.07,5.15-.47,9.9-.47,14.52-.02,2.79,.27,5.55,.72,8.47,1.19,7.5,1.21,15.24,2.46,23.72,.82,5.42-1.05,11.02-3.25,16.94-5.58,6.84-2.69,13.88-5.46,21.02-6.57,4.02-.62,8.25-.76,12.91-.41l-.05-.86c-4.67-.34-8.92-.2-12.98,.43ZM77.2,2.98c.54,0,1.12-.01,1.73,0,3.39,.01,7.35,.2,11.15,.53,3.7,.32,7.08,.76,9.78,1.27,3.17,.6,5.78,1.36,7.97,2.33,2.12,.93,3.81,2.02,5.17,3.35,1.98,1.93,3.24,4.35,4.47,6.69,.46,.87,.91,1.74,1.39,2.58,.66,1.15,1.38,2.26,2.01,3.23,1.27,1.95,2.45,3.78,2.92,5.35,.31,1.04,.35,2.09,.1,3.12-.19,.78-.54,1.56-1.06,2.39-.44,.7-.84,1.16-1.26,1.46-.35,.25-.73,.38-1.13,.38-.07,0-.15,0-.22-.01-.64-.07-1.32-.4-1.85-.9-.51-.48-.85-1.09-.98-1.76-.09-.5-.08-1.1-.07-1.8,.03-1.69,.07-3.78-1.32-6.48-.89-1.72-2.41-3.77-4.41-5.93-2.02-2.18-4.4-4.34-6.7-6.08-2.12-1.61-4.21-2.87-6.37-3.87-2-.93-4.11-1.65-6.62-2.26-3.21-.79-6.82-1.34-10.31-1.87-1.55-.24-3.04-.46-4.48-.7l.07-.99ZM21.92,19.78c-.42-1.52-.66-2.76-.78-3.54-.07-.43-.11-.74-.13-.97l-.06-.68,.67,.16c.08,.02,.17,.04,.26,.07,.31,.1,.6,.24,.85,.43,.31,.23,.58,.53,.79,.88,.21,.34,.34,.69,.39,1.05,.06,.37,.03,.78-.08,1.19-.11,.41-.29,.8-.53,1.11-.18,.24-.4,.44-.64,.6l-.57,.37-.18-.66ZM7.9,14.97c.26-1.13,.8-2.13,1.69-3.14,.83-.94,1.91-1.85,3.39-3.01,1.45-1.14,3.06-2.35,4.95-3.47,2.21-1.31,4.41-2.27,6.74-2.93,2.06-.59,4.5-1.02,7.23-1.28,2.77-.27,5.88-.34,8.32-.21,1.24,.07,2.11,.17,2.67,.33l.89,.25-.95,.83c-1.03,.89-2.59,2.24-3.39,5.7-.46,1.98-.65,4.66-.85,7.49-.22,3.04-.45,6.18-1.03,8.83-.54,2.45-1.39,4.5-2.47,5.92-1.03,1.36-2.22,2.08-3.43,2.08h0c-1.11,0-2.33-.58-3.63-1.73-1.34-1.19-2.67-2.92-3.74-4.88-.68-1.24-1.28-2.63-1.79-4.12l-.15-.43,.41-.19c.06-.03,.12-.06,.17-.09,.42-.23,.78-.54,1.07-.93,.31-.41,.54-.89,.68-1.41,.13-.52,.17-1.04,.09-1.53-.07-.46-.25-.94-.51-1.37-.27-.44-.61-.82-1-1.11-.33-.24-.7-.43-1.1-.56-.3-.1-.63-.16-.96-.18-.56-.04-.77-.03-.96,.55-.11,.34-.09,1,.07,2.01,.12,.74,.34,1.93,.73,3.4l.22,.82-.96-.24c-.37-.11-.7-.29-.96-.53-.25-.22-.47-.52-.64-.86-.18-.36-.3-.76-.34-1.14-.07-.57,.04-1.1,.13-1.53l.06-.31c.08-.41,.09-.68-.06-1.01-.1-.23-.32-.57-1.05-.91-.48-.23-1.47-.59-2.87-.56-1.01,.03-2.06,.27-3.11,.72-.96,.41-1.99,1.01-2.86,1.55l-.97,.6,.28-1.4ZM55.76,59.75l-.09-.1c-.54-.61-1.08-1.22-1.62-1.83-2.2-2.51-4.2-4.87-5.8-6.82-.45-.55-.86-1.06-1.24-1.55l-1.36-1.75,1.98,1c2.97,1.5,5.91,3.59,9.01,5.8,1.59,1.13,3.23,2.3,4.93,3.42,2.01,1.32,4.02,2.51,5.98,3.54l2.39,1.26-2.68-.32c-2.54-.3-5.18-.81-7.86-1.53-1.21-.32-2.4-.68-3.54-1.06l-.13-.04Zm22.8,6.04c4.99,1.33,10.35,1.88,14.65,2.32l.21,.02c.78,.08,1.53,.16,2.47,.26,2.35,.26,4.22,.54,5.67,1.04,1.47,.5,2.46,1.22,3.1,2.26,.98,1.56,1.3,3.97,1.61,6.29,.14,1.05,.27,2.05,.46,2.94,.18,.87,.41,1.61,.59,2.21,.14,.45,.25,.81,.31,1.08,.07,.29,.22,.96-.36,1.1-.22,.05-.49,.08-.77,.08-1.13,0-2.63-.35-3.53-.6-1.91-.52-3.95-1.31-5.9-2.29-1.74-.88-3.59-2-5.39-3.09-2.86-1.74-5.82-3.54-8.66-4.51-2.54-.87-4.92-1.08-7.22-1.28-1.84-.16-3.58-.32-5.17-.81-1.66-.51-3.25-1.42-4.99-2.84-1.77-1.44-3.61-3.35-5.34-5.2-.72-.77-1.46-1.58-2.23-2.42l-1.16-1.28,2.28,.62c3.52,.94,6.98,1.54,10.28,1.77,.83,.06,1.66,.09,2.47,.11l.18,.04c2.12,.89,4.28,1.63,6.42,2.2Zm-33.76-23.44c.47-1.05,1.36-2.2,2.39-3.53,1.69-2.17,3.6-4.63,4.68-7.86,.77-2.31,1.09-4.97,1.4-7.54,.39-3.24,.75-6.3,1.99-8.33,1.01-1.67,2.73-2.73,5.09-3.16,2.21-.4,4.99-.28,8.48,.36,3.72,.68,7.61,1.85,11.25,3.36,3.63,1.51,6.91,3.32,9.76,5.38,3.68,2.66,6.83,5.89,9.89,9.01,2.33,2.39,4.5,4.6,6.77,6.45,2.12,1.72,4.25,3.07,6.14,4.26,2.9,1.83,5.18,3.28,5.98,5.05,.69,1.54,.25,3.51-.26,5.78-.48,2.15-1.02,4.58-.89,7.46,.13,2.92,.95,6.28,2.44,9.98,1.46,3.65,3.56,7.54,6.08,11.26,2.12,3.14,4.65,6.33,7.52,9.48,2.87,3.16,6.07,6.26,9.27,8.98,2.91,2.47,5.51,4.38,7.53,5.52,2.11,1.19,3.66,1.5,4.36,.85,.7-.65,.55-2.34-.43-4.64-.94-2.2-2.56-4.99-4.58-7.85-1.33-1.89-2.85-3.84-4.47-5.91l-.06-.08c-3.13-4.01-6.37-8.16-8.27-12.03-1.41-2.88-2.08-5.64-1.98-8.19,.1-2.57,.98-5.02,2.63-7.27,1.82-2.49,4.56-4.72,7.92-6.47,3.4-1.76,7.37-3.01,11.81-3.73,5.25-.85,11.45-.98,17.45-1.11,5.37-.12,10.42-.22,14.85-.79,7.56-.97,12.97-3.25,17.31-5.08,1.17-.49,2.24-.94,3.24-1.32,2.48-.93,4.32-1.37,5.65-1.28,1.67,.09,2.03,1.15,2.09,1.77,.17,1.6-.67,4.03-2.14,6.17-.99,1.44-2.72,3.43-5.39,4.74-4.12,2.01-9.97,2.1-15.13,2.17-1.49,.02-2.88,.04-4.24,.11-3.05,.15-5.59,.53-8.01,1.19-2.31,.64-4.63,1.56-7.53,2.99-1.48,.73-3.03,1.55-4.68,2.43l-.09,.05c-4.43,2.35-8.99,4.77-12.9,5.88-4.6,1.3-8.25,.7-10.67,.3-.4-.07-.75-.12-1.14-.18-1.58-.22-2.43-.09-2.77,.42-.38,.57,0,1.6,1.16,3.06,.7,.89,1.76,2.05,2.87,3.29,2.5,2.77,5.61,6.22,7.82,9.7,1.43,2.25,2.47,4.52,3.48,6.71,1.32,2.87,2.56,5.56,4.5,8.03,2.11,2.68,5.05,5.06,7.64,7.17,1.72,1.4,3.33,2.71,4.54,3.95,.96,.98,1.66,1.92,2.08,2.78,.36,.72,.51,1.38,.47,1.95-.04,.57-.29,1.08-.74,1.52-.29,.28-.67,.54-1.12,.76-1.49,.74-3.88,1.2-6.93,1.34-.64,.03-1.31,.04-1.98,.04-2.56,0-5.31-.21-8.06-.63-3.74-.56-7.09-1.45-10.25-2.7-3.52-1.4-6.82-3.3-9.82-5.65-3.24-2.54-6.32-5.73-9.15-9.48-2.83-3.75-5.36-7.99-7.5-12.58-2.53-5.41-4.57-11.42-6.37-16.71-1.39-4.09-2.57-7.56-3.75-10.19-1.44-3.21-2.84-5-4.54-5.83-1.64-.79-3.56-.73-6.42,.23-1.88,.63-4.11,1.61-6.48,2.66-4.25,1.88-9.06,4-13.88,5.05-2.65,.58-5.45,.86-8.37,.84l-.19-.04c-.67-.29-1.34-.59-2.01-.9-2.68-1.27-5.32-2.77-8.08-4.58-1.65-1.08-3.3-2.25-4.89-3.39-3.57-2.54-6.92-4.92-10.38-6.46-.49-.22-.97-.42-1.46-.6l-.18-.07-.09-.17c-.06-.12-.12-.25-.17-.37-.6-1.35-.62-2.55-.08-3.77Zm-7.22,3.16c2.22,.48,4.52,.99,6.79,1.78l.17,.06,.09,.16c.69,1.17,1.68,2.45,2.95,4.02,1.42,1.74,3.18,3.83,5.11,6.04l1.43,1.64-2-.86c-.34-.15-.68-.3-1.01-.45-2.4-1.1-4.7-2.39-7.05-3.97-2.7-1.81-4.94-3.65-6.48-5.31-.9-.98-1.57-1.89-1.98-2.72l-.47-.94,2.44,.54Z"></path></svg>
It has been drawned by our graphist so If we have to remake the svg it'll be done.
Thank you !

Your graphic artist has drawn this incorrectly. You can see this if you put a very narrow stroke on it with zero fill - each curve is actually a double curve - so it is actually drawn as a shape.
<svg id="Calque_1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 260.02 118.55">
<path pathLength="100" fill="none" stroke="blue" stroke-width=".1" d="M246.98,23.58c-7.24,1.13-14.33,3.91-21.18,6.61-5.91,2.32-11.48,4.51-16.82,5.54-8.33,1.61-15.99,.38-23.4-.82-2.81-.45-5.72-.92-8.54-1.2-4.67-.46-9.47-.45-14.69,.02-4.16,.38-8.58,1.06-13.5,2.08-2.32,.48-4.64,1.01-6.68,1.48-5.62,1.29-10.48,2.4-14.51,2.4-.05,0-.1,0-.15,0-2.65-.02-5.03-.55-7.29-1.61-2.02-.96-4.04-2.39-6.35-4.5-1.89-1.73-3.85-3.79-5.93-5.97-2.64-2.77-5.34-5.62-8.31-8.22-2.47-2.17-5.19-4.23-8.07-6.1-2.9-1.89-5.88-3.55-8.84-4.92-2.25-1.04-4.45-1.9-6.49-2.67l.26-.96,.13,.02c1.6,.27,3.21,.52,4.82,.76,3.51,.54,7.12,1.08,10.29,1.86,2.46,.6,4.51,1.31,6.46,2.21,2.1,.97,4.13,2.21,6.21,3.78,2.27,1.71,4.61,3.84,6.58,5.97,1.95,2.1,3.42,4.09,4.27,5.74,1.29,2.5,1.25,4.56,1.23,6.07-.01,.74-.02,1.37,.09,1.98,.16,.85,.59,1.62,1.23,2.23,.66,.62,1.53,1.04,2.34,1.13,.72,.08,1.33-.08,1.93-.52,.5-.36,.97-.9,1.48-1.7,.58-.91,.96-1.78,1.17-2.65,.28-1.18,.25-2.38-.11-3.56-.51-1.69-1.73-3.57-3.02-5.56-.69-1.07-1.38-2.14-2-3.2-.49-.85-.94-1.7-1.38-2.55-1.31-2.51-2.55-4.88-4.63-6.9-1.45-1.41-3.22-2.56-5.42-3.53-2.24-.98-4.91-1.76-8.16-2.38-2.76-.53-6.17-.97-9.86-1.29-3.8-.33-7.79-.52-11.22-.53-3.3-.02-5.74,.14-7.05,.46-.26,.06-.48,.13-.67,.21l-.14,.06-2.75-.56c-1.85-.38-3.5-.72-5.11-1.01-1.93-.35-3.57-.58-5.02-.72-1.49-.13-2.9-.17-4.31-.11-1.66,.07-3.11,.26-4.33,.58-1.24,.32-2.22,.75-2.9,1.3-.82,.65-1.27,1.45-1.51,2.67-.22,1.14-.23,2.62-.18,4.48,.02,.64,.05,1.37,.08,2.14,.14,3.65,.32,8.2-.19,12.2-.3,2.35-.86,4.54-1.65,6.49-.79,1.95-1.84,3.73-3.12,5.29-.68,.83-1.44,1.62-2.17,2.37-1.81,1.87-3.33,3.45-3.63,5.33l-.09,.55-.54-.14c-.61-.16-1.21-.34-1.79-.53-2.25-.74-4.53-1.77-6.77-3.08-2.24-1.31-4.41-2.87-6.43-4.64-1.89-1.65-3.62-3.44-5.13-5.31-1.52-1.88-2.77-3.78-3.72-5.65-.91-1.78-1.54-3.52-1.87-5.18-.12-.57-.19-1.14-.23-1.67l-.02-.3,.25-.16c1.63-1.02,2.78-1.72,3.83-2.17,.96-.41,1.9-.63,2.8-.65,1.13-.03,1.97,.24,2.47,.47,.28,.14,.46,.24,.57,.38l.15,.15-.15,.75c-.1,.51-.22,1.09-.14,1.81,.06,.48,.21,.99,.43,1.42,.22,.45,.51,.83,.84,1.13,.35,.31,.79,.55,1.28,.7,.36,.11,.73,.17,1.1,.17h.35l.11,.34c.55,1.64,1.19,3.14,1.92,4.47,1.12,2.05,2.51,3.86,3.93,5.11,1.44,1.27,2.89,1.94,4.2,1.94h0c1.49,0,2.91-.84,4.11-2.42,1.16-1.53,2.07-3.69,2.63-6.26,.59-2.69,.82-5.87,1.04-8.95,.2-2.79,.39-5.42,.84-7.36,.74-3.18,2.23-4.47,3.12-5.24,.21-.18,.4-.34,.58-.54,.26-.29,.57-.7,.52-1.02-.04-.29-.39-.54-.67-.7-.58-.33-1.77-.55-3.56-.65-2.45-.13-5.61-.05-8.44,.22-2.8,.27-5.29,.71-7.38,1.3-2.39,.68-4.66,1.67-6.95,3.02-1.94,1.15-3.57,2.38-5.04,3.54-1.52,1.2-2.64,2.13-3.5,3.11-.99,1.12-1.58,2.24-1.88,3.52-.13,.56-.2,1.18-.22,1.82v.27l-.24,.14c-1.92,1.2-4.04,2.48-6.61,3.75,.09,.28,.18,.55,.26,.83,2.5-1.23,4.49-2.42,5.96-3.32l.65-.4,.11,.76c.04,.28,.09,.57,.15,.85,.35,1.73,1,3.54,1.95,5.4,.98,1.92,2.26,3.87,3.82,5.8,1.55,1.93,3.31,3.75,5.23,5.42,2.07,1.8,4.28,3.4,6.57,4.74,2.29,1.34,4.62,2.4,6.93,3.15,.75,.24,1.54,.47,2.42,.7l.29,.07,.07,.29c.32,1.25,1.19,2.65,2.59,4.16,1.59,1.72,3.88,3.6,6.63,5.45,2.37,1.59,4.72,2.91,7.17,4.03,1.42,.65,2.85,1.22,4.38,1.75l.12,.04,.09,.1c1.49,1.67,2.99,3.32,4.33,4.75,1.75,1.87,3.62,3.81,5.43,5.28,1.84,1.5,3.52,2.45,5.28,3,1.68,.52,3.46,.68,5.35,.85,2.15,.19,4.58,.4,7.01,1.24,2.74,.94,5.67,2.72,8.5,4.44,1.78,1.08,3.61,2.2,5.45,3.12,2.01,1.01,4.11,1.83,6.06,2.36,2.02,.55,3.78,.75,4.72,.53,1.12-.26,1.34-.72,1.01-2.13-.09-.37-.2-.73-.32-1.14-.19-.64-.41-1.34-.58-2.13-.18-.86-.31-1.82-.45-2.83-.33-2.46-.67-4.95-1.74-6.67-.76-1.21-1.89-2.04-3.56-2.62-1.54-.53-3.45-.81-5.85-1.08-.66-.07-1.65-.18-2.69-.28-4.28-.44-9.6-.98-14.52-2.29-.72-.19-1.44-.4-2.15-.63l-2.3-.73,2.4-.24c1.41-.14,2.8-.36,4.15-.65,4.91-1.07,9.76-3.21,14.04-5.1,2.36-1.04,4.58-2.02,6.41-2.63,1.47-.49,2.65-.73,3.66-.73,.8,0,1.49,.15,2.12,.46,1.5,.73,2.78,2.4,4.13,5.41,1.17,2.59,2.4,6.23,3.71,10.09,1.82,5.35,3.86,11.37,6.41,16.82,2.17,4.65,4.73,8.93,7.6,12.73,2.88,3.82,6.01,7.06,9.31,9.64,3.1,2.43,6.38,4.32,10.04,5.77,3.22,1.28,6.64,2.18,10.44,2.76,3.47,.52,7.09,.73,10.2,.59,3.17-.15,5.68-.64,7.26-1.42,.53-.26,.98-.57,1.34-.92,.61-.59,.94-1.27,1-2.07,.06-.73-.13-1.53-.55-2.39-.47-.94-1.22-1.95-2.24-3-1.26-1.29-2.88-2.61-4.61-4.02-2.57-2.09-5.47-4.44-7.52-7.04-1.88-2.39-3.1-5.04-4.39-7.84-1.03-2.23-2.09-4.54-3.54-6.83-2.24-3.54-5.38-7.02-7.9-9.81-1.18-1.3-2.16-2.39-2.84-3.25q-1.35-1.7-1.13-2.04t1.94-.05c.3,.04,.7,.11,1.13,.18,2.64,.44,6.25,1.04,11.04-.32,3.99-1.13,8.6-3.57,13.06-5.94l.11-.06c1.64-.87,3.2-1.7,4.65-2.41,2.86-1.41,5.13-2.32,7.38-2.94,2.36-.65,4.85-1.02,7.83-1.16,1.31-.06,2.78-.08,4.2-.1,5.24-.08,11.19-.16,15.49-2.26,2.84-1.38,4.68-3.5,5.73-5.02,1.79-2.62,2.44-5.27,2.28-6.74-.17-1.63-1.1-2.44-2.91-2.54-1.41-.07-3.43,.38-5.99,1.34-1.02,.39-2.12,.85-3.27,1.33-4.3,1.81-9.64,4.06-17.08,5.02-4.42,.57-9.68,.68-14.76,.79-6.05,.13-12.27,.27-17.57,1.12-4.54,.73-8.6,2.02-12.07,3.81-3.47,1.8-6.31,4.12-8.21,6.73-1.75,2.39-2.69,5-2.79,7.74-.1,2.69,.59,5.58,2.07,8.59,1.94,3.95,5.2,8.13,8.35,12.17,1.54,1.97,3.12,4,4.51,5.96,1.99,2.82,3.58,5.55,4.49,7.69,1.2,2.83,.96,3.38,.64,3.68-.39,.37-1.07,.32-3.36-.97-1.97-1.11-4.53-2.99-7.4-5.43-3.18-2.71-6.36-5.78-9.19-8.89-2.84-3.12-5.34-6.28-7.44-9.39-2.47-3.65-4.54-7.49-5.99-11.1-1.45-3.62-2.25-6.88-2.38-9.7-.12-2.76,.4-5.13,.87-7.23,.56-2.53,1.01-4.52,.2-6.32-.9-2.02-3.28-3.53-6.29-5.43-1.89-1.2-4.03-2.54-6.06-4.2-2.23-1.81-4.4-4.03-6.69-6.38-3.08-3.15-6.26-6.41-10.01-9.12-2.9-2.1-6.24-3.94-9.92-5.47-3.7-1.54-7.65-2.72-11.42-3.42-3.6-.66-6.47-.78-8.78-.36-2.66,.48-4.51,1.64-5.68,3.56-1.32,2.18-1.7,5.34-2.1,8.68-.3,2.52-.61,5.13-1.36,7.37-1.04,3.1-2.98,5.59-4.53,7.6-1.07,1.37-1.99,2.56-2.5,3.71-.51,1.15-.61,2.22-.32,3.37l.22,.86-.85-.25c-1.77-.53-3.55-.92-5.27-1.29-.8-.17-1.56-.34-2.31-.51l-.43-.1,.05-.44c.2-1.73,1.74-3.33,3.38-5.02,.75-.78,1.53-1.59,2.25-2.47,1.33-1.63,2.42-3.48,3.25-5.52,.82-2.03,1.4-4.28,1.71-6.7,.52-4.04,.34-8.63,.2-12.32v-.2c-.03-.68-.06-1.33-.08-1.95-.05-1.8-.05-3.22,.16-4.29,.19-.98,.57-1.67,1.2-2.17,.59-.47,1.46-.85,2.58-1.14,1.17-.3,2.57-.49,4.17-.55,1.33-.06,2.71-.02,4.19,.11,1.46,.13,3.03,.35,4.94,.7,1.45,.26,3.21,.63,5.09,1.01l2.28,.47,.09,.27c.05,.14,.14,.28,.28,.4,.57,.54,2.25,1.16,4.37,1.96,2,.75,4.5,1.68,7.18,2.93,2.95,1.37,5.89,3,8.74,4.86,2.84,1.85,5.52,3.88,7.97,6.03,2.91,2.56,5.61,5.39,8.21,8.12,2.1,2.21,4.07,4.28,6.01,6.05,2.38,2.17,4.47,3.65,6.57,4.64,2.37,1.12,4.87,1.68,7.65,1.7,.05,0,.1,0,.16,0,4.11,0,9.02-1.12,14.69-2.42,2.01-.46,4.28-.98,6.68-1.48,4.92-1.02,9.3-1.69,13.41-2.07,5.15-.47,9.9-.47,14.52-.02,2.79,.27,5.55,.72,8.47,1.19,7.5,1.21,15.24,2.46,23.72,.82,5.42-1.05,11.02-3.25,16.94-5.58,6.84-2.69,13.88-5.46,21.02-6.57,4.02-.62,8.25-.76,12.91-.41l-.05-.86c-4.67-.34-8.92-.2-12.98,.43ZM77.2,2.98c.54,0,1.12-.01,1.73,0,3.39,.01,7.35,.2,11.15,.53,3.7,.32,7.08,.76,9.78,1.27,3.17,.6,5.78,1.36,7.97,2.33,2.12,.93,3.81,2.02,5.17,3.35,1.98,1.93,3.24,4.35,4.47,6.69,.46,.87,.91,1.74,1.39,2.58,.66,1.15,1.38,2.26,2.01,3.23,1.27,1.95,2.45,3.78,2.92,5.35,.31,1.04,.35,2.09,.1,3.12-.19,.78-.54,1.56-1.06,2.39-.44,.7-.84,1.16-1.26,1.46-.35,.25-.73,.38-1.13,.38-.07,0-.15,0-.22-.01-.64-.07-1.32-.4-1.85-.9-.51-.48-.85-1.09-.98-1.76-.09-.5-.08-1.1-.07-1.8,.03-1.69,.07-3.78-1.32-6.48-.89-1.72-2.41-3.77-4.41-5.93-2.02-2.18-4.4-4.34-6.7-6.08-2.12-1.61-4.21-2.87-6.37-3.87-2-.93-4.11-1.65-6.62-2.26-3.21-.79-6.82-1.34-10.31-1.87-1.55-.24-3.04-.46-4.48-.7l.07-.99ZM21.92,19.78c-.42-1.52-.66-2.76-.78-3.54-.07-.43-.11-.74-.13-.97l-.06-.68,.67,.16c.08,.02,.17,.04,.26,.07,.31,.1,.6,.24,.85,.43,.31,.23,.58,.53,.79,.88,.21,.34,.34,.69,.39,1.05,.06,.37,.03,.78-.08,1.19-.11,.41-.29,.8-.53,1.11-.18,.24-.4,.44-.64,.6l-.57,.37-.18-.66ZM7.9,14.97c.26-1.13,.8-2.13,1.69-3.14,.83-.94,1.91-1.85,3.39-3.01,1.45-1.14,3.06-2.35,4.95-3.47,2.21-1.31,4.41-2.27,6.74-2.93,2.06-.59,4.5-1.02,7.23-1.28,2.77-.27,5.88-.34,8.32-.21,1.24,.07,2.11,.17,2.67,.33l.89,.25-.95,.83c-1.03,.89-2.59,2.24-3.39,5.7-.46,1.98-.65,4.66-.85,7.49-.22,3.04-.45,6.18-1.03,8.83-.54,2.45-1.39,4.5-2.47,5.92-1.03,1.36-2.22,2.08-3.43,2.08h0c-1.11,0-2.33-.58-3.63-1.73-1.34-1.19-2.67-2.92-3.74-4.88-.68-1.24-1.28-2.63-1.79-4.12l-.15-.43,.41-.19c.06-.03,.12-.06,.17-.09,.42-.23,.78-.54,1.07-.93,.31-.41,.54-.89,.68-1.41,.13-.52,.17-1.04,.09-1.53-.07-.46-.25-.94-.51-1.37-.27-.44-.61-.82-1-1.11-.33-.24-.7-.43-1.1-.56-.3-.1-.63-.16-.96-.18-.56-.04-.77-.03-.96,.55-.11,.34-.09,1,.07,2.01,.12,.74,.34,1.93,.73,3.4l.22,.82-.96-.24c-.37-.11-.7-.29-.96-.53-.25-.22-.47-.52-.64-.86-.18-.36-.3-.76-.34-1.14-.07-.57,.04-1.1,.13-1.53l.06-.31c.08-.41,.09-.68-.06-1.01-.1-.23-.32-.57-1.05-.91-.48-.23-1.47-.59-2.87-.56-1.01,.03-2.06,.27-3.11,.72-.96,.41-1.99,1.01-2.86,1.55l-.97,.6,.28-1.4ZM55.76,59.75l-.09-.1c-.54-.61-1.08-1.22-1.62-1.83-2.2-2.51-4.2-4.87-5.8-6.82-.45-.55-.86-1.06-1.24-1.55l-1.36-1.75,1.98,1c2.97,1.5,5.91,3.59,9.01,5.8,1.59,1.13,3.23,2.3,4.93,3.42,2.01,1.32,4.02,2.51,5.98,3.54l2.39,1.26-2.68-.32c-2.54-.3-5.18-.81-7.86-1.53-1.21-.32-2.4-.68-3.54-1.06l-.13-.04Zm22.8,6.04c4.99,1.33,10.35,1.88,14.65,2.32l.21,.02c.78,.08,1.53,.16,2.47,.26,2.35,.26,4.22,.54,5.67,1.04,1.47,.5,2.46,1.22,3.1,2.26,.98,1.56,1.3,3.97,1.61,6.29,.14,1.05,.27,2.05,.46,2.94,.18,.87,.41,1.61,.59,2.21,.14,.45,.25,.81,.31,1.08,.07,.29,.22,.96-.36,1.1-.22,.05-.49,.08-.77,.08-1.13,0-2.63-.35-3.53-.6-1.91-.52-3.95-1.31-5.9-2.29-1.74-.88-3.59-2-5.39-3.09-2.86-1.74-5.82-3.54-8.66-4.51-2.54-.87-4.92-1.08-7.22-1.28-1.84-.16-3.58-.32-5.17-.81-1.66-.51-3.25-1.42-4.99-2.84-1.77-1.44-3.61-3.35-5.34-5.2-.72-.77-1.46-1.58-2.23-2.42l-1.16-1.28,2.28,.62c3.52,.94,6.98,1.54,10.28,1.77,.83,.06,1.66,.09,2.47,.11l.18,.04c2.12,.89,4.28,1.63,6.42,2.2Zm-33.76-23.44c.47-1.05,1.36-2.2,2.39-3.53,1.69-2.17,3.6-4.63,4.68-7.86,.77-2.31,1.09-4.97,1.4-7.54,.39-3.24,.75-6.3,1.99-8.33,1.01-1.67,2.73-2.73,5.09-3.16,2.21-.4,4.99-.28,8.48,.36,3.72,.68,7.61,1.85,11.25,3.36,3.63,1.51,6.91,3.32,9.76,5.38,3.68,2.66,6.83,5.89,9.89,9.01,2.33,2.39,4.5,4.6,6.77,6.45,2.12,1.72,4.25,3.07,6.14,4.26,2.9,1.83,5.18,3.28,5.98,5.05,.69,1.54,.25,3.51-.26,5.78-.48,2.15-1.02,4.58-.89,7.46,.13,2.92,.95,6.28,2.44,9.98,1.46,3.65,3.56,7.54,6.08,11.26,2.12,3.14,4.65,6.33,7.52,9.48,2.87,3.16,6.07,6.26,9.27,8.98,2.91,2.47,5.51,4.38,7.53,5.52,2.11,1.19,3.66,1.5,4.36,.85,.7-.65,.55-2.34-.43-4.64-.94-2.2-2.56-4.99-4.58-7.85-1.33-1.89-2.85-3.84-4.47-5.91l-.06-.08c-3.13-4.01-6.37-8.16-8.27-12.03-1.41-2.88-2.08-5.64-1.98-8.19,.1-2.57,.98-5.02,2.63-7.27,1.82-2.49,4.56-4.72,7.92-6.47,3.4-1.76,7.37-3.01,11.81-3.73,5.25-.85,11.45-.98,17.45-1.11,5.37-.12,10.42-.22,14.85-.79,7.56-.97,12.97-3.25,17.31-5.08,1.17-.49,2.24-.94,3.24-1.32,2.48-.93,4.32-1.37,5.65-1.28,1.67,.09,2.03,1.15,2.09,1.77,.17,1.6-.67,4.03-2.14,6.17-.99,1.44-2.72,3.43-5.39,4.74-4.12,2.01-9.97,2.1-15.13,2.17-1.49,.02-2.88,.04-4.24,.11-3.05,.15-5.59,.53-8.01,1.19-2.31,.64-4.63,1.56-7.53,2.99-1.48,.73-3.03,1.55-4.68,2.43l-.09,.05c-4.43,2.35-8.99,4.77-12.9,5.88-4.6,1.3-8.25,.7-10.67,.3-.4-.07-.75-.12-1.14-.18-1.58-.22-2.43-.09-2.77,.42-.38,.57,0,1.6,1.16,3.06,.7,.89,1.76,2.05,2.87,3.29,2.5,2.77,5.61,6.22,7.82,9.7,1.43,2.25,2.47,4.52,3.48,6.71,1.32,2.87,2.56,5.56,4.5,8.03,2.11,2.68,5.05,5.06,7.64,7.17,1.72,1.4,3.33,2.71,4.54,3.95,.96,.98,1.66,1.92,2.08,2.78,.36,.72,.51,1.38,.47,1.95-.04,.57-.29,1.08-.74,1.52-.29,.28-.67,.54-1.12,.76-1.49,.74-3.88,1.2-6.93,1.34-.64,.03-1.31,.04-1.98,.04-2.56,0-5.31-.21-8.06-.63-3.74-.56-7.09-1.45-10.25-2.7-3.52-1.4-6.82-3.3-9.82-5.65-3.24-2.54-6.32-5.73-9.15-9.48-2.83-3.75-5.36-7.99-7.5-12.58-2.53-5.41-4.57-11.42-6.37-16.71-1.39-4.09-2.57-7.56-3.75-10.19-1.44-3.21-2.84-5-4.54-5.83-1.64-.79-3.56-.73-6.42,.23-1.88,.63-4.11,1.61-6.48,2.66-4.25,1.88-9.06,4-13.88,5.05-2.65,.58-5.45,.86-8.37,.84l-.19-.04c-.67-.29-1.34-.59-2.01-.9-2.68-1.27-5.32-2.77-8.08-4.58-1.65-1.08-3.3-2.25-4.89-3.39-3.57-2.54-6.92-4.92-10.38-6.46-.49-.22-.97-.42-1.46-.6l-.18-.07-.09-.17c-.06-.12-.12-.25-.17-.37-.6-1.35-.62-2.55-.08-3.77Zm-7.22,3.16c2.22,.48,4.52,.99,6.79,1.78l.17,.06,.09,.16c.69,1.17,1.68,2.45,2.95,4.02,1.42,1.74,3.18,3.83,5.11,6.04l1.43,1.64-2-.86c-.34-.15-.68-.3-1.01-.45-2.4-1.1-4.7-2.39-7.05-3.97-2.7-1.81-4.94-3.65-6.48-5.31-.9-.98-1.57-1.89-1.98-2.72l-.47-.94,2.44,.54Z"/>
</svg>

There are two options.
The "line" should be a solid path with a stroke. In that case you can animate the stroke-dasharray.
<svg xmlns="http//www.w3.org/2000/svg" viewBox="0 0 50 10">
<path d="M 5 5 C 28 0 18 12 45 5" stroke="orange" stroke-width="1"
fill="none" stroke-dasharray="0 10" pathLength="10">
<animate attributeName="stroke-dasharray" values="0 10;10 10"
dur="5s" fill="freeze" />
</path>
</svg>
The "line" should be masked with one or more paths. This is the solution for your SVG as it is now. The mask is animated so that it "covers" the line. The only challenge is when the line overlaps itself. In that case there have to be more path animations timed in the mask. You can read more about it in a tutorial like this: SVG Calligraphy Handwriting Animation.
<svg xmlns="http//www.w3.org/2000/svg" viewBox="0 0 50 10">
<defs>
<mask id="m1">
<path d="M 5 5 C 28 0 18 12 45 5" stroke="white"
stroke-width="2" fill="none" stroke-dasharray="0 10"
pathLength="10">
<animate attributeName="stroke-dasharray"
values="0 10;10 10" dur="5s" fill="freeze" />
</path>
</mask>
</defs>
<path d="M 6 5 C 28 1 22 12 44 5 A 4 1 0 0 1 44 6 C 19 12 28 1 6 5.5 A 4 1 0 0 1 6 5"
fill="orange" mask="url(#m1)" />
</svg>

How to animate the rotation of a specific element on its own axis in an SVG (SVG animation tag only)?

I want to animate the two flags, rotate them a little from left to right (or right to left), but I want to do it on their own axis, I don't know how to do it, this is the result I got with the right flag:
(I don't know much but I have been investigating how to make animations with svg, I know that rotate receives the degrees, the x and y position, but I can't understand clearly.
<svg xmlns="http://www.w3.org/2000/svg" width="864" height="864" viewBox="0 0 864 864">
<g id="Grupo_76" data-name="Grupo 76" transform="translate(-682 -189)">
<g id="right-flag" transform="translate(-283.11 -185.563) rotate(11)">
<!-- How can I rotate it on its own axis -->
<animateTransform
attributeName="transform"
attributeType="XML"
type="rotate"
from="0"
to="360"
dur="9s"
repeatCount="indefinite"
/>
<path id="Trazado_128" data-name="Trazado 128" d="M5074,508.573v427.9" transform="translate(-3544.956 -60.656)"
fill="none" stroke="#cab9a9" stroke-width="8" />
<g id="Grupo_53" data-name="Grupo 53" transform="translate(1522 262)">
<rect id="Rectángulo_1" data-name="Rectángulo 1" width="319.344" height="196.249" transform="translate(0 0)"
fill="#999" />
<rect id="Rectángulo_2" data-name="Rectángulo 2" width="319.344" height="196.249" transform="translate(0 0)"
fill="rgba(92,92,92,0.77)" />
</g>
</g>
<g id="left-flag" transform="matrix(0.978, -0.208, 0.208, 0.978, -779.086, 487.436)">
<path id="Trazado_128-2" data-name="Trazado 128" d="M5074,508.573V936.468"
transform="translate(-3239.704 -60.658)" fill="none" stroke="#cab9a9" stroke-width="8" />
<g id="Grupo_53-2" data-name="Grupo 53" transform="translate(1522 262)">
<rect id="Rectángulo_1-2" data-name="Rectángulo 1" width="312.46" height="192.018" transform="translate(0 0)"
fill="rgba(208,191,184,0.35)" />
<rect id="Rectángulo_2-2" data-name="Rectángulo 2" width="312.46" height="192.018" transform="translate(0 0)"
fill="rgba(53,53,53,0.77)" />
</g>
</g>
<circle id="Elipse_1" data-name="Elipse 1" cx="432" cy="432" r="432" transform="translate(682 189)"
fill="rgba(208,191,184,0.35)" opacity="0.83" />
</g>
</svg>
The file was exported from adobe XD and I add the animation tag.

I always suggest that when you are creating svgs to use on the web you better create them in Inkscape as it is a Native svg editor and produces a clearer and cleanest code.
Now the good stuff:
<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="864" height="864" viewBox="0 0 864 864" id="svg2" version="1.1" inkscape:version="0.91 r13725" sodipodi:docname="aa.svg">
<path style="opacity:0.82999998" d="M 864,432 A 432,432 0 0 1 432,864 432,432 0 0 1 0,432 432,432 0 0 1 432,0 432,432 0 0 1 864,432 Z" id="Elipse_1"/>
<g inkscape:transform-center-x="-148.56934" inkscape:transform-center-y="42.976369">
<path style="fill:none;stroke:#cab9a9;stroke-width:8" d="M 450.37451,356.87985 368.72733,776.91812"/>
<path d="M 478.9346,173.03462 792.41135,233.96833 754.96528,426.61167 441.48853,365.67796 Z"/>
<animateTransform attributeName="transform" type="rotate" from="-5 432 432" to="5 432 432" dur="0.5s" repeatCount="indefinite" />
</g>
<g inkscape:transform-center-y="42.976369" inkscape:transform-center-x="148.56932">
<path style="fill:none;stroke:#cab9a9;stroke-width:8" d="m 413.62551,356.87985 81.64718,420.03827"/>
<path d="M 385.06542,173.03462 71.588665,233.96833 109.03474,426.61167 422.51149,365.67796 Z"/>
<animateTransform attributeName="transform" type="rotate" from="5 432 432" to="-5 432 432" dur="0.5s" repeatCount="indefinite" />
</g>
</svg>
Basically you have to set each flag's group rotation center to the background circle's rotation center. In Inkscape it is an easy task and I think that Illustrator should make it easy too.
In this case the flag's rotation center is inkscape:transform-center-x="-148.56934" inkscape:transform-center-y="42.976369", what basically means that the original flag's group rotation center is been translated -148.56934px on the x axis and 42.976369px on the y axis to make it coincide with the circle's rotation center.
Then let's add the animation. As the circle's with and height coincide with the viewbox width and height, which is 864px, you just have to calculate the half, in this case it's 432px, which places it at 432px in both axis. This is the animation itself: <animateTransform attributeName="transform" type="rotate" from="-5 432 432" to="5 432 432" dur="0.5s" repeatCount="indefinite" /> EXPLANATION: You set 432 as the flag's animation rotating center in both axis on the from, stablish -5 degrees and 5 degrees with the same rotation center to the to, set a duration in seconds and to repeatCount you can stablish a number to state the number of repetitions or indefinite to loop forever. The result is that the flag will rotate in its center from -5 degrees to 5 degrees in 0.5 seconds and will do it forever.
For the other flag just copy and paste the same animation but interchange the values of the rotation degrees to make the second flag rotate in the other direction.
And that's it, hope you understood. If any doubt, just add a comment.

SVG - animateMotion does not work with USE element in Firefox

The following code is extracted from some produced by Tesla Powerwall gateway. The expected behaviour is that a green circle will traverse a path, and this is what Chrome shows. Under Firefox (66.0.5 in my case) it just sits at the left of the screen doing nothing.
Should it work under Firefox, and this is a bug in same, of is there something missing/wrong that I can tell Tesla about in the hope that they might get round to fixing it, even though they say they don't support Firefox?
Thanks, Sylvia.
<html>
<body bgcolor="#000000">
<svg width="250" height="100" viewBox="0 0 250 100">
<defs>
<g id="curvedArrow" stroke-width="1">
<path id="curvedPath" d="M 125 75 l 0 -45 a 5,5 0 0 1 5,-5 L 250 25" fill="none"></path>
<circle cx="0" cy="0" r="7" fill-opacity="0.5" stroke-opacity="0">
<animateMotion dur="1000ms" repeatCount="indefinite">
<mpath xlink:href="#curvedPath"></mpath>
</animateMotion>
</circle>
<circle cx="0" cy="0" r="1.5" stroke-opacity="0">
<animateMotion dur="1000ms" repeatCount="indefinite">
<mpath xlink:href="#curvedPath"></mpath>
</animateMotion>
</circle>
</g>
</defs>
<use id="battery-to-home" xlink:href="#curvedArrow" fill="#00D000" x="3" y="28"></use>
</svg>
</body>
</html>

This is a bug from Firefox, the code is fine.
I opened an issue here, note that it is a regression, so hopefully, it will get fixed quickly.
The gist of the issue is that Firefox quite recently modified <use> element's behavior so that they set their cloned content in the Shadow-DOM of the <use>, like the specs now ask to. Seems that they broke something while doing so.
For the time being, if you ever need a workaround, well... don't use an <use>...
Fixed in today's nightly 68.

Firefox supports (at least in this example) animation via animate elements in use elements but not the animateMotion element. You'll want to tweak the values array to get close to the behavior of the arc in the path, but it's possible.
So something like this works in FF.
<svg width="250" height="100" viewBox="0 0 250 100">
<defs>
<g id="curvedArrow" stroke-width="1">
<path id="curvedPath" d="M 125 75 l 0 -45 a 5,5 0 0 1 5,-5 L 250 25" fill="none"></path>
<circle cx="0" cy="0" r="7" fill-opacity="0.5" stroke-opacity="0">
<animate attributeName="cx" values="125; 125; 250" dur="3s" fill="freeze"/>
<animate attributeName="cy" values="75; 30; 30" dur="3s" fill="freeze"/>
</circle>
<circle cx="0" cy="0" r="1.5" stroke-opacity="0">
<animate attributeName="cx" values="125; 125; 250" dur="3s"/>
<animate attributeName="cy" values="75; 30; 30" dur="3s"/>
</circle>
</g>
</defs>
<use id="battery-to-home" xlink:href="#curvedArrow" fill="#00D000" x="3" y="28"></use>
</svg>

SVG path animation from lineto to cubic-bezier curve command

I am trying to animate an svg <path> element. The initial <path> element has L(lineto) commands whereas the <path> that I'm trying to animate it to has C(cubic-bezier curve) commands. I've tried animating it but it doesn't really transition between the two paths. Is something like this possible?
<svg>
<path id="path" d="M0,50 L25,40 L50,60 L75,40 L100,60 L125,40 L150,50" fill="none" stroke-width="2" stroke="#000" />
<animate xlink:href="#path"
attributeName="d"
dur="3s"
from="M 0 50 L 25 40 L 50 60 L 75 40 L 100 60 L 125 40 L 150 50"
to="M 0 80 C 25 55 50 55 75 80 C 100 105 125 105 150 80"
repeatCount="indefinite" />
</svg>

As you found out, path data animations need to list the exact same sequence of commands and points to work. That said, you can divide a path into as many segments as you need, and a cubic bezier can describe a straight line if its control points are positioned in a straight line. For your example to work, you need to
rewrite each L segment as a C segment
divide each C segment into three C segments so that the curve is unchanged
Both tasks are best performed with a grafical editor like Inkscape that has appropriate tools.
<svg>
<path id="path" d="M0,50 L25,40 L50,60 L75,40 L100,60 L125,40 L150,50" fill="none" stroke-width="2" stroke="#000" />
<animate xlink:href="#path"
attributeName="d"
dur="3s"
from="M 0,50
C 12.5,45 12.5,45 25,40
37.5,50 37.5,50 50,60
62.5,50 62.5,50 75,40
87.5,50 87.5,50 100,60
112.5,50 112.5,50 125,40
137.5,45 137.5,45 150,50"
to="M 0,80
C 8.33333,71.6667 16.6667,66.1111 25,63.3333
33.3333,60.5556 41.6667,60.5556 50,63.3333
58.3333,66.1111 66.6667,71.6667 75,80
83.3333,88.3333 91.6667,93.8889 100,96.6667
108.333,99.4444 116.667,99.4444 125,96.6667
133.333,93.8889 141.667,88.3333 150,80"
repeatCount="indefinite" />
</svg>

SVG animations not chaining correctly

I have the following svg and I am trying to animate the shape.
<svg class="svg" viewBox="0 0 100 100">
<path fill="white">
<animate id="close" begin="0s;open.end" attributeName="d" dur="1s"
from="..." to="..." />
<animate id="open" begin="close.end" attributeName="d" dur="1s"
from="..." to="...0" />
</path>
</svg>
The problem I am facing is that the 1st animation (#close) only happens once at the start then never again. The second animation (#open) repeats as normal.
Here's a codepen with my code and simpler animation I based mine off of (which works correctly)
http://codepen.io/dogoku/pen/yxKjs
Thanks for any help

One way would be to put it in the same animation
<animate id="close" begin="0s" repeatCount="indefinite" attributeName="d" dur="2s"
values="M 0,0 L 100,0 100,50 100,100 0,100 0,50; M 0,50 L 100,50 75,50 100,
50 0,50 25,50; M 0,50 L 100,50 75,50 100,50 0,50 25,50; M 0,0 L 100,0 100,
50 100,100 0,100 0,50" />

Resources