How i can create svg animation with <line > ?

Question

<svg width="1000" height="250">
< circle cx="150" cy="150" r="45" fill="royalblue">
<animate attributeName="r" from="0" to="300"
dur="3s" fill="freeze" repeatCount="2"/>
</circle>
</svg>

Answer 1

Remove the space between the backet ( < ) and 'circle' to make your code working...

And if this wasn't the question, reformulate it: what's about the <line>?

Answer 2

svg animation and path with line and polyline you go html course and svg animation and path

Answer 3

Do you firstly know how to add a svg <line> ( and/or a <polyline> ) to a <svg> element? It's a needed prerequisite for animate one ^^
Your code example use a <circle> element, you should replace it with the shape element you want to draw/animate, and adapt ( eventually add more <animation> childs ) the attributes you want to animate...

So, in example:

<svg width="300" height="300" viewbox="0 0 300 300">
<line x1="50" y1="250" x2="250" y2="50" stroke="black" stroke-width="2">
<animate attributeName="x1" from="50" to="250" dur="3s" fill="freeze" repeatCount="2"/>
<animate attributeName="y1" from="250" to="50" dur="3s" fill="freeze" repeatCount="2"/>
<animate attributeName="y2" from="50" to="250" dur="3s" fill="freeze" repeatCount="2"/>
</line>
</svg>

Answer 4

thanks visph