How to animate a <line> or similar figures?

Question

I wanted to try recreating an animation I saw, but realized that the basic x1 y1 x2 y2 attributes contradict the from= to= ones. So how would you go about animating a line?

Answer 1

What would you mean by << attributes contradict from the from= to= ones >>?

If you want to animate more than one property, you need how many <animate> element as you have attributes to animate (at least, because you could also have many <animate> elements to be run at different times, or even chained):

<svg viewBox="0 0 100 100">
<line x1="0" y1="0" x2="100" y2="100" stroke="#000" stroke-width="3px">
<animate attributeName="x1" from="0" to="100" dur="5s"/>
<animate attributeName="y1" from="0" to="50" dur="5s"/>
<animate attributeName="x2" from="100" to="0" dur="5s"/>
<animate attributeName="y2" from="100" to="50" dur="5s"/>
</line>
</svg>

Answer 2

The only other way that I know, is a workaround using <defs> feature of SVG...
By this way, you could reuse object (your line) defined inside <defs></defs> with an 'id' attribute to refer, and so you could animate your whole line (or any defined svg object) with only one coordinate, as you do with the built-ine <rect> shape:

<svg viewBox="0 0 100 100">
<defs>
<line id="myLine" x1="0" y1="50" x2="50" y2="0" stroke="#000" stroke-width="3px"/>
</defs>
<use xlink:href="#myLine">
<animate attributeName="x" from="0" to="50" dur="5s"/>
<animate attributeName="y" from="0" to="50" dur="5s"/>
</use>

... and obviously, you could define any svg element tree, as complex as you want (you could animate your line globaly, during it have its own local move defined, and very much more complex cases ;))

Answer 3

I' wrote: << The only other way that I know >>... in meaning of pure SVG context: it's also still possible to dynamically access to SVG elements with JS, near from how to for Html elements, as they are regular DOM node elements (but slightly different from Html ones, even if they share some attributes/methods) ^^

Answer 4

Well, it's all right for your SVG anim' now...

For centering it, you need to think to center two different things: your output inside the svg element (it seems you've done), AND the html <svg> element...
You could set temporary 'border:1px solid red;' to your element to better visualize some things:

First, you've set 'width' and 'height' attribute in <svg> tag, but you doesn't provide the usefull 'viewBox' one...
By your way, you implicitly set svg internal coordinate system from 0,0 at upper-left corner of the html bounded box to 'width','height' for right-bottom corner.
By the 'viewBox' way, you define explicitly the internal svg coordinates of left-top corner AND side sizes (in svg internal coordinate system). And so, you doesn't require to set 'width' AND 'height' attribute, but only one to be explicit (the second will be auto-computed to respect 'viewBox' image ratio).

So, simplest way to center your SVG anim' should be:

+ change <svg> tag by:

<svg viewBox="200 0 200 150">

+ add css style to center your <svg> element:
svg {
/* border:1px solid red; */
height:150px; /* specific size (better practice to use css rather than html property) */
margin:auto; /* apply to horizontal margin only, and result to centered element (inside its parent) */
display:block; /* default is inline-block, and auto-margin will not work */
}

Answer 5

What I meant is, for example, a rectangle has the width and height attributes to create it and x and y attributes to position it. In the tutorial, that x value is changed and the whole shape moves. But for a line, it only has x1 x2 y1 y2 attributes, so changing the x attribute to move it is meaningless. I understand the code you wrote and it achieves the animation, but it's redrawing the whole line constantly to do so. Isn't there a better way like for the rectangles? @visph

Answer 6

@visph You lost me when you went into specifics, but I understood that animations can be done with JS.
In any case thanks, I did the thingy that I wanted properly, although I don't know how to make it be centered. https://code.sololearn.com/WpTklvD6KG0X/#html

Answer 7

that looks helpful, but it's a shame I can't seem to understand how viewBox works or how height affects it afterwards... (atm at least)
I don't think these question threads are meant for tens of comments, so I can't ask you to hold my hand any further. Thank you for your help up until now though!
@visph

Answer 8

@Nomeh Uchenna Gabriel
I assume you're saying to use <path>, but I meant animate as in have an already drawn line move. Also I'm pretty sure I have no idea how to properly use path, since I've completed only the HTML course.