How to make an animation of the drawing path?

How to make an animation of drawing the entire path, not just the stroke ?
<svg height="400" width="400">
<path
id="line"
stroke-dasharray="2000px"
stroke-dashoffset="2000px"
 style="fill: transparent; stroke: rgb(0, 0, 0);"
 d="M 15.498 15.498 431.037 487.577 L L L 62.884 396.913 94.033 351.883 158.319 309.973 L L L 189.252 236.175 280.039 205.522 302.034 124.519 L L L 320.749 62.004 384.937 13.925 445.421 30.396 L L L 469.462 54.445 469.462 488.53"/>
 </svg>


stroke-dasharray="2000px"
stroke-dashoffset="2000px"

These values I'm changing, but not drawn the whole graph, but only the stroke ?
April 19th 20 at 12:29
1 answer
April 19th 20 at 12:31
Solution
<svg height="200" viewBox="0 0 400 400" xmlns="http://www.w3.org/2000/svg">
<path d="M 15.498 15.498 431.037 487.577 L L L 62.884 396.913 94.033 351.883 158.319 309.973 L L L 189.252 236.175 280.039 205.522 302.034 124.519 L L L 320.749 62.004 384.937 13.925 445.421 30.396 L L L 469.462 54.445 469.462 488.53" stroke="red" stroke-width="4" fill="red" fill-opacity="0" stroke-dasharray="0 1637">
 <animate attributeName="stroke-dasharray"
dur="2s"
begin="0s"
repeatCount="1"
 values="0 1637; 1637 1637"
id="path"
fill="freeze"/>
 <animate attributeName="stroke"
dur="1s"
begin="path.end"
repeatCount="1"
 values="red; blue"
fill="freeze"/>
 <animate attributeName="fill-opacity"
dur="1s"
begin="path.end"
repeatCount="1"
 values="0; 1"
fill="freeze"/>
</path>
</svg>


Yes, but how to draw the fill. Now when you start to fill already drawn, and draw only the stroke ? - jedidiah_Auer commented on April 19th 20 at 12:34
@Casandra, if possible, Yes. At least a simple example. - jedidiah_Auer commented on April 19th 20 at 12:37

Find more questions by tags SVGAnimationJavaScriptCSS