SVG line drawing issue

[Pietroro]

Hi, I was having an issue using the SVG line drawing functionality. When trying to update the strokeDashoffset param something weird happens and the SVG disappears. Instead of updating the path it seems like the div style is updated.

<svg viewBox="0 0 800 600"> 
       <Anime strokeDashoffset={[anime.setDashoffset, 0]} direction={'alternate'} loop={true}>
              <path fill="none" stroke="black" strokeWidth="15" d="M 0 450 ... 450 "/>
       </Anime>
  </svg>

It seems to generate the following:

<svg viewBox="0 0 800 600">
        <div stroke-dasharray="undefined" style="stroke-dashoffset: 0px;">
              <path fill="none" stroke="black" stroke-width="15" d="M 0 450 ... 450 "></path>
        </div>
</svg>

Any help would be greatly appreciated, thanks!

[alaingalvan]

Hi, you need to tag the <Anime> element with an svg attribute so anime would generate a <g> instead:

<svg viewBox="0 0 800 600"> 
       <Anime svg strokeDashoffset={[anime.setDashoffset, 0]} direction={'alternate'} loop={true}>
              <path fill="none" stroke="black" strokeWidth="15" d="M 0 450 ... 450 "/>
       </Anime>
  </svg>

[Pietroro]

I see, thank you very much for your help. I should have read the documentation more carefully!