+ 1

How i can create svg animation with <line > ?

<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>

16th Jan 2017, 1:58 PM
Nikhil
Nikhil - avatar
4 ответов
+ 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>?
16th Jan 2017, 3:54 PM
visph
visph - avatar
+ 1
svg animation and path with line and polyline you go html course and svg animation and path
22nd Jan 2017, 10:17 AM
Nikhil
Nikhil - avatar
+ 1
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>
22nd Jan 2017, 12:09 PM
visph
visph - avatar
+ 1
thanks visph
23rd Jan 2017, 5:34 AM
Nikhil
Nikhil - avatar