+ 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>
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>?
+ 1
svg animation and path with line and polyline you go html course and svg animation and path
+ 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>
+ 1
thanks visph